Amebaのデザインシステムである「Spindle」では、「Amebaらしさ」をあらわす要素の一つとして、アイコンを作成しています。アイコンは、Amebaブランドで使用されているAmeba Sansに着想を得て設計されています。
このリポジトリでは、様々な形式でアイコンを利用する前提として、SVGファイルを配信します。
このリポジトリでは、SVGファイルを生成・配信することを目的としているため、以下のことを目指していません。
- 誰でも使えるような抽象化したライブラリ実装
- SVGファイル以外の加工例) アイコンフォントの作成、コンポーネント配信
Figmaで管理されているアイコンを取得し、SVGファイルとして書き出します。大まかな処理の流れは以下のとおりです。
- Figma APIを利用して、アイコンリストを取得する
- アイコンリストからそれぞれのアイコンのIDを取得する
- Figma APIとアイコンIDを利用して、それぞれのアイコンをSVGとして取得する
- 取得してきたSVGファイルに対して最適化処理をかける
- 最適化したSVGを利用して、SVG Sprite用のSVGを生成する
事前準備として、FigmaのURLからFile KeyとNode ID、パーソナルアクセストークンを取得します。
File KeyとNode IDはFigma上で対象要素を選択した時に、以下の形式でブラウザのURLバーに表示されます。
https://www.figma.com/file/${FILE_ID}/icon?node-id=${NODE_ID}
なお、セキュリティ上の問題から、Figmaファイルの閲覧権限が適切か確認してください。また、パーソナルアクセストークンは他人に漏らさないように扱ってください。
取得したFile KeyとNode IDは、figma.jsonという名前でファイルを作成し、保存します。Node IDが「0%3A1」のようにURLエンコードされている場合は、デコードした値を指定します。destにはSVGを出力するディレクトリを指定します。特定のアイコンのみ取得したい場合には、iconNamesに配列形式でアイコン名を指定します。ALLを指定するとすべてのアイコンを取得しますが、ファイル数が多い場合にはダウンロードに時間がかかります。なお、figma.jsonは、間違ってFigmaファイルが公開されないように、git管理されていません。
{
"fileKey": "${FILE_ID}",
"nodeId": "${NODE_ID}",
"dest": "dist",
"iconNames": ["clock"]
}SVGの生成をするには以下のコマンドを実行します。${FIGMA_PERSONAL_ACCESS_TOKEN}には、事前準備で取得したパーソナルアクセストークンを指定します。
FIGMA_TOKEN=${FIGMA_PERSONAL_ACCESS_TOKEN} yarn build
yarn build内部では、以下の処理をしており、それぞれ個別に実行できます。
Figmaからアイコンを取得し、SVGファイルとして保存します。Figma APIへのリクエストが多くなりすぎないように1アイコンずつゆっくりと取得するため、時間がかかります。
FIGMA_TOKEN=${FIGMA_PERSONAL_ACCESS_TOKEN} yarn icon:get
svg/svgoを利用して、取得したSVGを最適化します。最適化する項目は.svgo.yamlに記述されています。
yarn icon:optimize
kphl/svg-spriteを利用して、取得したSVGからSVG Spriteを作成します。SVG Spriteを生成する設定はsprite.jsonに、最適化する項目はsprite.svgo.jsonに記述されています。
yarn icon:sprite