# Icon 图标
基于字体的图标集，可以通过 Icon 组件使用。
# 平台差异说明
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ |
# 示例
# 基础用法
通过 <pi-icon> 标签引入，设置 name 为图标名称。通过 size 属性设置图标大小。
<pi-icon name="message-copy" size="16" />
<pi-icon name="bars" size="32" />
<pi-icon name="edit-line" size="48" />
<pi-icon name="add" size="64" />
1
2
3
4
2
3
4
# 图标颜色
color 属性可以设置图标的颜色。
<pi-icon name="message-copy" color="red" size="16" />
<pi-icon name="bars" color="green" size="32" />
<pi-icon name="edit-line" color="blue" size="48" />
<pi-icon name="add" color="black" size="64" />
1
2
3
4
2
3
4
# 图标红点
某些业务要求图标右上有个红点,通过设置 dot 属性实现。
还可以通过 dotRadius 设置红点大小，以及 badge 属性设置红点里内容。
注意
badge 不可与 dot 和 dotRadius 混用， dot 优先级比 badge高。
<pi-icon name="message-copy" color="red" size="16" dot />
<pi-icon name="bars" color="green" size="32" dot dot-radius="30" />
<pi-icon name="edit-line" color="blue" size="48" badge="30" />
<pi-icon name="add" color="black" size="64" badge="99+" />
1
2
3
4
2
3
4
# API
# Icon Props
| 名称 | 描述 | 类型 | 必选 | 默认值 |
|---|---|---|---|---|
| customStyle | 自定义样式 | Object | false | - |
| customClass | 自定义样式类 | String | false | - |
| name | 图标名称或图片链接 | String | false | '' |
| dot | 是否显示图标右上角小红点 | Boolean | false | false |
| dotRadius | 小红点的半径 | String | Number | false | 16rpx |
| badge | 图标右上角徽标的内容 | String | Number | false | '' |
| color | 图标颜色 | String | false | '' |
| size | 图标字体大小，单位rpx | String | Number | false | '' |
| classPrefix | 类名前缀，用于使用自定义图标 | String | false | 'pi-icon-' |
# Icon Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| click | - | - |