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

正片之前先推广下阿里的Iconfont，图库丰富，支持个性化定制，只需添加需要的图标，创建项目下载到本地，放在项目文件目录下即可，推荐大家使用。

iconfont 的三种使用方式

1. Unicode

• 个人习惯在src目录下新建一个icon文件夹存放下载的样式文件
• 然后在src目录下新建style.css文件统一管理样式

@font-face {
  font-family: "iconfont";
  src: url('./icon/iconfont.eot'); /* IE9*/
  src: url('./icon/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('./icon/iconfont.woff') format('woff'), /* chrome, firefox */
  url('./icon/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('./icon/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
 font-family:"iconfont" !important;
 font-size:56px;
 color: red;
 font-style:normal;
 -webkit-font-smoothing: antialiased;
 -webkit-text-stroke-width: 0.2px;
 -moz-osx-font-smoothing: grayscale;
}
复制代码

• 在 main.js 中引入style.css

import './style.css'
复制代码

• 现在即可挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#xe627;</i>
复制代码

2. Font-class

使用方式与使用unicode相似，只需修改下style.css文件

• 修改 style.css文件（同样别忘了main.js文件中引入）

@import './icon/iconfont.css'
复制代码

• 即可用font-class的方式在页面使用图标

<i class="iconfont icon-fenxiang"></i>
复制代码

3. 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组件

• 组件模板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>

复制代码

• 全局引入

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

• 现在就可以优雅的在项目中使用图标啦，快去试试吧~

<icon-svg icon-class="fenxiang" />
复制代码