第1种：通过vue-svgicon插件。

进入iconfont官网，选中图片-》“复制SVG代码（或直接下载svg文件）”-》在项目的icons/svg文件夹中新增xxx.svg文件（如no-data.svg），将之前复制的svg代码直接粘贴-》运行"npm run svg"命令，系统自动生成对应的xxx.ts声明文件-》在页面中通过svgicon组件（name = "xxx"）使用即可。

// main.ts
import SvgIcon from 'vue-svgicon'
Vue.use(SvgIcon, {
  tagName: 'svg-icon',
  defaultWidth: '1em',
  defaultHeight: '1em'
})

// test.vue
<svg-icon name="no-data" width="200" height="200" color="#C0C4CC"/>

第2种：直接使用svg图标。

进入iconfont官网-》选择图片-》设置样式后，点击复制svg代码-》在src下的svg目录中新建xxx.svg文件，并将复制的代码粘贴进去-》页面中使用svg-icon标签，修改icon-class属性值即可。

 <!-- 修改icon-class的属性值为新建的svg的文件名即可 -->
<svg-icon icon-class="round-star" class="sort-icon" />

iconfont官网：iconfont-阿里巴巴矢量图标库