変換ツール

SVG JSX 変換｜React コンポーネントを生成

SVG のコードから React 用のコンポーネントを生成します。stroke-width などの属性を JSX の表記に変換し、アイコンを React のコードに組み込む作業を補助します。SVG は変換のためサーバーへ送信されます。

デザインツールから出力した SVG アイコンを React のコンポーネントにする。

SVG

JSX

こんなときに使えます

  • デザインツールから出力した SVG アイコンを React のコンポーネントにする。
  • viewBox や線幅の指定を確認しながら、SVG をコードで管理する。

使い方

  1. ルートの <svg> を含むコードを貼り付けるか、.svg ファイルを読み込みます。
  2. 右側に生成されたコンポーネントと属性を確認します。
  3. コードをコピーし、コンポーネント名、サイズ、用途に応じたアクセシビリティ属性を調整します。

入力例

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke-width="2" d="M4 12h16" /></svg>

出力例

import * as React from "react"
const SvgComponent = props => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
    <path fill="none" strokeWidth={2} d="M4 12h16" />
  </svg>
)
export default SvgComponent

仕様と注意点

このツールは完全なローカル変換ではありません。機密情報を含む SVG を入力しないでください。

外部画像・フォント・CSS への参照がある SVG は、利用先の環境でも必要なリソースを用意する必要があります。

アイコンの意味に応じた title、aria-label、装飾用の aria-hidden などは利用先で指定してください。変換だけでアクセシビリティの用途を判断することはできません。

入力内容は同じタブ内に一時保存され、再読み込みや同じ入力形式のツールで再表示される場合があります。共用端末では、使い終わったら入力欄をクリアしてください。

よくある質問

PNG や JPG を SVG にできますか？

このページは既存の SVG コードを React 用に変換します。写真やビットマップをベクトル化する機能はありません。デザインツールから書き出した SVG のコードを入力してください。

React Native でもそのまま使えますか？

Web 向けの svg 要素と React Native の描画コンポーネントは異なります。React Native 用の出力が必要な場合は、関連ツールの SVG → React Native を利用してください。

色や大きさは変換後に変えられますか？

生成されたコンポーネントに渡す props や、内部要素の fill・stroke・width・height を調整できます。内部に色が固定されている場合は、親の色だけ変更しても反映されないので出力コードを確認してください。

仕様を確認する