跳到主要内容
版本:3.x

Icon

图标。组件属性的长度单位默认为 px

支持情况:

参考文档

类型

ComponentType<IconProps>

示例代码

export default class PageView extends Component {
constructor() {
super(...arguments)
}

render() {
return (
<View className='components-page'>
<Icon size='60' type='success' />
<Icon size='60' type='info' />
<Icon size='60' type='warn' color='#ccc' />
<Icon size='60' type='warn' />
<Icon size='60' type='waiting' />
<Icon size='20' type='success_no_circle' />
<Icon size='20' type='warn' />
<Icon size='20' type='success' />
<Icon size='20' type='download' />
<Icon size='20' type='clear' color='red' />
<Icon size='20' type='search' />
</View>
)
}
}

IconProps

参数类型默认值必填说明
typekeyof TIconTypeicon 的类型
sizestring23icon 的大小,单位px
colorstringicon 的颜色,同 css 的 color
ariaLabelstring无障碍访问,(属性)元素的额外描述

API 支持度

API微信小程序百度小程序支付宝小程序抖音小程序QQ 小程序京东小程序H5React NativeHarmony
IconProps.type✔️✔️✔️✔️✔️✔️✔️✔️
IconProps.size✔️✔️✔️✔️✔️✔️✔️✔️
IconProps.color✔️✔️✔️✔️✔️✔️✔️✔️
IconProps.ariaLabel✔️

TIconType

icon 的类型

参数说明
success成功图标
success_no_circle成功图标(不带外圈)
info信息图标
warn警告图标
waiting等待图标
cancel取消图标
download下载图标
search搜索图标
clear清除图标
circle圆环图标(多选控件图标未选择)「微信文档未标注属性」
info_circle带圆环的信息图标「微信文档未标注属性」