创建icons/svg文件夹将svg文件放在该文件夹下面在components文件夹中创建svgiconfont.vue文件文件内容：[removed] import '@/icons' export default {name: 'svg-icon',props: { iconClass: {type: String,required: true }, className: {type: String }},computed: { iconName() {return `#icon-${this.iconClass}` }, svgClass() {if (this.className) { console.log('svg-icon ' + this.className) return 'svg-icon ' + this.className} else { return 'svg-icon'} }},mounted: function() {} }[removed]style .svg-icon {width: 1em height: 1em vertical-align: -0.15em fill: currentColor overflow: hidden }创建index.js文件文件内容如下：import Vue from 'vue'import svgiconfont from '@/components/svgiconfont'// svg组件/*require.context有三个参数：directory：说明需要检索的目录useSubdirectories：是否检索子目录regExp: 匹配文件的正则表达式 */// 全局注册Vue.component('svg-icon', svgiconfont)const requireAll = requireContext =>requireContext.keys().map(requireContext)const req = require.context('./svg', false, /\.svg$/)requireAll(req)在main.js引入icons文件夹下即添加import ‘@/icons’修改webpack.base.conf.js添加代码：{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: 50000, name: utils.assetsPath('img/[name].[hash:7].[ext]')} }使用方法在页面中添加svg图标？您是指字体图标式的 还是直接以svg代码嵌入页面中的。
如果是字体图标的话，效率是比图片要好得多。矢量的可以适应各种环境的改变
如果是页面插入的话 ：一是减少页面的请求，sprite毕竟是要靠外部引用加载的图片会有服务器资源请求 svg嵌入css里就少了这请求。 缺点就是代码量会加大（css文件变大）。
效率的话 得看浏览器了，对于不支持svg的浏览器就不谈了。svg主要强项是绘图，比如统计图啊那些都是svg来生成的，效率挺高的，硬要是说谁效率更高，这个没可比性，因为图片也有很多格式。不同格式的图片浏览器解析消耗不同。在谷歌上 两者效率应该说微乎其微吧，而svg性能更佳
