SVG → JSX/React変換ツール
オンラインでSVGをJSX Reactコンポーネントに変換。SVG属性をキャメルケースに変換し、Reactコンポーネントとしてラップ。無料で即座に変換。
SVG → JSX変換について
ReactでSVGアイコンやグラフィックスを使用するには、SVG属性をJSX互換の構文に変換する必要があります。SVGはstroke-width、fill-opacityなどのケバブケース属性を使用しますが、JSXではキャメルケースにする必要があります。このツールはこれらの変換をすべて自動的に処理します。SVGをexport文付きのReactコンポーネントにラップすることもできます。デザインツールのSVGを再利用可能なReactアイコンコンポーネントに変換するのに最適です。
このツールを評価
4.8 / 5 · 55 件の評価
最新情報を受け取る
毎週の開発ヒントと新ツール情報。
スパムなし。いつでも解除可能。
Enjoy these free tools?
☕Buy Me a Coffee使い方
- 入力パネルにSVGマークアップを貼り付け
- コンポーネント名を設定しラップオプションを切り替え
- 変換をクリックしてJSX互換SVGを生成
- 結果をReactコンポーネントファイルにコピー
一般的な使用例
- FigmaやIllustratorのSVGアイコンをReactコンポーネントに変換
- 再利用可能なReact SVGコンポーネントのアイコンライブラリを構築
- 静的HTMLのSVGアセットをReactに移行
- Reactレンダリング用のインラインSVGを最適化