SVG→コンポーネント変換

SVGをそのまま本番用のReactまたはVueコンポーネントに変換 — sizeプロップ、JSX属性変換、外部依存なし。

フレームワーク
Input
コンポーネント出力

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. 1

    SVGコードを入力パネルに貼り付けるか、.svgファイルをドロップします。

  2. 2

    コンポーネント名を入力し、ターゲットフレームワーク(React TSXまたはVue SFC)を選択します。

  3. 3

    生成されたコンポーネントコードをコピーするか、「ダウンロード」をクリックして.tsxまたは.vueファイルとして保存します。

よくある質問