svg组件

在main.js中引入

import './icons'

在components的SvgIcon文件，在此文件夹中写svg组件

svg组件

<template>
  <svg :icon-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>

icons文件里面存放svg图标代码 ，index.js为批量引入svg图标代码方法