Icon 图标
优质
小牛编辑
130浏览
2023-12-01
Icon 图标 平台差异说明
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ |
基本使用
提示
如果您觉得内置的图标数量不够，或者不合符您的需求，别担心，我们还精心为您准备了一份简单易用的扩展自定义图标库教程：扩展自定义图标库
通过<u-icon>形式来调用，设置name参数为图标名即可
<u-icon name="photo"></u-icon>
修改图标的样式
- 通过
color参数修改图标的颜色 - 通过
size参数修改图标的大小，单位为rpx
<u-icon name="photo" color="#2979ff" size="28"></u-icon>
图片图标 1.3.0
这里说的图片图标，指的是小图标，起作用定位为"icon"图标作用，而非大尺寸的图片展示场景，理论上，这个小图标应该为png格式的正方形图标。
上面说到，给组件的name参数传入一个图片的名称即可显示字体图标，这些名称中不能带有/斜杠符号，否则会被认为是传入了图片图标，同时，size参数 也被设置为这个图片图标的宽度，由于是图片，诸如颜色color等参数都会失效。
<u-icon label="uView" size="40" name="https://www.xnip.cn/wp-content/uploads/2021/docimg5/button.png"></u-icon>
API
Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| name | 图标名称，见示例图标集，如名称带有/，会被认为是图片图标 | String | - | - |
| color | 图标颜色 | String | inherit | - |
| size | 图标字体大小，单位rpx | String | Number | inherit | - |
| index | 一个用于区分多个图标的值，点击图标时通过click事件传出 | String | - | - |
| hover-class | 图标按下去的样式类，用法同uni的view组件的hover-class参数，详见：hover-class | String | - | - |
| label | 图标右侧/下方的label文字 | String | - | - |
| label-size | label字体大小，单位rpx | String | Number | 28 | - |
| label-color | label字体颜色 | String | #606266 | - |
| custom-prefix | 自定义字体图标库时，需要写上此值，详见：扩展自定义图标库 | String | uicon | - |
| margin-left | label在右方时与图标的距离，单位rpx | String | Number | 6 | - |
| margin-top | label在下方时与图标的距离，单位rpx | String | Number | 6 | - |
| margin-bottom 1.4.1 | label在上方时与图标的距离，单位rpx | String | Number | 6 | - |
| margin-right 1.4.1 | label在左侧时与图标的距离，单位rpx | String | Number | 6 | - |
| label-pos | label相对于图标的位置(left和top为1.4.1新增) | String | right | bottom / top / left |
| custom-style 1.3.0 | 图标的样式，可以设置字体大小，颜色等，对象形式，size和color优先级高于此参数 | Object | - | - |
| width 1.5.6 | name为图片路径时图片的宽度，单位任意，数值默认为rpx单位 | String | Number | - | - |
| height 1.5.6 | name为图片路径时图片的高度，单位任意，数值默认为rpx单位 | String | Number | - | - |
| top 1.5.6 | 如果某些场景，如果图标没有垂直居中，可以调整此参数，单位任意，数值默认为rpx单位 | String | Number | 0 | - |
| show-decimal-icon 1.7.2 | 是否为DecimalIcon | Boolean | false | true |
| inactive-color 1.7.2 | 背景颜色，可接受主题色，仅Decimal时有效 | String | #ececec | - |
| percent 1.7.2 | 显示的百分比，仅Decimal时有效 | String | Number | 50 | - |
Events
| 事件名 | 说明 | 回调参数 | 版本 |
|---|---|---|---|
| click | 点击图标时触发 | index: 通过props传递的index值 | - |