SVG→コンポーネント変換
SVGをそのまま本番用のReactまたはVueコンポーネントに変換 — sizeプロップ、JSX属性変換、外部依存なし。
SVGをReact・Vueコンポーネントに即時変換
SVGをReactやVueのコードベースにそのままコピーするには、属性名の変換・sizeプロップの追加・XMLプリアンブルの除去など手作業が必要です。ZolkitのSVG→コンポーネント変換ツールはこれらをすべて自動化 — SVGを貼り付けるだけで、クリーンな型付きコンポーネントが数秒で生成されます。
JSX属性の自動変換
SVGの属性名をJSXの形式に自動変換します：stroke-width → strokeWidth、fill-rule → fillRule、class → classNameなど。
即時変換
入力するとリアルタイムで結果が更新されます。純粋なJavaScriptで動作 — サーバー通信なし、重いライブラリなし、WASMなし。
React・Vue両対応
SVGPropsを持つReact関数コンポーネント（TSX）、またはComposition API script setupブロックを持つVue SFCを生成。ワンクリックで切り替え可能。
完全プライベート
SVGコードはブラウザの外に出ません。サーバーへの送信・ログ記録・データ収集は一切なく、すべてメモリ内で変換されます。
ずっと無料
アカウント不要、使用制限なし、有料壁なし。SVGを貼り付けてコンポーネントをコピーして使うだけです。
sizeプロップ内蔵
生成されるコンポーネントはwidthとheightの両方を制御するsizeプロップ（デフォルト24）を受け取り、デザインシステムでどんなサイズにも対応できます。
SVGをコンポーネントに変換する方法
- 1
SVGコードを入力パネルに貼り付けるか、.svgファイルをドロップします。
- 2
コンポーネント名を入力し、ターゲットフレームワーク（React TSXまたはVue SFC）を選択します。
- 3
生成されたコンポーネントコードをコピーするか、「ダウンロード」をクリックして.tsxまたは.vueファイルとして保存します。
よくある質問
Reactではどのような属性名が変換されますか？
ハイフン区切りのSVG属性はすべてcamelCaseに変換されます：stroke-width → strokeWidth、fill-rule → fillRule、clip-rule → clipRule、stroke-linecap → strokeLinecapなど。class → className、xlink:href → hrefという特殊ケースも処理されます。
VueではSVGの属性名が変換されないのはなぜですか？
VueのテンプレートはSVG要素のkebab-case属性名をネイティブでサポートしており、ブラウザとVueのコンパイラーがstroke-widthを正しく処理します。変換は不要なため、Vue出力は元のSVGに近い形を保ちます。
sizeプロップとは何をするものですか？
生成されるコンポーネントはSVGの固定のwidthとheightをsizeプロップ（デフォルト24）に置き換えます。これにより<MyIcon size={32} />や<MyIcon size={16} />など任意のサイズで使用できます。
ReactコンポーネントでカスタムのSVG属性を使用できますか？
はい。ReactコンポーネントはReact.SVGProps<SVGSVGElement>を継承しているため、fill・stroke・className・aria-labelなどのSVG属性をプロップとして渡せます。ルートの<svg>上の{...props}スプレッドがそれらを通過させます。
<path>などの子要素を持たないSVG要素はどうなりますか？
一般的な空のSVG要素（path・circle・rect・ellipse・line・stopなど）がソースで<elem></elem>として現れている場合、JSXで必要な自己終了形式<elem />に自動変換されます。
複数の色や複雑なSVGにも対応していますか？
はい — このツールはシンプルな単一パスのアイコンだけでなく、SVG内のすべての要素と属性を処理します。グラデーション・フィルター・マスク・グループはすべて保持されます。出力は簡略化されたものではなく、コンポーネントでラップされた完全なSVGです。