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 色にまとめられてしまうためです。