此解決辦法使用的是 vue-cli 插件 vue-cli-plugin-svg-sprite
使用方式如下:
vue add svg-sprite
vue.config.js添加配置,在文件內最下方找到pluginOptions
module.exports = {
pluginOptions: {
svgSprite: {
/*
* The directory containing your SVG files.
*/
dir: 'src/assets/icons',
/*
* The reqex that will be used for the Webpack rule.
*/
test: /\.(svg)(\?.*)?$/,
/*
* @see https://github.com/kisenka/svg-sprite-loader#configuration
*/
loaderOptions: {
extract: true,
spriteFilename: 'img/icons.[hash:8].svg' // or 'img/icons.svg' if filenameHashing == false
},
/*
* @see https://github.com/kisenka/svg-sprite-loader#configuration
*/
pluginOptions: {
plainSprite: true
}
}
}
};
再執行:
npm install svgo svgo-loader --save-dev
然後再在 your vue.config.js file:
module.exports = {
chainWebpack: config => {
config.module
.rule('svg-sprite')
.use('svgo-loader')
.loader('svgo-loader');
}
};
然後再assets下創建icons文件夾,將你的svg圖標放入,name就是svg的名字,如下方式使用:
<svg-icon name="aperture"></svg-icon>
這個組件是插件幫你生成的
就會看到你的svg圖標出來了