基于 vue-cli3 使用 svg-sprite-loader 在 vue 中引入 svg 图标

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{
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 的处理是：

1
2
3
4
5
6
7
8

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)清除：

1
2
3
4
5

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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()
}
}