@charcoal-ui/icons-cli

Figma からアイコンの SVG をダウンロードし、GitHub に自動で更新の Pull Request を作成します。

GitLab にも対応しています。

インストール

npm

npm i --save-dev @charcoal-ui/icons-cli

yarn

yarn add -D @charcoal-ui/icons-cli

使い方

Figma からアイコンをダウンロードする

yarn icons-cli figma:export

必要な環境変数は以下です。

| 名前 | 必須 | 説明 | | --------------- | ---- | --------------------------------------------------------------------------------------------- | | FIGMA_FILE_URL | yes | Figma の URL です。node-id を含んでいる場合、その子孫のコンポーネントのみダウンロードします。 | | FIGMA_TOKEN | yes | Figma API のアクセストークンです | | OUTPUT_ROOT_DIR | yes | svg をダウンロードするディレクトリです（例: packages/icon-files） |

Figma 内のコンポーネントは以下の命名規則に従います（ 例: 16/Add Inline/Add ）。

• / を含む
• / の前は数字あるいは Inline

SVG ファイルにアイコン向けの変換をかける

yarn icons-cli svg:optimize --color "#000" --ignoreFile ./misc/icons-cli-denylist

SVG ファイルに SVGO による最適化をかけつつ、指定した色を currentColor に置換します。 ignoreFileでは、処理から除外する SVG ファイルの一覧を記したファイルを指定することができます。globのパターンを使用できます。

必要な環境変数は以下です。

| 名前 | 必須 | 説明 | | --------------- | ---- | ----------------------------------------------------------------------- | | OUTPUT_ROOT_DIR | yes | svg ディレクトリが存在するディレクトリです（例: packages/icon-files） |

SVG コードを dynamic import するファイルを生成する

yarn icons-cli files:generate

必要な環境変数は以下です。

| 名前 | 必須 | 説明 | | --------------- | ---- | ----------------------------------------------------------------------- | | OUTPUT_ROOT_DIR | yes | svg ディレクトリが存在するディレクトリです（例: packages/icon-files） |

GitHub に Pull Request を作成する

yarn icons-cli github:pr

必要な環境変数は以下です。

| 名前 | 必須 | 説明 | | --------------------- | ---- | ------------------------------------------------ | | GITHUB_ACCESS_TOKEN | yes | GitHub のアクセストークンです | | GITHUB_REPO_OWNER | no | リポジトリの owner です（ 例: pixiv ） | | GITHUB_REPO_NAME | no | リポジトリ名です（ 例: charcoal ） | | GITHUB_DEFAULT_BRANCH | no | リポジトリのデフォルトブランチです（ 例: main ） |

GitLab に Pull Request を作成する

yarn icons-cli gitlab:mr

必要な環境変数は以下です。

| 名前 | 必須 | 説明 | | --------------------- | ---- | ----------------------------------------------------------------------------- | | GITLAB_PROJECT_ID | yes | GitLab のプロジェクト ID（数値）です | | GITLAB_ACCESS_TOKEN | yes | GitLab のアクセストークンです | | GITLAB_HOST | no | GitLab のホスト名（セルフホスティング版の場合は自身のサーバーのホスト名）です | | GITLAB_DEFAULT_BRANCH | no | リポジトリのデフォルトブランチです（ 例: main ） |