SVG を React コンポーネントに変換（JSX）| SvgJsx

SVG を React コンポーネントに変換

あらゆる SVG アイコンやイラストを、JSX 対応の属性、props の展開、オプションのサイズ・色プロパティを備えた React 関数コンポーネントに変換します。

なぜ SVG を React にそのまま貼り付けてはいけないのか

生の SVG を .jsx ファイルに貼り付けると、「Invalid DOM property stroke-width」や「Invalid DOM property class」といった警告が大量に表示され、style 属性や XML 宣言が含まれているとコンパイルエラーになることもあります。大きなアイコンセットで属性を 1 つずつ手作業で書き換えるのは、時間がかかりミスも起きやすい作業です。

このツールは名前の書き換えを自動で行い、props を受け取れるコンポーネントでマークアップをラップします。ルートの <svg> に {...props} が展開されるので、親から className、aria-label、onClick、任意の幅などを渡せ、アイコン自体を編集し直す必要はありません。

React アイコンのおすすめ設定

再利用可能なアイコンコンポーネントには、次の設定をおすすめします。

currentColor を有効にして、親要素の文字色を継承させ、ダークモードにも対応させる。
size プロパティを有効にして、size={20} のように 1 つの値で幅と高さを制御する。
viewBox を残し、固定の width と height を削除して CSS で拡大縮小できるようにする。
ツールチップやアニメーションなど、親が <svg> 要素自体を必要とする場合だけ forwardRef を使う。

インラインコンポーネントと画像ファイルの使い分け

インライン SVG コンポーネントは CSS でスタイルを付けたり、アニメーションさせたり、ホバー時に色を変えたりでき、追加のネットワークリクエストも発生しません。一方、変化しない大きなイラストは、ブラウザが個別にキャッシュできる <img src="/file.svg"> のほうが効率的な場合があります。アイコンや UI グラフィックにはコンポーネント、重いアートワークには img タグを使い分けましょう。

よくある質問

対応している React のバージョンは？

出力は通常の関数コンポーネントで、React 16.8 以降（React 18・19 を含む）で動作します。forwardRef と memo はオプションで、有効にしたときだけインポートされます。

生成されたファイルで React をインポートする必要はありますか？

不要です。Next.js、Vite、Create React App 4 以降が採用している新しい JSX 変換では、React をスコープに入れる必要がありません。ツールはコンポーネントが実際に使うものだけをインポートします。

親からアイコンの色を変えるには？

currentColor オプションを有効にしてください。fill と stroke が currentColor に置き換わり、アイコンは親の CSS カラー（例：Tailwind の text-red-600 クラス）で描画されます。

アイコンに onClick や aria-label を渡せますか？

はい。コンポーネントはルートの <svg> に {...props} を展開するため、渡した SVG 属性やイベントハンドラはそのまま転送され、デフォルト値を上書きします。