FigmaからエクスポートしたSVGアイコンをインラインで使う前に：viewBox・currentColor・不要属性の整理メモ

デザイナーからFigmaで書き出したSVGアイコンを受け取り、そのままReactやVueのコンポーネントに貼る。よくある流れですが、そのままだと「CSSで色が変わらない」「サイズ指定が効かない」「1ファイル数KBある」といった問題が起きがちです。インラインSVGとして使う前に確認しているポイントをまとめます。

1. widthとheightを消し、viewBoxを残す

書き出し直後のSVGは width="24" height="24" が固定されています。インラインで使うなら、これらを削除して viewBox="0 0 24 24" だけ残すと、親要素のフォントサイズやCSSの width に追従します。

<svg viewBox="0 0 24 24" class="icon" aria-hidden="true">…</svg>

.icon { width: 1em; height: 1em; }

viewBoxがないSVGは拡大縮小が崩れるので、消してはいけないのはこちらです。

2. fillを currentColor にする

Figmaの書き出しは fill="#1A1A1A" のように色が直書きされています。単色アイコンなら fill="currentColor" に置き換えると、親の color で色が変わり、ダークモードやホバーも CSS だけで対応できます。

多色アイコンは無理に置換せず、CSS変数（fill="var(--icon-accent)"）にする方が安全です。

3. 不要なものを削る

よく残っているもの：

• <defs> 内の未使用の clipPath（Figmaのフレーム由来）
• xmlns:xlink やエディタのメタデータ
• 小数点以下6桁の座標

これらは手で消すより、SVGOに任せるのが確実です。ブラウザで試すなら Nibbo の SVG最適化 が便利で、SVGOをブラウザ内で実行し、ビフォー・アフターを並べて確認できます。精度はデフォルトの小数3桁ならアイコンでは見た目が変わりません。ファイルはアップロードされないので、未公開プロダクトのアイコンでも気にせず使えます。

4. アクセシビリティの属性を決める

• 装飾目的（テキストラベルの横のアイコン）：aria-hidden="true"
• 単独で意味を持つ（アイコンだけのボタン）：ボタン側に aria-label を付ける、または SVG 内に <title> を残す

SVGOのプリセットによっては <title> を削除するので、意味を持つアイコンでは残す設定にします。

5. IDの衝突に注意

同じページに複数のインラインSVGを置くと、id="clip0" のような汎用IDが衝突し、別アイコンのクリップが適用される不具合が起きます。最適化時にIDのプレフィックスを付けるか、不要なclipPathごと削除しておきましょう。

まとめ

1. width/heightを消してviewBoxを残す
2. 単色は currentColor
3. SVGOで不要要素と桁数を削る
4. aria-hidden か <title> を決める
5. IDの衝突を防ぐ

これだけで、アイコン1つあたり数百バイトになり、CSSから自由に扱えるようになります。

— Vitalii