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ファイルとして保存します。