antd、taro引入阿里图标库

一、 antd引入阿里图标库

说明:公司项目用的都是阿里图标库的图标,为方便前端使用与设计稿相同的图标,特写此文档。

* 图标引入由设计师和前端协同完成

1.设计师在使用阿里图标库的时候顺手将图标加入到项目中

 

2.添加开发人员 

 

3.开发人员点击下载至本地将下载的压缩包的iconfont.js文件添加到项目中的utils中

 

4.在需要使用图标的页面中引入并使用

 

 

 

注意: 设计师在更换图标或者添加新的图标到项目中时记得通知开发人员拷贝新的代码下来替换之前的代码

 

(这样就不用设计师找一遍图标前端也找一遍图标,最后用的还是两个不同的图标啦。)

 

二、 taro引入阿里图标库(目前小程序不支持多色图标,需要另外引入)

 

1,2步设计师的操作同上

3. 在src目录下创建fonts文件夹,将下载至本地的以下几个文件复制到fonts中

 

 

4. 在app.jsx中引入iconfont.css

 

 
5. 在需要的页面下使用
 
 
6. 标签的className 是 ''iconfont  项目中的名称''
 
 
注意:如上图中的表情包图标是多色图标,需要另外引入
posted @ 2021-03-02 18:01  似是故人来~  阅读(566)  评论(0编辑  收藏  举报