在使用vue开发项目时，会遇到很多使用图标的场景。以使用阿里图标为例，假如你的项目中图标很固定，以后都不会变了，那么随便选择哪种方式的图标都可以。但是如果项目中图标会变，时不时的变个图标或者新增、减少一个图标，比较灵活的场景下使用svg会比较方便一些。
1、安装包
npm install svg-sprite-loader --save-dev
2、项目中使用的是vue-cli2手脚架的话，配置如下：
在build文件夹下找到webpack.bae.conf.js，
module: { rules: [ test: ‘/\.svg$/‘, include: [reslove(‘src/icon‘)], loader: ‘‘svg-sprite-loader, options: { symboId: ‘icon-[name]‘ } ]
然后在找到如下代码，加上这一行 ‘exclude: [resolve(‘src/icons‘)],‘
{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: ‘url-loader‘, exclude: [resolve(‘src/icons‘)], options: { limit: 10000, name: utils.assetsPath(‘img/[name].[hash:7].[ext]‘) } },
使用cli3配置如下：
在新建的vue.config.js中，添加以下代码
const path = require(‘path‘) function resolve(dir) { return path.join(__dirname, dir) } module.exports = { chainWebpack(config){ config.module .rule(‘svg‘) .exclude.add(resolve(‘src/icons‘)) .end() config.module .rule(‘icons‘) .test(/\.svg$/) .include.add(resolve(‘src/icons‘)) .end() .use(‘svg-sprite-loader‘) .loader(‘svg-sprite-loader‘) .options({ symbolId: ‘icon-[name]‘ }) .end() } }
原文：https://www.cnblogs.com/zmyxixihaha/p/13102417.html