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

一、前言


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

二、引用步骤

1. 注册登录
  • 在官网注册登录
2. 创建项目
  • 顶部操作栏的 资源管理 -> 我的项目 -> 新建项目
    uniapp引入自定义图标库 --- 阿里巴巴矢量图标库iconfont_第1张图片
3. 搜索图标,添加入库
  • 搜索图标,添加入库,选中的图标会在右上角的购物车图标上标识选中的个数
    uniapp引入自定义图标库 --- 阿里巴巴矢量图标库iconfont_第2张图片
4. 选中图标添加进项目
  • 点击右上角购物车图标,将选中图标添加进项目
    uniapp引入自定义图标库 --- 阿里巴巴矢量图标库iconfont_第3张图片
5. 复制生成的CSS代码
  • 确定添加项目,会自动进入该项目
  • 点击红色字体暂无代码,点击生成
  • 生成代码后会有个css的链接,点击该链接,会在新窗口打开
    uniapp引入自定义图标库 --- 阿里巴巴矢量图标库iconfont_第4张图片
6. 全选复制到uniapp项目中

uniapp引入自定义图标库 --- 阿里巴巴矢量图标库iconfont_第5张图片

7. 注意点
  • 网络路径必须加协议头https。具体可参考uniapp-字体图标
  • 单位改为rpx
    uniapp引入自定义图标库 --- 阿里巴巴矢量图标库iconfont_第6张图片
8. 引用并使用
  • App.vue中引用

  • 在文件中使用。iconfont className

参考资料

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

你可能感兴趣的:(前端,vue,uni-app,图标设计,icons,vue.js)