矢量库图标使用

如何在项目中使用阿里巴巴矢量库图标

平常我们需要写一些菜单栏标题或者功能按钮时经常需要一些生动的图标来诠释其功能方法，
使用图标可轻松实现我们的需求，不用追着UI同学要图片，一下让我们前端挺直了腰板，哈哈。

官方地址为：阿里巴巴矢量图库

他为我们提供了丰富的图标资源库，可以根据自己的不同需求，在这里选择适合自己的图标了

下面是小编总结的一套方便快捷的使用图标代替图片的流程，欢迎大家一起学习

1.首先，使用新浪微博账号或者Git账号 登录官网

2.在搜索框搜索相关图标，将选中图表加入购物车

3.选好需要的图标之后，点击右上角的

点击下载代码，在文件src下的assets中新建文件夹icon，将压缩包解压到icon中

4.在项目中找到main.js 引入

import './assets/icon/iconfont.css'

5.解压后的文件当中，打开 demo_index.html文件，可以看到我们下载的的图标

这里有三种方法引入图标：
方法一：Unicode 引用
第一步：拷贝项目下面生成的 @font-face

@font-face {
  font-family: 'iconfont';
  src: url('../../../assets/icon/iconfont.ttf?t=1628646127852') format('truetype'); // 这里需要配置自己的路径
}

第二步：定义使用 iconfont 的样式

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#xe617;</i>

效果如图所示：

方法二：Font class 引用， 这种方法可用于数组遍历

效果图如图所示：

方法三： Symbol 引用

第一步：引入项目下面生成的 symbol 代码：

<script src="./iconfont.js"></script>

第二步：加入通用 CSS 代码（引入一次就行）：

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

第三步：挑选相应图标并获取类名，应用于页面：

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

效果图如图所示：

如果后期需要再加入其他图标，那么需要重新下载之前的所有图标，如果项目多的话可以建立专属项目，后期只需下载最新需要的图标就可以了