Lifeプログラミングブログ運営ライフハックお金キャリアお問い合わせサイトマップHOMEプログラミングJavaScriptReact環境で手軽にSVGを表示する方法React環境で手軽にSVGを表示する方法2022年8月28日JavaScriptツイートシェアはてブ送るPocket1ダウロードしたSVGを手軽にReactアプリケーション上で表示する方法について書きました。今回は以下の3つの方法について紹介します。FontsのSVGを利用します。SVGs』で紹介されている方法です。ようにするとSVGをコンポーネントとしてインポートできます。"*.svg"'というエラーが出るケースがあります。上記のエラーは型定義ファイル(d.tsファイル)を更新すると解決できます。src;}型定義ファイルを新規追加した場合はtsconfig.jsonのinclude項目に当該ファイルを追加します。]}なお、型定義ファイルの詳細解説は【TypeScript】アンビエント宣言(declare)と型定義ファイル(d.ts)の概要で紹介しています。imgタグで呼び出すSVGを画像ファイルとして読み込む方法です。);}react-svgを利用するreact-svgを利用することでSVGをコンポーネントのように扱えます。);}さいごにNext.js環境でSVGを利用する場合はbabel-plugin-inline-react-svgを利用する方法もあります。詳細はNext.jsでSVGを利用する方法(babel-plugin-inline-react-svgの使い方)で紹介しています。Twitter(@nishina555)やってます。‘ReactComponentRECOMMENDJavaScriptツイートシェアはてブ送るPocket1プロフィールnishina大企業、ベンチャーと色々なところでWebエンジニアやっています。退職手続きから案件参画まで。人気の記事iPhoneの連絡先の保存がうまくできない!?原因は同期設定かも。