Vue将iconfont封装成全局组件，自定义类名

SvgIcon.vue

<template>
  <svg @click="iconEvent" class="icon" :class="classObject" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>
<script>
export default ({
  props: ['name', 'classObject'],
  //提供自定义类名
  computed: {
    iconName () {
      return '#icon-' + this.name
    }
  },
  methods: {
    iconEvent () {
      this.$emit("iconClick")
    }
  }
})
</script>

在main.js注册成全局组件

import svgIcon from '@/components/SvgIcon'
Vue.component('svgicon', svgIcon)

在页面调用svgicon组件

<svgicon name="warning_icon" classObject="count-fz-img" @iconClick="iconClick"></svgicon>
//name是上传图标到iconfont，复制过来的