基于阿里 iconfont 的图标解决方案

对于图标方案选型，考虑到以下几点，最终选择阿里的 iconfont 作为解决方案 。

- 用例齐全

- 方便使用

- 没有时效性

将需要使用到的图标添加入库

入库后可在个人发起的项目中看到以下内容

iconfont 提供了三种快速使用的方案：Unicode、Font Class、Symbol

Font Class

Font Class 方式是 Unicode 方式的优化，能实现更改大小、颜色改变、声明式类名，故出于快速使用的目的选择这种方式。如需要更高的要求，如JS控制、彩色图标，则需要使用 Symbol 方式。

实现原理简单理解：通过 CSS 注册本地字体的方式，将SVG文件注册成可用的字体，并封装成可用的 css 类，进行使用。

Vue 项目中使用 Font Class 类型的图标

在 Iconfont 项目中，选择 Font class 类型，并下载到本地。

可获得一个包含css、svg的包。

在 Vue-Cli 项目中，导入所有文件，并引入

例如我在assets文件夹下，添加了icon文件夹，并粘入所有文件。

在入口文件 main.js 处进行导入

require('./assets/icon/iconfont.css')

在HTML处进行使用

即是 fontawasome 的使用效果。

MORE

有以下问题值得深入

- 该 icon 库是否存在版权问题

- Symbol 类型有哪些更大的操作空间

- 如何实现图标动画的效果（如旋转，渐变）

​

参考：

http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code