vue使用svg图

1，安装svg-sprite-loader

npm install svg-sprite-loader --save-dev

2，进行webpack配置，在webpack.base.conf.js的rules数组内添加如下：

 3，在src文件夹下新建icons文件夹，并在icons文件夹新建index.js

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'

Vue.component('svg-icon', SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context('./svg', true, /\.svg$/);
requireAll(req);    

4，新建components/SvgIcon.vue组件

<template>
    <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName" />
    </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: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

 5，之后在mian.js里面添加

import './icons' 

然后就可以在想用图标的组件内用了