SVG を React コンポーネントに変換する — JSX変換の仕組みと実践的なアイコン管理
ReactでSVGを使う方法はいくつかありますが、Reactコンポーネントとして扱うと最も柔軟に活用できます。SVG to Reactツールは、SVGコードをTypeScript対応のReactコンポーネントに自動変換し、開発効率を大幅に向上させます。
SVGをReactで使う3つの方法
ReactでSVGを使う方法は①imgタグで埋め込む②インラインSVGをJSXに直接書く③Reactコンポーネントとして扱うの3つがあります。コンポーネントとして扱うと、propsでfill・stroke・sizeを動的に変更でき、TypeScriptの型チェックも効き、スタイリングが最も柔軟になります。SVG to Reactはこの変換を自動化します。
JSXで必要なSVG属性の変換ルール
JSXではHTMLの属性名がキャメルケースになります。class→className、stroke-width→strokeWidth、fill-rule→fillRule、clip-path→clipPathなどが代表例です。また、style属性はオブジェクト形式style={{color: "red"}}に変換する必要があります。SVG to Reactはこれらを全自動で変換するため、変換ミスによるエラーを防げます。
fill/strokeをpropsで受け取る設計
アイコンコンポーネントではfillとstrokeを固定値にせず、propsで受け取ることで再利用性が高まります。デフォルト値をcurrentColorにするとCSSのcolorプロパティを継承でき、<MyIcon style={{color: "#3b82f6"}} />のように親コンポーネントから色を制御できます。SVG to Reactのfill/stroke propsオプションでこのパターンを自動生成できます。
Figmaアイコンをコンポーネント化する方法
FigmaからSVGをエクスポートするにはレイヤーを右クリック→「Export」→SVGを選択します。エクスポートしたSVGには不要な属性（data-*、id、Figma固有の属性）が含まれる場合があります。SVG to Reactで変換後、不要な属性を手動で削除し、パスが多い複雑なアイコンはreact-svgかSVGRのCLIツールを使った一括変換も検討します。