爱星物联字体图标

[复制链接]
查看954 | 回复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

回复

使用道具 举报

1084504793 | 2024-6-3 14:29:34 | 显示全部楼层
回复

使用道具 举报

WT_0213 | 2024-6-3 14:50:39 | 显示全部楼层
回复

使用道具 举报

bzhou830 | 2024-6-3 14:54:24 | 显示全部楼层
选择去发光,而不是被照亮
回复

使用道具 举报

hrqwe | 2024-6-3 15:52:28 | 显示全部楼层
赞赞赞
日拱一卒,功不唐捐
回复

使用道具 举报

iiv | 2024-6-3 22:53:31 | 显示全部楼层
回复

使用道具 举报

qhsj | 2024-6-4 09:26:45 | 显示全部楼层
赞~
回复

使用道具 举报

lazy | 2024-6-4 12:53:36 | 显示全部楼层
跟着大佬学习
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则