1.使用unicode方式

1.1 在iconfont网站中，把图标添加到自己的项目。并生成代码。

1.2 粘贴代码到项目中，并给图标起类名，在before中添加图标unicode码

1.3 在App.vue中引入图标样式

2.使用symbol方式（可以使用彩色图标）

2.1 把链接粘贴到public/index.html

<script src="//at.alicdn.com/t/c/font_4315257_f2ulujhla4xxxxx.js"></script>

2.2 封装svg组件（稍微改了下rouyi的）

<template>
  <div class="inline-block">
      <div class="flex items-center">
        <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
          <use :xlink:href="iconName"/>
        </svg>
        <span :class="slotClass">
          <slot></slot>
        </span>
      </div>
  </div>
</template>

<script>
export default {
  name: 'SvgIconCustom',
  props: {
    slotClass: {
      type: String,
      default: 'pl-5'
    },
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName() {
      return `#${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>

2.3 注册全局组件

// main.js
// 自定义iconfont用svg组件
import SvgIconFont from '@/components/SvgIcon/SvgIconFont.vue'
Vue.component('SvgIconFont', SvgIconFont)

2.4 页面中使用(我用了tailwindcss)

2.4.1 如果需要更改图标颜色，需要批量去色

之前封装组件用了slot，需要添加文字就直接放在svg-icon-font标签内

<svg-icon-font icon-class="icon-logout" class-name="">
  退出登录
</svg-icon-font>

2.4.2 给类名修改颜色就能更改图标颜色

<svg-icon-font
  class="cursor-pointer cursor-not-allowed pr-10"
  icon-class="icon-logout"
  class-name="text-gray-400"
/>