共计 880 个字符，预计需要花费 3 分钟才能阅读完成。
此解决办法使用的是 vue-cli 插件 vue-cli-plugin-svg-sprite
效果如下：
那个朋友圈图标就是我从网上找的 svg 图片
使用方式如下：
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 图标出来了
