Skip to main content
Version: 3.x

Icon

Icon. The unit of length of the component's properties is px by default.

Reference

Type

ComponentType<IconProps>

Examples

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

PropertyTypeDefaultRequiredDescription
type"success" | "success_no_circle" | "info" | "warn" | "waiting" | "cancel" | "download" | "search" | "clear"YesThe type of the icon.
sizestring23NoThe size of the icon.
colorstringYesThe color of the icon. It is the same as the color of the css.

Property Support

PropertyWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramByteDance Micro-AppH5React Native
IconProps.type✔️✔️✔️✔️✔️✔️
IconProps.size✔️✔️✔️✔️✔️✔️
IconProps.color✔️✔️✔️✔️✔️✔️

TIconType

Valid values of type

valuedescription
successsuccess icon
success_no_circlesuccess icon(no circle)
infoinfo icon
warnwarn icon
waitingwaiting icon
cancelcancel icon
downloaddownload icon
searchsearch icon
clearclear icon

API Support

APIWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramByteDance Micro-AppH5React Native
Icon✔️✔️✔️✔️✔️✔️