react本地使用svg最好的方法（不使用img标签）

1.首先将需要的svg下载下来放到icons目录下再commit

2.eject

yarn eject

3.安装svg-loader

yarn add --dev svg-sprite-loader

yarn add --dev svgo-loader

4.配置webpack

在config文件下的webpack.config.js里的oneOf:[]里注册svg-loader：

{
  test: /\.svg$/,
     use: [
       {loader: "svg-sprite-loader", options: {}},
       {loader: "svgo-loader", options: {}}
    ]
},

使用

require('icons/one.svg')
<svg fill="red">
   <use xlinkHref="#one/>
</svg>

• 注意要使用require，ThreeShakingt会自动删除无用的import引入(eg:import x from 'icons/one.svg'但是x没有被tsx用到）而ThreeShaking不适用于require。

5.ts中批量引入svg

yarn add --dev @types/webpack-env@1.15.1

let importAll = (requireContext:__WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext)
try {importAll(require.context('icons',true,/\.svg$/))} catch (e) {console.log(e)}