Vue使用svg-sprite-loader插件

在Vue项目中有时需要使用svg图片，但是如果直接import的话，vue是以文件形式引入的
输出的是svg的路径
而使用svg需要有标签的样式


这时就需要svg-sprite-loader加载器
在vue中使用插件，可以在webpack配置中的webpack.base.conf.js中使用，也可以在vue.config.js中使用
推荐使用vue.config.js，根据官方文档，在这里使用，可以添加或修改loader和插件的选项，而且是使用链式编程，更方便。

还有个问题，在使用svg图片时，<span> 标签里面可能含有fill属性，这个属性是svg默认属性，如果不去掉的话，后面在外部使用影响svg的样式就可能不会生效，所以需要使用svgo.loader去掉svg默认属性
​

配置如下
第一步当然是要先下载两个loader

yarn add svg-sprite-loader --dev
yarn add svgo-loader@2.2.2 --dev
或
npm install svg-sprite-loader --save-dev
npm install svgo-loader@2.2.2 --save-dev

注意：svgo版本必须是2.2.2或2.2.1不然后面配置不生效，应该是3.x版本有改动

然后在vue.config.js中

const path = require('path')
module.exports = {
  lintOnSave: false,
  chainWebpack: config =>{
    const dir = path.resolve(__dirname, 'src/assets/icons') // 需要查找的路径
    config.module.rule('svg').exclude.add(dir) // 其他 svg loader 排除 icons 目录
    config.module
      .rule('svg-sprite')
      .test(/\.svg$/) // 匹配svg文件
      .include.add(dir).end() // 包含 上面添加的icons 目录
      .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end()
      .use('svgo-loader').loader('svgo-loader')
      .tap(options => ({...options, plugins:[{removeAttrs: {attrs: 'fill'}}]})).end()
    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}])
  }
}

vue.config.js具体参数配置查看：cli.vuejs.org/zh/guide/we…

如果svg图片太多，需要批量导入

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