SVG を React に

SVG を React、JSX、または TSX に変換します

SVG ファイルを、JSX マークアップ、TypeScript または JavaScript のすぐにインポートできる React コンポーネント、または SVG を文字列としてエクスポートするモジュールに変換します。コンバーターは、JSX 属性を修正し、インラインスタイルを変換し、viewBox を保持し、バッチダウンロードをサポートします。

ここにファイルをドロップ

サンプルを試す

プレビュー

元画像を表示

プレビューはありません。ファイルを追加すると結果が表示されます。

新規ファイルの既定値を編集しています

出力

import、コンポーネント、export をそろえた完成したモジュールです。

モジュールコンポーネント名

コンポーネント、エクスポートされる定数、生成されるファイルの名前になります。既定ではファイル名を PascalCase にしたものです。

言語

forwardRef

コンポーネントをラップして、ref が svg 要素に届くようにします。

props を展開

React.SVGProps<SVGSVGElement> を、ファイル由来の属性のあとにルートの svg 要素へ展開します。

エクスポート

最適化SVG を最適化

出力を生成する前に、安全な最適化プリセットを実行します。

width と height を削除

ルートの width と height を取り除き、CSS や渡した props でサイズが決まるようにします。viewBox は必ず保持されます。

スタイルcurrentColor を使う

色を指定している fill と stroke をすべて置き換えて、絵柄が CSS の color プロパティを引き継ぐようにします。fill="none" はそのまま残ります。

SVG とは

SVG（Scalable Vector Graphics）は XML をもとにしたベクター画像形式です。ピクセルではなく、図形、パス、塗り、線を数式で表すため、どんなサイズで描画しても品質が落ちません。

SVGはWeb標準のベクター形式です。すべての最新ブラウザでネイティブに表示でき、CSSでの装飾やJavaScript、SMILによるアニメーションにも対応します。ロゴ、アイコン、イラストでは軽量になりやすい一方、複雑なSVGはファイルサイズが大きくなる場合があります。

SVG を React に変換するのはどんなとき

.svg ファイルを import したときに何が返るかは、バンドラーごとに異なります。インライン展開されたマークアップのこともあれば、URL のこともあり、適切なローダーがなければ何も返らないこともあります。ほかのコードと一緒にコミットできるコンポーネントなら、その違いを避けられます。アイコンは普通の JSX になり、型チェックが効き、ツリーシェイキングの対象になり、ほかのコンポーネントと同じように props を受け取れます。変換では、JSX に必要で素の SVG にはない書き換えも行います。stroke-width は strokeWidth に、class は className に、xlink:href は xlinkHref になり、インラインの style 文字列はオブジェクトになります。「currentColor を使う」を有効にすると、すべての fill と stroke が CSS の color プロパティを引き継ぐため、1 つのコンポーネントで、使う場所ごとの色をすべてまかなえます。

SVG を React にオンラインで変換する方法

1
SVG ファイルをドロップするか「ファイルを選択」を押してキューに追加します。一度に最大 40 件です。
2
「JSX」「React Component」「SVG 文字列」から選び、コンポーネント名、言語、currentColor を使うかどうかを指定します。生成されるコードは、設定を変えるたびに更新されます。
3
プレビューからコードをコピーするか、「すべて保存」を押すと、SVG ごとに 1 つのファイルをダウンロードできます。キューに複数ある場合は 1 つの ZIP になります。

プライバシー：ファイルはブラウザから出ません

変換は、JavaScript および WebAssembly を使用してブラウザーでローカルに実行されます。ファイルのアップロードやサーバー側の変換がないため、追加したファイルはデバイス上に残ります。

ローカル処理は、機密ロゴ、内部文書、未公開のクライアントアートワークを保護するのに役立ちます。ページと変換コードは使用中にキャッシュされるため、すでに開いているツールはネットワーク接続がなくても引き続き動作できます。

よくある質問

3 つの出力は何が違いますか？

「JSX」は、すでにあるコンポーネントの中に貼り付けるための、素の svg マークアップだけを出力します。「React Component」は import と export を含む完成したモジュールで、HomeIcon.tsx や HomeIcon.jsx としてそのまま保存できます。「SVG 文字列（TypeScript）」はマークアップをただの文字列として書き出す .ts モジュールで、HTML やメールのテンプレートなど、React ではない場所に差し込むときに使います。

コンポーネントは className や onClick などの props を受け取れますか？

「props を展開」が有効なら受け取れます。コンポーネントは React.SVGProps<SVGSVGElement> を受け取り、ファイル由来の属性のあとにルートの svg 要素へ展開します。そのため className、style、onClick、width、aria-label はいずれも適用され、ファイルの指定を上書きします。あわせて forwardRef を有効にすると、ref が svg 要素そのものに届きます。

「currentColor を使う」を有効にすると何が変わりますか？

色を指定している fill と stroke はすべて currentColor に置き換わります。そのため絵柄は CSS の color プロパティが解決した色で描かれ、コンポーネントに color="red" を渡せばそのとおりになります。fill="none" はそのまま残り、「塗らない」という意味を保ちます。既定では無効です。複数の色を使ったイラストは、有効にすると 1 色にまとめられてしまうためです。