First, login to Aliyun Vector Icon Library and add the font icon to your project.

Two, Ali cloud icon four ways (recommended third ways to introduce, if you do not consider the network problem can be introduced online)
After entering the project, you will see that Aliyun can choose three ways to import the icon, select the icon and click to download it locally.
Download to the local area. After decompression, the list of folders is as follows:

Select the iconfont.js file
Create the following directories and files in the project

iconfont.js is the file copied in the above directory
index.js is as follows

/**
 * Font icon, uniform use of SVG Sprite vector icon (http://www.iconfont.cn/)
 *
 * Use:
 *  1. Create a project at the Ali Vector Icon Station and add icons (this step is not necessary, create easy project icon management)
 *  2-1. Add icon, select the new icon, copy code - > Download - > SVG download - > paste code (rename)
 *  2-2. Add icons, Download Icon Library corresponding to [iconfont.js] file, replace project [. / iconfont.js] file
 *  3. Use [<icon-svg name= "canyin"> </icon-svg> in component template]
 *
 * Be careful:
 *  1. By adding icons in 2-2, the getNameList method cannot return the corresponding data
 */
import Vue from 'vue'
import IconSvg from '@/components/icon-svg'
import './iconfont.js'

Vue.component('IconSvg', IconSvg)

const svgFiles = require.context('./svg', true, /\.svg$/)
const iconList = svgFiles.keys().map(item => svgFiles(item))

export default {
  // Get a list of icon-(*).svg names, such as [shouye, xitong, zhedie,...]
  getNameList () {
    return iconList.map(item => item.default.id.split('-')[1])
  }
}

Import IconSvg from'@/components/icon-svg'is an imported icon encapsulation component

<template>
  <svg
    :class="getClassName"
    :width="width"
    :height="height"
    aria-hidden="true">
    <use :xlink:href="getName"></use>
  </svg>
</template>

<script>
  export default {
    name: 'icon-svg',
    props: {
      name: {
        type: String,
        required: true
      },
      className: {
        type: String
      },
      width: {
        type: String
      },
      height: {
        type: String
      }
    },
    computed: {
      getName () {
        return `#icon-${this.name}`
      },
      getClassName () {
        return [
          'icon-svg',
          `icon-svg__${this.name}`,
          this.className && /\S/.test(this.className) ? `${this.className}` : ''
        ]
      }
    }
  }
</script>

<style>
  .icon-svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    overflow: hidden;
  }
</style>

Finally, just refer to main.js

import "./icons" // api: http://www.iconfont.cn/

Reference method:

<icon-svg name="zhedie"></icon-svg>
<icon-svg name="shezhi" class="el-icon-setting"></icon-svg>

Okay, that's it!!!