块编辑器开发文档

💡 云策文档标注

概述

Icon 组件用于渲染原始图标,不包含初始样式或包装器。它支持多种图标类型,包括来自 @wordpress/icons 包的图标、组件实例、函数和 Dashicons。

关键要点

  • Icon 组件渲染图标时不添加额外样式,适合自定义集成。
  • 支持多种图标源:@wordpress/icons 包、组件、函数、Dashicons 字符串和 null。
  • size 属性控制图标尺寸,默认值根据图标类型自动设置。

代码示例

import { wordpress } from '@wordpress/icons';

<Icon icon={ wordpress } />

注意事项

  • icon 属性非必需,默认值为 null,但建议使用 @wordpress/icons 包中的图标。
  • size 属性默认值:当 icon 为字符串(如 Dashicon id)时是 20,否则为 24。
  • 其他属性会传递给图标组件,便于扩展功能。

📄 原文内容

See the WordPress Storybook for more detailed, interactive documentation.

Renders a raw icon without any initial styling or wrappers.

import { wordpress } from '@wordpress/icons';

<Icon icon={ wordpress } />

Props

icon

  • Type: IconType | null
  • Required: No
  • Default: null

The icon to render. In most cases, you should use an icon from
the @wordpress/icons package.

Other supported values are: component instances, functions,
Dashicons
(specified as strings), and null.

The size value, as well as any other additional props, will be passed through.

size

  • Type: number
  • Required: No
  • Default: 'string' === typeof icon ? 20 : 24

The size (width and height) of the icon.

Defaults to 20 when icon is a string (i.e. a Dashicon id), otherwise 24.