デザインデータをコードへ。SVGを貼り付けるだけで、props展開・型定義・属性補正済みの「そのまま使えるReactコンポーネント」を生成します。
TypeScript対応
currentColorに置換
色を親要素から継承
SVG→JSX変換ツールが選ばれる理由
デザインツールから書き出したSVGをReactプロジェクトに貼り付けると、「属性名が無効です」という警告やエラーに直面します。 本ツールはそれらを一瞬で解決するだけでなく、{...props} によるプロパティの透過（Spread Attributes）や、インラインスタイルの自動パースを行い、メンテナンス性の高いエンジニア品質のコードを提供します。
こんなシーンで便利です
アイコンライブラリの構築
プロジェクト専用のカスタムアイコンを、統一された命名規則と型定義を持つコンポーネントとして整理できます。
ダークモード対応の自動化
currentColor置換機能を使えば、CSSのcolorプロパティ一つでSVGの色を動的に変更できるコンポーネントが作れます。
複雑なSVGのクリーンアップ
不要なメタデータやReactで非推奨な属性を整理し、コードの見通しを良くします。
既存プロジェクトのTS化
JavaScriptで書かれた古いSVGコンポーネントを、TypeScriptの型安全な形式へアップデートする際にも有効です。
使い方は簡単 5ステップ
- デザインツール（Figma等）からSVGコードをコピーします。
- 左側の入力エリアにコードを貼り付けます。
- コンポーネント名やTypeScriptの有無をサイドパネルで設定します。
- 「currentColorに置換」をONにして、スタイル制御を柔軟にします。
- 生成されたJSXコードをコピーし、.jsx または .tsx ファイルとして保存します。
※出力コードはES Modules形式（export const...）で生成されるため、名前付きインポートで効率よく管理できます。
ご利用時の注意点
- 属性の補正：fill-rule → fillRule など、React仕様のキャメルケースに完全対応しています。
- インラインスタイル：style='color: red' 形式の属性も、React用のオブジェクト形式 {{ color: 'red' }} に自動変換します。
- サーバーサイド：Next.jsのServer Components環境下でも、クライアントサイド同様に軽量に動作するコードを出力します。
React/Next.js 向け SVG属性変換ガイド
本ツールが自動で行う、標準SVG属性からJSX(React)属性への主要な変換例です。
| SVG標準属性 | JSX(React)属性 | 変換の理由・メリット |
|---|---|---|
| class | className | JavaScriptの予約語との衝突を回避し、Reactの仕様に準拠します。 |
| stroke-width | strokeWidth | ハイフン区切りの属性をキャメルケースに変換し、ランタイムエラーを防ぎます。 |
| fill-opacity | fillOpacity | すべてのプレゼンテーション属性をReactが解釈可能な形式に統一します。 |
| style="mask:none" | style={{ mask: 'none' }} | インライン文字列をオブジェクト形式にパースし、JSX内で動的制御を可能にします。 |
| onclick | onClick | イベントハンドラをReactの合成イベント（SyntheticEvent）形式に補正します。 |
| xmlns:xlink | xlinkHref | 名前空間を持つ属性をReact推奨のキャメルケース形式に修正します。 |
TypeScript (TSX) への対応と型定義
本ツールで「TypeScript」を有効にすると、コンポーネントに React.SVGProps<SVGSVGElement> 型が自動付与されます。これにより、width, height, fill などの標準的なSVG属性に対してエディタ上で強力な補完が効くようになり、型安全な開発が可能になります。
Figmaの「Copy as SVG」で書き出したコードには、Reactでは不要な xmlns や xml:space 等が含まれます。これらを自動クリーンアップすることで、バンドルサイズの軽量化にも貢献します。
{...props} を展開する設計により、<Icon className="text-blue-500 w-6 h-6" /> のように、呼び出し側からTailwindのクラスを直接注入してスタイリングできます。
Reactコンポーネント化したSVGアイコンの最適なパッケージングと運用戦略
SVGからJSXへ変換した後の効率的なファイル配置、ツリーシェイキングを効かせるモジュール設計、および大規模プロジェクトにおけるアイコン管理の最適化手法を解説します。
バレルファイルを用いた名前付きインポートの一元管理とビルド効率化
変換した多数のアイコンコンポーネントは、個別にファイルインポートするのではなく、同一ディレクトリ内にindex.ts（バレルファイル）を作成し、各コンポーネントを名前付きで再エクスポートする構成に集約してください。
これにより呼び出し側のコードが簡潔になるだけでなく、Next.jsのビルド（ViteやWebpack）時にツリーシェイキング（Tree Shaking）が最適に機能するため、使用していない不要なアイコンコードが本番バンドルに混入してファイルサイズを肥大化させるリスクを防止できます。
Next.jsの動的インポートを活用した初期バンドルサイズの削減テクニック
管理画面のメニューや複雑なダッシュボードなど、1ページに数十種類以上のSVGアイコンをレンダリングする場合、すべてのコードを静的に読み込むと初期JavaScriptのロードが遅くなります。
ファーストビュー（初期表示）に不要なアイコンは、Next.jsのnext/dynamic機能を用いてssr: falseオプション付きで動的インポートするか、ユーザーのホバーなどのアクションを検知したタイミングで非同期ロードさせることで、コアウェブバイタルのLCP（Largest Contentful Paint）を大幅に改善できます。
Figmaから書き出された無駄なグラデーションIDの衝突を防ぐネームスペース化
同一ページ内に複数のSVGコンポーネントを配置した際、デザインツールが自動生成したグラデーションやマスクの参照ID（id="paint0_linear"など）が重複していると、ブラウザが意図しないスタイルを参照してアイコンの色や表示がバグる現象が発生します。
これを根本から防ぐため、JSX変換後は定義内（defs）の各id属性およびurl参照に対し、コンポーネント名に紐づいた一意の接頭辞を手動または自動スクリプトで付与し、DOM全体でのID競合を完全に回避する設計を徹底してください。
よくある失敗と対策
SVG属性をキャメルケースに変換せずコンポーネント化し、ブラウザでInvalid DOM property警告が発生
FigmaやIllustratorなどのデザインツールからエクスポートしたSVGコードをそのままReactのJSXにコピペすると、「stroke-width」や「fill-opacity」などのハイフン区切り属性が原因で、コンソールに大量のランタイムエラーや警告が出力され、最悪の場合レンダリングが崩れます。
💡 対策・解決策を見る▼
SVG内の固定カラーコード（#000000等）が残り、CSSやTailwind CSSから色を変更できない
SVG内の各パス（path）に「fill='#333'」のようなカラーコードが直接ハードコーディングされていると、React側から「className='text-blue-500'」や「fill='currentColor'」を指定してもスタイルが適用されず、ダークモード対応やホバー時の色変更が不可能になります。
💡 対策・解決策を見る▼
TypeScript環境（TSX）で型定義を省略し、Propsの補完が効かず型安全性が失われる
Reactで自作のSVGアイコンコンポーネントを作成する際、引数のPropsに型を定義（またはany指定）していないと、呼び出し側で「width」や「height」を入力してもエディタのコード補完が効かず、意図しない型エラー（Type Error）を引き起こす原因になります。
💡 対策・解決策を見る▼
コンポーネント側で「{...props}」の展開を忘れ、外部からclassNameやサイズの上書きができない
JSX化したSVGに引数のProps（Spread Attributes）を渡す処理「{...props}」が抜けていると、そのコンポーネントはインポート先でサイズ（w-6 h-6）の変更やマージンの追加が一切できなくなり、再利用性の低いバグの多いコード資産になってしまいます。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.貼り付けたSVGコードや変換後のJSXデータが外部に送信され漏洩する心配はありませんか
A. 一切ありません。当ツールはすべての解析とコード変換処理をユーザーのブラウザ内だけで実行する完全ローカル処理型の安全設計です。入力データが外部サーバーへ送信されたりデータベースに保存されたりすることは一切なく、ページを閉じればデータは即座に完全消去されます。
Q.変換したJSXやTSXのコンポーネントコードはNextjsのサーバーコンポーネントでもそのまま使えますか
A. はい、そのままお使いいただけます。出力されるコードは標準的なReactコンポーネントの仕様に準拠しており、サーバーサイドの実行環境下でもクライアントサイド同様に軽量かつ安全に動作するため、NextjsのApp Router環境でも問題なくインポート可能です。
Q.SVGファイル内に記述されているスタイル属性の文字列はReact用のオブジェクト形式に修正されますか
A. はい、自動で修正されます。SVG標準のインライン文字列形式で書かれたスタイル属性を検出し、Reactが解釈可能なオブジェクト形式である二重中括弧の記述へパースして出力するため、コピペ後のビルドエラーやランタイム警告を防ぐことができます。
Q.FigmaからコピーしたSVGコードに含まれる不要な名前空間やメタデータは自動で削除されますか
A. はい、自動で削除されます。デザインツールからエクスポートした際に付与されるxmlnsなどの名前空間やReact環境では不要となるメタデータを自動的にクリーンアップするため、コードの視認性が向上するとともに本番バンドルサイズの軽量化にも繋がります。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。