发帖
7 0 0

爱星物联字体图标

木缘
高级会员

21

主题

0

回帖

626

积分

高级会员

积分
626
爱星物联IoT云平台 1163 7 2024-6-3 14:04:58
本帖最后由 木缘 于 2024-6-3 14:04 编辑

爱星物联字体图标
爱星物联APP、控制面板中使用了大量字体图标。字体图标具有可伸缩性、轻量级、易于使用、兼容性、可定制性、易于更新和维护、跨平台一致性等优点。爱星物联字体图标的使用是基于阿里云矢量图标库完成的。阿里云矢量图标库:

1. 字体图标使用场景
图片1.png     图片2.png     图片3.png
我们可以发现爱星物联中使用了大量字体图标,底部tabbar,首页开关、组件icon、界面图标等,可根据界面设计调整图标大小、修改图标颜色、快速切换图标状态等操作。

2. 字体图标使用流程
1)从蓝湖或设计师提供字体图标svg文件,上传至阿里字体图标库项目中
图片4.png
2)下载并替换项目中的字体图标库
图片5.png
图片6.png
3)基于框架提供的BaseIcon组件显示自体图标
<base-icon icon="icon-kaiji" color="#bababa" size="22" />
图片7.png

3. 字体图标组件使用说明
1) main.js中引入字体图标
图片8.png
2)字体图标组件说明
图片9.png

──── 0人觉得很赞 ────

使用道具 举报

2024-6-3 14:29:34
2024-6-3 14:50:39
2024-6-3 14:54:24
2024-6-3 15:52:28
赞赞赞
2024-6-3 22:53:31
2024-6-4 09:26:45
赞~
2024-6-4 12:53:36
跟着大佬学习
您需要登录后才可以回帖 立即登录
高级模式
返回
统计信息
  • 会员数: 28483 个
  • 话题数: 40599 篇