SVG to React コンポーネント変換ツール

SVGを貼り付けまたはアップロードするとcamelCase属性・ルートへのプロップスプレッド・オプションのTypeScript型定義を備えたクリーンなReactコンポーネントが返されます。無料、プライベート、即時処理。

ここでSVGをReactに変換する理由

クリーンなcamelCase JSX

すべてのSVG属性がReact向けにリネームされます：classはclassNameに、stroke-widthはstrokeWidthに、clip-pathはclipPathになり、警告なしにコンパイルされます。

インラインスタイルをオブジェクトに変換

fill:red;stroke-width:2のようなstyle属性がcamelCaseキーとベンダープレフィックスを大文字化した適切なReact styleオブジェクトに変換されます。Reactが拒否する文字列の代わりです。

ルートへのプロップスプレッド

ルートSVGには独自の属性の後に{...props}スプレッドが付くため、呼び出し元がclassName・width・height・onClickを渡してデフォルトを上書きできます。

TypeScriptまたはJavaScript

トグル1つでReact.SVGProps<SVGSVGElement>を持つ型付きコンポーネントを出力するか、プレーンJavaScriptのままにできます。コンポーネント名は自由に設定できます。

名前空間属性の修正

xlink:hrefはxlinkHrefに、xml:spaceはxmlSpaceになります。data-*とaria-*属性はそのまま保持されるため、グラデーション、マスク、アクセシビリティはすべて機能し続けます。

100%プライベート・無料

変換はブラウザの組み込みパーサーを使って完全に行われます。SVGがアップロードされることはなく、登録不要、制限もありません。

SVGをReactコンポーネントに変換する方法

1

SVGを追加

.svgファイルをドラッグ＆ドロップするか、クリックして参照するか、SVGマークアップをボックスに貼り付けます。

2

オプションを設定

コンポーネント名を付け、型定義が必要な場合はTypeScriptをオンにし、ルートSVGにプロップをスプレッドするか選択します。

3

クリーンなJSXを取得

コンバーターがclassをclassNameに変更し、すべての属性をcamelCaseに変換し、インラインスタイルをstyleオブジェクトに変換し、xlink:hrefなどの名前空間属性を修正します。

4

コピーして貼り付け

コピーをクリックしてコンポーネントをReact・Next.js・TypeScriptプロジェクトに直接ドロップします。ビルドステップも依存関係も不要です。

適切なツールを選択

このページが存在する理由

Use the SVG to React converter when you need a vector as a real component, not a static asset. It camelCases every attribute, turns inline styles into a style object, spreads props on the root, and can emit TypeScript.

最適な用途

  • Turning Figma, Illustrator, or Inkscape icons into JSX components
  • Building an icon set where each SVG accepts className, size, and color props
  • Inlining a logo as a component instead of an img tag or background

SVG to React FAQ

SVGコードを貼り付けるか.svgファイルをアップロードすると、ツールがすぐ使えるReactコンポーネントを返します。属性をcamelCaseにリネームし、インラインスタイルをstyleオブジェクトに変換し、ルートにプロップをスプレッドして、コンポーネント名の設定とTypeScriptのトグルができます。出力をプロジェクトにコピーして他のコンポーネントと同様にインポートします。

JSXはHTMLではありません。ReactはclassではなくclassNameを、stroke-widthではなくstrokeWidthのようなcamelCase属性を、styleの文字列ではなくstyleオブジェクトを期待します。生のSVGをJSXに貼り付けるとエラーが発生するかレンダリングされないことが多く、それがこのコンバーターが解決するものです。

はい。TypeScriptトグルをオンにするとコンポーネントがprops: React.SVGProps<SVGSVGElement>とReactインポートで型付けされ、.tsxファイルにそのまま追加できます。オフにするとプレーンJavaScript出力になります。

スプレッドを有効にすると、ルートSVGが自身の属性の後に{...props}で終わります。これにより、コンポーネントを使用する人がclassName・width・height・fillやイベントハンドラーを渡してデフォルトを上書きできます。ほとんどのアイコンライブラリがこの方法で動作します。

いいえ。変換はネイティブのSVGパーサーを使ってブラウザ内で完全に行われます。何も送信されないため、非公開のブランドアセットや独自のアイコンにも安全に使用できます。

SVG to React コンポーネント変換ツール

SVGを貼り付けまたはアップロードするとcamelCase属性・ルートへのプロップスプレッド・オプションのTypeScript型定義を備えたクリーンなReactコンポーネントが返されます。無料、プライベート、即時処理。

ここでSVGをReactに変換する理由