Icon

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

Reference

Type

ComponentType<IconProps>

Examples

React

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>
    )
  }
}

Vue

<template>
  <view class="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>
</template>

IconProps

Property	Type	Default	Required	Description
type	"success" | "success_no_circle" | "info" | "warn" | "waiting" | "cancel" | "download" | "search" | "clear"		Yes	The type of the icon.
size	string	23	No	The size of the icon.
color	string		Yes	The color of the icon. It is the same as the color of the css.

Property Support

Property	WeChat Mini-Program	Baidu Smart-Program	Alipay Mini-Program	ByteDance Micro-App	H5	React Native
IconProps.type	✔️	✔️	✔️	✔️	✔️	✔️
IconProps.size	✔️	✔️	✔️	✔️	✔️	✔️
IconProps.color	✔️	✔️	✔️	✔️	✔️	✔️

TIconType

Valid values of type

value	description
success	success icon
success_no_circle	success icon(no circle)
info	info icon
warn	warn icon
waiting	waiting icon
cancel	cancel icon
download	download icon
search	search icon
clear	clear icon

API Support

API	WeChat Mini-Program	Baidu Smart-Program	Alipay Mini-Program	ByteDance Micro-App	H5	React Native
Icon	✔️	✔️	✔️	✔️	✔️	✔️