uniapp引入自定义图标库 --- 阿里巴巴矢量图标库iconfont

一、前言

---

  引入字体库图标iconfont可以提高开发效率和项目的可维护性。阿里巴巴矢量图标库iconfont无疑是最佳的选择之一，今天就介绍下在uniapp中如何优雅的引入。

二、引用步骤

1. 注册登录

• 在官网注册登录

2. 创建项目

• 顶部操作栏的 资源管理 -> 我的项目 -> 新建项目
  

3. 搜索图标，添加入库

• 搜索图标，添加入库，选中的图标会在右上角的购物车图标上标识选中的个数
  

4. 选中图标添加进项目

• 点击右上角购物车图标，将选中图标添加进项目
  

5. 复制生成的CSS代码

• 确定添加项目，会自动进入该项目
• 点击红色字体暂无代码，点击生成
• 生成代码后会有个css的链接，点击该链接，会在新窗口打开
  

6. 全选复制到uniapp项目中

7. 注意点

• 网络路径必须加协议头https。具体可参考uniapp-字体图标
• 单位改为rpx
  

8. 引用并使用

• 在App.vue中引用

<style lang="scss">
	@import "@styles/iconfont.scss";
</style>

• 在文件中使用。iconfont className

<text class="iconfont iconrenshu"></text>

参考资料

• 一次性搞定 Iconfont
• 阿里icontfont功能介绍
• uniapp-字体图标