SVGをコードにそのまま貼り付けると、propsが不統一になったり値がハードコードされたりしがちです。このガイドでは、クリーンなReact + TypeScriptアイコン運用を紹介します。
1) SVG入力を正規化する
- 変換前に不要なグループ、メタデータ、インラインスタイルを削除します。
- viewBoxを保持し、コンポーネントのスケーリングを予測可能に保ちます。
- 1ページに複数のアイコンを表示する際の衝突を避けるため、IDやマスクをリネームします。
2) 型安全なコンポーネントを生成する
- SVGのpropsを拡張するTypeScriptのpropsを使い、IntelliSenseを完全にサポートします。
- 幅・高さにデフォルト値を設定し、親の利用側から上書きできるようにします。
- アイコンがテキスト色を継承する場合は、固定のfillをcurrentColorに置き換えます。
3) デザインシステムに統合する
- アイコンを予測可能なフォルダーに格納し、単一のバレルファイルからエクスポートします。
- CIで不正なSVG属性をブロックするlintルールやテストを適用します。
- セマンティックなサイズトークンとariaラベルの利用例をドキュメント化します。