はじめに
FigmaからSVGアイコンをエクスポートするときのTipsです。
デフォルトのエクスポートでは軽量化もされず、currentColorにも変換されません。
数や頻度が多いとヒューマンエラーの温床になりますし、ほとんどプラグインにおまかせすると人生が楽になります。
前提
アイコンデータそのものの最適化が必要です。
最適化されている基準としては下記のような項目が挙げられます。
- アウトライン化されている
- 単色のアイコンなどで可変となる色（後の
currentColor）が#000000の塗りつぶしのみで構成されている - ひとつのオブジェクト（レイヤー）に統合されている
最適化については以下の記事が参考になるかもしれません。
使用するFigmaプラグイン
SVG Exportを使います。
フロー
1. 書き出したいアイコンを用意する
例として下記から拝借しています。
Material Symbols & Icons - Google Fonts
このアイコンを書き出します。
2. レイヤー名を適した形式に変更する
デフォルトではface2というレイヤー名になっています。
Figmaのデフォルトと同様、今回使うプラグインではレイヤー名がそのままファイル名になります。
アイコンぽい名前にしておきたいので、icon-face2に変更します。
3. レイヤーを選択し、SVG Exportを起動する
SVG Exportのウインドウ内で選択したレイヤーが表示されます。
4. Edit presetsのボタンを選択する
5. 三点リーダ（・・・）のアイコンボタンを選択する
6. Import presetsを選択する
7. プリセットファイルを選択する
設定用JSONファイルを選択します。
下記は私がいつも使っているプリセットファイルです。
各々で設定することもできます。
{
"preset-icon": {
"name": "Icon",
"settings": {
"pretty": true,
"multipass": true,
"floatPrecision": 3,
"layerNamesAsClasses": false,
"useCurrentColorFill": false,
"useCurrentColorStroke": false,
"removeSvgElementFill": true,
"removeFill": false,
"removeFillOpacity": true,
"removeOpacity": true,
"removeStroke": false,
"removeFillRule": false,
"removeClipRule": true,
"moveDefsToTop": true,
"nonScalingStroke": false,
"blackToCurrentColor": true,
"removeXlink": true,
"plugins": {
"removeXMLNS": false,
"cleanupAttrs": true,
"cleanupIDs": true,
"inlineStyles": true,
"minifyStyles": true,
"convertStyleToAttrs": true,
"removeRasterImages": true,
"removeUselessDefs": true,
"cleanupNumericValues": true,
"cleanupListOfValues": true,
"convertColors": true,
"removeUselessStrokeAndFill": true,
"removeViewBox": true,
"removeHiddenElems": true,
"removeEmptyText": true,
"convertShapeToPath": true,
"moveElemsAttrsToGroup": false,
"moveGroupAttrsToElems": true,
"collapseGroups": true,
"convertPathData": true,
"convertEllipseToCircle": true,
"removeEmptyContainers": true,
"mergePaths": true,
"reusePaths": false,
"sortAttrs": true,
"sortDefsChildren": true,
"removeDimensions": true,
"prefixIds": false
}
}
}
}
8. 出力の設定を7のプリセット（Icon）に変更する
さきほどの一覧にもどり、Defaultとなっている箇所をIconに変更します。
黒かった線が白く表示されます。
行を選択すると、SVGの中身を確認できます。
#000000だった箇所がcurrentColorに変換されています。
9. アイコンをエクスポートする
Export SVGボタンからSVGのデータとして出力したり、コピーのアイコンボタンからはコードでコピーします。
基本的な操作は以上です。
複数のアイコンをまとめて設定、エクスポートする
たいていの場合アイコンはたくさんあるので、まとめて操作したいです。
同様にMaterial Symbols & Iconsから複数拝借しました。
1. 該当するオブジェクト（レイヤーを）選択する
フレーム内のパスを選択しても面倒なので、レイヤーでまとめて選択します。
Shiftを押しながら選択します。
SVG Exportで一覧になります。
2. Apply preset to allからIconを選択する
すべてのアイコンに設定が反映されます。
3. アイコンをエクスポートする
個々でファイルをエクスポートするなりコピーするなりします。
たくさんある場合はExport allでZIPにまとめてもよいかもしれないです。
まとめ
プリセットファイルはFigmaファイルごとにインポートする必要がありますが、クオリティを保ちながら楽ができるのでおすすめです。
今回のサンプルでは30%程度の軽量化ができました。やったぜ。
Discussion