2019画像などのjs以外のリソースをimportしてjsxで使用したいということがまぁまぁあると思います。react-svg-loaderというパッケージを使うとsvgをimportしてjsxとして使用することができます。--save-dev導入インラインで直接使う場合は以下のようにimportすればOKです。この書き方初めて知りました。'react-svg-loader!./image1.svg';Webpackで使用するWebpackで使用する場合は、READMEの導入を参考にwebpack.config.jsのloaderに設定を追加します。]}ReactのコードもREADMEにならってこのように書きます。jsxで書けるのがいいですね。height={50}/>エラーが出ましたWebpackを起動するとエラーが出ました。(5:6)試しに以下のoptionsの項目を削除してみました。するとエラーが消えました。tags}SVGOで最適化SVGOというsvgを最適化して、サイズを軽くしてくれるnode.js製のライブラリがあります。optionsでsvgoを使用することもできます。fileswebpack.config.jsを次のようにします。]}TypeScriptのコンパイルエラーTypeScriptを使用しているとこのようなエラーが出ます。'./image1.svg'.WebpackでTypeScriptを使用しているときにコード以外のリソースをimportしようとするとモジュールが存在しないのでコンパイルエラーになります。そこで自前の型定義ファイルを作ることで回避します。webpackcustom.d.tsというファイルをプロジェクトのトップレベルに配置します。中身は下記のような定義を書いておきます。content;}これでモジュールとして認識されるようになるので読み込めるようになります。JestのテストでエラーJestでコンポーネントファイルのテストを書いているのですが、テストを走らせるとsvgの読み込みのところでエラーが出ました。(src/Hoge.tsx:7:1)Jestのテストでもsvgを読み込めるようにjest-svg-transformerをインストールしてみました。npmjest.config.jsのtransformを下記のようにするとsvgを読み込めるようになり、エラーが解消されました。kwst.site.。