最近在做个 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()
  }
}