← すべてのテキストツール

SVGからReactコンポーネント

SVGをpropsつきのReactコンポーネントに変換し、そのまま貼り付けできます。

  • 無料
  • 登録不要
  • どの端末でも使える

約SVGからReactコンポーネント

SVGを貼り付けると、width、height、colorなどのpropsを受け取るReactコンポーネントが得られます。属性はキャメルケースになり(stroke-widthはstrokeWidthになる)、classはclassNameになります。固定の色をcurrentColorに置き換えると、アイコンが周囲のテキストの色に従います。

SVGからReactコンポーネントの使い方

  1. 上の欄にテキストを入力するか貼り付けます。
  2. 入力するとすぐに結果が表示されます。
  3. 結果をコピーするか、ファイルとしてダウンロードします。

このツールを使う理由

別名

よくある質問

Reactで、SVGアイコンの色を変更するにはどうしますか?

SVGでfillまたはstrokeをcurrentColorに設定し、親要素のCSSのcolorを変更するか、colorのpropを渡します。

SVGからReactコンポーネントは無料ですか?

はい。ToolipediaのSVGからReactコンポーネントは無料で、登録不要、透かしもありません。

安全に使えますか?

はい。すべての計算はブラウザ内で行われ、入力した内容が当社サーバーに送信されることはありません。

スマートフォンでも使えますか?

はい。AndroidやiPhoneの最新ブラウザのほか、タブレットやパソコンでも使えます。インストールは不要です。

アカウントは必要ですか?

いいえ。ページを開いてツールを使うだけです。登録もメールアドレスも不要です。

関連ツール