更新记录
1.0.0(2023-05-19)
完成基本功能
平台兼容性
HbuilderX/cli最低兼容版本 |
3.8.2 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
快速使用的图标库
从vant搬运过来的图标,个人觉得它比uni-icons更易于移动端使用,支持nvue和显示徽标
为什么要开发这个图标库,不直接使用vant或其他UI框架的图标呢?
首先vant并不支持在uni-app直接使用,其次当你想使用图标的时候可以单独直接应用这个图标库组件,
而不需要把UI库都引入进来
使用示例
<wei-icon name="chat-o"></wei-icon>
<wei-icon name="chat-o" :badge="9"></wei-icon>
图标name名称可以直接参考vant
属性说明
属性名 |
类型 |
默认值 |
说明 |
name |
String |
null |
图标名称或图片链接 |
color |
String |
#323233 |
图标颜色 ,16进制 |
size |
String-Number |
32 |
图标大小,如 20px 40rpx,默认单位为 px |
classPrefix |
String |
|
类名前缀,用于使用自定义图标 |
dot |
Boolean |
false |
是否显示图标右上角小红点 |
badge |
String-Number |
|
图标右上角徽标的内容 |
badgePosition |
String |
top-right |
徽标位置 默认 top-right,支持top-right,top-left,bottom-left,bottom-right |
badgeMax |
String |
|
最大值,超过最大值会显示 {max}+,仅当 badge 为数字时有效 |
badgeShowZero |
String |
|
当 badge 为数字 0 或字符串 '0' 时,是否展示徽标 默认 true |
badgeOffset |
String |
|
设置徽标的偏移量,数组的两项分别对应水平向右和垂直向下方向的偏移量,默认单位为 px |
badgeColor |
String |
#ee0a24 |
徽标背景颜色 |
如果觉得解决了你的图标使用问题,方便给个小小的star吗。github