1、基础工作都是引用了svg-sprite-loader这个插件
npm i svg-sprite-loader –save
2、写一个Svglcon的组件 （components/Svglcon），在components目录下新建一个SvgIcon文件夹，然后再新建一个index.vue文件，如：
3、index.vue文件内容为：
<template>
<svg :class=”svgClass” xmlns=”http://www.w3.org/2000/svg”>
<use :xlink:href=”iconName” xmlns:xlink=”http://www.w3.org/1999/xlink” />
</svg>
</template>
<script>
export default {
name: ‘SvgIcon’,
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ”
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`;
},
svgClass() {
if (this.className) {
return ‘svg-icon ‘ + this.className;
} else {
return ‘svg-icon’;
}
}
}
};
</script>
<style scoped>
.svg-icon {
width: 1rem;
height: 1rem;
vertical-align: -0.15rem;
fill: currentColor;
overflow: hidden;
}
</style>
4、导入需要的svg资源文件，在src目录下新建一个icons目录，并在其中新建一个index.js文件，目录结构如下：
index.js 文件内容如下：
import Vue from ‘vue’
import SvgIcon from ‘@/components/SvgIcon’ // svg component
// register globally
Vue.component(‘svg-icon’, SvgIcon)
const req = require.context(‘./svg’, false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
这一步的主要目的是一次加载完全部svg资源，并注册了全局组件
5、注册为全局组件了还需要在main.js中引入一下icons的文件，如：
6、然后我们在模板中使用，如下：
到这里基础工作都做完了，但是svg还是显示不出来的，接下来又分2种情况
对于第一种情况
一、如果项目里有引用
的情况，这里引用elementUI作者的话(我们来介绍如何在 vue-cli 的基础上进行改造，加入 svg-sprite-loader。
我们发现vue-cli默认情况下会使用 url-loader 对svg进行处理，会将它放在/img 目录下，所以这时候我们引入svg-sprite-loader 会引发一些冲突。)
最合理的做法是使用 webpack 的 exclude 和 include ，让svg-sprite-loader只处理你指定文件夹下面的 svg，url-loaer只处理除此文件夹之外的所以 svg，这样就完美解决了之前冲突的问题。 代码如下
这里做完之后就能完整显示了。
对于第二种情况
二、 项目里没有引用，
这时需要在
文件中添加如下配置代码：
原文地址：http://www.cnblogs.com/sgdkg/p/16814296.html
