6. SVG的坑

如果svg里自带颜色fill="red"，就无法用css更改颜色，可以把svg中的fill删掉。

但如果svg太多，不可能一个一个去删。
另一个办法是安装svgo-loader
yarn add --dev svgo-loader

注意：最新版svgo-loader有兼容性问题，安装svgo-loader@2.2.1版本 yarn add svgo-loader@2.2.1 查看所有版本命令：npm info svgo-loader versions

并在vue.config.js的config.module下添加两句代码

config.module
      .use('svgo-loader').loader('svgo-loader')
      .tap(options=>({...options,plugins:[{removeAttrs:{attrs:'fill'}}]})).end();

在React项目中同样要做这些操作

但是在安装svg-sprite-loader和svgo-loader之前要先yarn eject，生成webpack.config.js，之后在该文件module→rules→oneOf中添加以下代码

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

同样引入svg也要添加下面两行代码

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

这时 __WebpackModuleApi和require会报错，安装@types/webpack-env(yarn add --dev @types/webpack-env)错误就会消除