Reactプロジェクトでwebpackがsvgを読み込む

I webpackの設定

ローダーのインストール

yarn add svg-sprite-loader --dev
yarn add svgo-loader --dev

webpack.config.jsファイルの設定

{
 test: /\.svg$/,
 use: [
 { loader: 'svg-sprite-loader', options: {} },
 { loader: 'svgo-loader', options: {
 // plugins:[
 //ロード時にsvgのデフォルトの塗りつぶし色を削除する
 // {removeAttrs:{attrs: 'fill'}}
 // ]
 }}
 ]
 },

II アイコンコンポーネント

import React from "react"
//方法1 1つのsvgファイルをインポートする
require("icons/tag2.svg");
require("icons/chart.svg");
require("icons/money.svg");
// 方法2 svgフォルダを直接
let importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
try {importAll(require.context('svg保存フォルダへのパス ', true, /\.svg$/));} catch (error) {console.log(error);}
// 方法3 Iconコンポーネントをインデックスに直接追加する.htmlscriptタグを使って、アイコンフォント内のすべてのsvgへのリンクを
//ここで使われるタイプスクリプト
type Props={
 name:String;
}
const Icon=(props:Props)=>{
 return (
 <svg className="icon">
 <use xlinkHref={'#'+props.name}/>
 </svg>
 )
}
export default Icon

III 使用

<Icon name="svgファイル名 "/>