SVG を React コンポーネントに
SVG を貼るだけで、そのまま import できる JSX / TSX コンポーネントに。
またはファイルをドロップ / 下にコードを貼り付け
React コンポーネント
出力はここに表示されます
使い方
- 1SVG コードを貼り付けるか、.svg ファイルをドロップします。
- 2TypeScript 出力を切り替え、コンポーネント名を設定します。
- 3生成されたコンポーネントをコードベースにコピーします。
無料・登録不要・透かしなし —— すべてブラウザー内でローカルに動作するため、ファイルが端末を離れることはありません。
よくある質問
具体的に何が変換されますか？
属性は camelCase に（stroke-width → strokeWidth）、class は className に変換され、残りの props はルート要素へ展開されるので、サイズや色をそのまま渡せます。
先に SVG を最適化すべきですか？
はい —— まず SVG 最適化ツールに通すと、より小さくきれいなコンポーネントになります。2 つのツールはワンクリックの距離です。