在前端项目中引入svg syboml的webpack配置

在前端项目中，我们常常用到icon，虽然可以通过img的方式引入，但是我们可以通过svg syboml的方式引入，同时需要配置webpack

在项目的webpack.config.js中添加以下代码

如果Webpack不可以更改可以yarn eject

{

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

在IDE终端中

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

这样可以在html中使用

<svg className="icon">
      <use xlinkHref="#svg的文件名"/>
</svg>

使用时，记得

require('icons/xx.svg')

逐个引入svg显然太麻烦

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

同时

yarn add --dev webpack-env

typescript

yarn add --dev @types/webpack-env