vue中通过svg方法导入icon图标

以阿里图片库为例

1）选择喜欢的icon图标添加入库，并将其添加至项目中

2）在资源管理中找到项目管理，将项目下载到本地

下载下来的项目包含以下项目，其中我们只需要用到iconfont.js

3）将iconfont.js拷贝到自己的vue项目里，并在main.js中导入

// 在main.js中
import '@/utils/iconfont.js'

注意，如果项目有使用eslint，请记得在根目录下创建一个.eslintignore文件，并将iconfont.js文件的路径添加进去。这样eslint就会忽略iconfont.js文件，而不会因为iconfont.js的格式问题而报错

4） 封装一个vue组件，通过组件的方式来使用icon图标

创建SvgIcon.vue，通过iconName去iconfont.js中找到对应的icon图标

<template>
<i class="sketch-icon">
  <svg class="icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</i>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    name: {
      type: String,
      required: true
    }
  },
  computed: {
    iconName () {
      return `#${this.name}`
    }
  }
}
</script>

想导入icon图标时只需要使用该组件，并传入该icon图标对应的名称即可 <svg-icon name='icon-riqi'></svg-icon>