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

项目场景：

提示：这里简述项目相关背景：

我们使用框架搭建项目的时候会同时使用一个相适配的组件库，就拿Vue框架来说，适配的组件库有Element Plus、Ant Design Vue、Bootstrap Vue等等组件库，但是这些组件库中的字体图标有时会不能满足我们项目的需求，所以我们需要一个强大的能够专门提供字体图标的库——阿里巴巴矢量图标库，这里我提供两种方式在Vue项目中使用：

---

1:在线使用

首先我们需要找到阿里巴巴矢量库官网

iconfont-阿里巴巴矢量图标库

1:在这里可以搜索我们需要使用的字体图标

2:点击购物车添加进入库

3:添加至项目

1:如果没有项目-新建

点击添加至项目过后会弹出添加到那个项目中，如果没有项目可以新建项目

2:如果有项目

添加过后我们需要点击上面导航栏的购物车，右边会显示出我们所添加的字体图标，字体图标是可以添加多个的，然后点击添加至项目

4：查看在线链接

进入项目之后，点击Font class并且点击查看在线链接

5：生成链接

点击这里的暂无代码，点此生成，弹出框点击确认，它会成一串…….css的东西，点击复制

 

 

6:在html文件引入

复制成功过后进入我们的项目，找到项目中的index.html文件，将

<link href="//at.alicdn.com/t/c/font_4765440_7yidasmcdjm.css" rel="stylesheet" type="text/css" />

在head中引入

 ​​​​​​​

7:复制自己的图标代码  

回到阿里巴巴矢量图标库，复制自己的图标代码 

8:使用

复制成功过后，回到项目找到我们需要使用字体图标的地方，粘贴图标代码

9：继续添加

 

10:效果图

---

2:下载到本地使用

提示：

回到之前的我的项目页面，找不到的可以点击导航栏上面的资源管理下面的我的项目

 然后选择Font class，点击下载至本地，

 在项目的src下新建一个文件夹font-icons,将下载的压缩包解压到这个新建的font-icons文件夹下面

 然后我们找到font-icons文件夹下面的iconfont.css文件，并在项目的main.js文件中引入

 使用

---

解决方案：

提示：这里填写该问题的具体解决方案：

例如：新建一个 Message 对象，并将读取到的数据存入 Message，然后 mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();换成 mHandler.sendMessage()。