Icon - 《Taro 文档帮助手册教程》

sidebar_label: Icon
Type
Examples
IconProps
- Property Support
- TIconType
API Support

title: Icon

sidebar_label: Icon

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

Reference

Type

ComponentType<IconProps>

Examples

import Tabs from ‘@theme/Tabs’; import TabItem from ‘@theme/TabItem’;

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

html
<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	✔️	✔️	✔️	✔️	✔️	✔️