使用Iconfont制作字体图标库并引入到Element项目中

1 引子

1.1 图标的重要性

图标用来描述某种具体的功能，能够使用户更轻松的理解信息、获取信息。

好的图标设计易于被发现、易于被理解，且具有美感与吸引力，能够丰富用户体验。

1.2 字体图标的好处

字体图标是一种特殊的字体，以图像的形式展现给用户。

使用字体图标的好处有：

• 相较于图片，字体图标体积小，加载速度快；
• 字体图标可以像文字一样，通过CSS样式单来设置其大小与颜色；
• 字体图标本质上是矢量图像，因此在伸缩的过程中不会失真变形。

1.3 课题引出

我们常用的UI框架，如 Element、Ant Design、Bootstrap 等等，它们都会提供独有的字体图标库。这些由UI框架提供的字体图标库已经很丰富了，但我们在项目中总会遇到个别的图标需求无法被满足，此时我们就会想要扩展现有的字体图标库。

本文主要讲解如何使用阿里的Iconfont平台，制作自己的字体图标库，并在以Element为UI组件的项目中集成使用。

2 使用Iconfont制作自己的字体图标库

2.1 阿里的Iconfont平台

Iconfont 是由负责阿里巴巴商业产品的营销研究及用户体验设计的前端开发团队 阿里妈妈MUX 打造的矢量图标管理、交流平台。

设计师可以将图标上传到Iconfont平台；用户则可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

借助Iconfont平台，我们可以从其提供的海量图标中搜索到所需的图标，并可以在线完成图标的管理、字体图标库的制作与下载等。

Iconfont平台地址：www.iconfont.cn/home/index ，使用前需要先完成注册与登录。

2.2 新建项目

图标的扩展是一个持续性的任务，因此我们应该在Iconfont平台上创建专门的项目，使扩展图标的任务可持续维护、管理。

通过【资源管理】 - 【我的项目】进入项目管理页面：

点击【新建项目】按钮：

这里主要是维护一个“项目名称”，对于“FontClass/Symbol前缀”、“Font Family”、“字体格式”三个字段使用默认值就好（需要注意的是，“FontClass/Symbol前缀”和“Font Family”，如果进行修改，不要与现有UI框架所提供的图标class冲突，比如Element的“el-icon-”）。

2.3 添加图标到“购物车”

在【图标库】页面检索图标（检索条件支持中文、英文与拼音），然后对需要的图标做【添加入库】操作，再点击右上角类似“购物车”一样的按钮，可以查看到已入库的图标：

2.4 “购物车”中图标添加至项目

在“购物车”界面中，我们可以通过【添加至项目】按钮，直接将“购物车”中的图标添加到指定的项目中去。

注意： 通过这种方式所添加的图标，是无法修改图标的名称的。

2.5 如何修改图标名称？

从程序使用的角度来讲，图标名称一点用都没有，但从对图标的管理角度出发，我们可能还是希望能够修改图标名称，此时我们需要换一种操作方式来向项目中添加图标，需要 “先下载，再上传，再修改名称，最后添加至项目” 。

特别注意：
下面要介绍的“先下载，后上传”的方式，仅仅是为了修改图标名称便于个人的管理，我们一定要尊重原创、尊重版权，上传图标后，图标的所有者就变成了自己，此时我们应该将图标设置为 “私有图标”，勿以作者的身份进行传播非原创图标！！！

在“购物车”界面中，我们点击【下载素材】按钮，选择“SVG”格式：

得到SVG源文件后，在【资源管理】- 【我的图标】页面，点击【上传Icon】按钮：

在上传页面，选择【图标】页，并将本地的SVG源文件拖拽到上传区域：

上传后便可以更改图标的名称了，修改完成后点击【保留颜色并提交】按钮，将图标放入“我上传的图标”库中：

特别注意： 上传的图标默认是“开放”的，请将非原创图标，批量设置为“私有图标”：

在【我上传的图标】界面中，可以通过【编辑】按钮再次修改图标名称（只有此处能修改图标名称，图标在添加到项目中后，在项目管理页面是无法修改图标名称的）。【添加入库】按钮可以将图标放入“购物车”，后续添加到项目的操作同“2.4小节”。

2.6 修改 font class

进入项目页面，点击图标上的【编辑】按钮，就可以对图标的“Font Class / Symbol”进行修改，这个值后续会应用在程序中的class样式类上，因此要注意命名规范：

2.7 下载字体图标库

在项目页面，点击【下载至本地】按钮，我们就会得到一个压缩包，这个压缩包中的内容就是我们扩展的字体图标库了：

双击运行“demo_index.html”文件，可以预览字体图标库，还可以看到所提供的三种引入程序的方式：

这里推荐 “Font class” 方式，与“Unicode”方式相比语义明确，与“Symbol”方式比性能好。

3 在Element项目中使用Iconfont

在项目工程的src/assets目录下创建iconfont文件夹，将下载到的字体图标库相关的文件都拷贝到这个文件夹下，然后在入口js文件中导入样式文件：

import '@/assets/iconfont/iconfont.css'

接下来就可以在vue文件中引入字体图标了，这些字体图标可以通过样式改变颜色与大小：

<!-- Element默认的字体图标库 -->
<div>
  <i class="el-icon-edit"></i>
  <i class="el-icon-delete"></i>
  <el-button type="primary" icon="el-icon-search">搜索</el-button>
</div>

<!-- 扩展的Iconfont字体图标库 -->
<div>
  <i class="iconfont icon-plugin"></i>
  <i class="iconfont icon-code"></i>
  <i class="iconfont icon-plugin" style="color: red; font-size: 28px;"></i>
  <i class="iconfont icon-code" style="color: red; font-size: 28px;"></i>
  <el-button type="primary" icon="iconfont icon-contract-approve">审核通过</el-button>
</div>

如果需要继续扩展字体图标库，可以使用Iconfont平台上原有的项目继续添加图标，然后重新下载字体图标库，将新下载的文件完全替换工程中原有的文件即可。