TypeScript対応
currentColorに置換
色を親要素から継承
Advertisement
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環境下でも、クライアントサイド同様に軽量に動作するコードを出力します。
Advertisement
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のクラスを直接注入してスタイリングできます。
よくある質問（FAQ）
Q.propsを展開するのはなぜですか？
A. 生成されたコンポーネントを呼び出す際に、<Icon className='w-4 h-4' /> のように外部から属性を上書き・追加できるようにするためです。
Q.セキュリティ上の懸念はありますか？
A. 変換処理は完全にユーザーのブラウザ内（ローカル）で実行されます。コードが外部サーバーに送信されることは一切ありません。
Q.複数のパスがある複雑なSVGでも大丈夫ですか？
A. はい。パスの数に関わらず全ての属性をスキャンして置換するため、複雑なイラストレーションのSVGでも変換可能です。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。