前言
1、基于 vue-cli3
2、使用插件 svg-sprite-loader
在 src/icons/svg文件夹下放入一个 svg 并引用组件SvgIcon就能使用 svg 图标
要在vue.config.js做一下配置
onst 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()
}
}
vue-cli 3 基于 webpack-chain ，使用了 file-loader，并且把路径指定为在img文件夹下;
但我们的svg 并不在img文件夹，而且svg-sprite-loader已经自带了file-loader的功能;
所以，我们可以在我们自定义的 vue.config.js 文件下将 rule(svg) 清除(config.module.rule('svg').uses.clear()),然后加上自定义的 svg rule;
