最近在做个 vue 的项目，从各种 github 上的开源库上借鉴开发方法。
之前读过 PanJiaChen 的项目 vue-admin-template，发现项目里对 svg 的使用很巧妙，只要在 src/icons/svg文件夹下放入一个 svg 并引用组件SvgIcon就能使用 svg 图标。
于是我也想在我的项目中这么操作，但是不同之处是我的项目是基于 vue-cli 3 的，而作者的项目是自己配置的 webpack，所以我要在 vue-cli 3 的基础上进行改造。费了点时间，所以还是把这次改动写下来。

翻看作者的 webpack 配置，可以看到关于 svg 文件处理的配置是这样写的：

{
  test: /\.svg$/,
  loader: 'svg-sprite-loader',
  include: [resolve('src/icons')],
  options: {
    symbolId: 'icon-[name]'
  }
}, {
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  exclude: [resolve('src/icons')],
  options: {
    limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
},

作者使用了一个插件 svg-sprite-loader对 svg 文件做处理，并指定了只对src/icons下的 svg 做处理。在第二个对象中，svg 还用了 url-loader做处理，但不对src/icons下的 svg 做处理。（这里如果不想对 svg 使用 url-loader的话其实可以在正则里不加 svg，不知道为什么作者还要做个 svg 的正则判断）。

而在 vue-cli3 中，对 svg 的处理是：

webpackConfig.module
      .rule('svg')
        .test(/\.(svg)(\?.*)?$/)
        .use('file-loader')
          .loader('file-loader')
          .options({
            name: genAssetSubPath('img')
          })

vue-cli 3 基于 webpack-chain ，使用了 file-loader，并且把路径指定为在img文件夹下，但我们的 svg 并不在 img 文件夹，而且svg-sprite-loader已经自带了file-loader的功能，所以，我们可以在我们自定义的vue.config.js文件下将rule(svg)清除：

module.exports = {
  chainWebpack: config => {
    config.module.rule('svg').uses.clear()
  }
}

然后加上自定义的 svg rule，最后的配置如下：

const path = require('path');
function resolve(dir) {
  // 路径可能与你的项目不同
  return path.join(__dirname, dir)
}

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('svg')
      .uses.clear()
    config.module
      .rule('svg1')
      .test(/\.svg$/)
      .use('svg-sprite')
        .loader('svg-sprite-loader')
        .options({
          symbolId: 'icon-[name]'
        })
        .end()
      .include
        .add(resolve('src/icons'))
        .end()
  }
}