如何在Vue项目中使用阿里的Iconfont

[yangkaiyangyi]

Symbol
区别于unicode与font-class，使用symbol需要引入的是js文件，此方法生成的图标可以不用发送woff|eot|ttf|这些很多个字体库请求了，兼具前两种方法的优点，是正真的矢量图标，推荐使用。
下载阿里巴巴图标库
在main.js中引入图标js文件
import './icon/iconfont.js'
在style.css文件中写入图标样式（同样别忘了main.js文件中引入）

.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

即可用symbol的方式在页面使用图标

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-fenxiang"></use>
</svg>

封装Icon组件
1.组件模板icon-svg.vue

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

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

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

2.全局引入

import IconSvg from '@/components/icon-svg'
//全局注册icon-svg
Vue.component('icon-svg', IconSvg)

3.在项目中使用图标
<icon-svg icon-class="fenxiang" />