IconGallery
Watch a video tutorial
IconGallery
块使你能够轻松地记录与你的项目相关的 React 图标组件,并以整齐的网格显示。
¥The IconGallery
block enables you to easily document React icon components associated with your project, displayed in a neat grid.
{/* Iconography.mdx */}
import { Meta, Title, IconGallery, IconItem } from '@storybook/blocks';
import { Icon as IconExample } from './Icon';
<Meta title="Iconography" />
# Iconography
<IconGallery>
<IconItem name="mobile">
<IconExample name="mobile" />
</IconItem>
<IconItem name="user">
<IconExample name="user" />
</IconItem>
<IconItem name="browser">
<IconExample name="browser" />
</IconItem>
<IconItem name="component">
<IconExample name="component" />
</IconItem>
<IconItem name="calendar">
<IconExample name="calendar" />
</IconItem>
<IconItem name="paintbrush">
<IconExample name="paintbrush" />
</IconItem>
<IconItem name="add">
<IconExample name="add" />
</IconItem>
<IconItem name="subtract">
<IconExample name="subtract" />
</IconItem>
<IconItem name="document">
<IconExample name="document" />
</IconItem>
<IconItem name="graphline">
<IconExample name="graphline" />
</IconItem>
</IconGallery>
IconGallery
import { IconGallery } from '@storybook/blocks';
IconGallery
配置了以下属性:
¥IconGallery
is configured with the following props:
children
类型:React.ReactNode
¥Type: React.ReactNode
IconGallery
只需要 IconItem
子项。
¥IconGallery
expects only IconItem
children.
IconItem
import { IconItem } from '@storybook/blocks';
IconItem
配置了以下属性:
¥IconItem
is configured with the following props:
name
(必需)
¥(Required)
类型:string
¥Type: string
设置图标的名称。
¥Sets the name of the icon.
children
类型:React.ReactNode
¥Type: React.ReactNode
提供要显示的图标。
¥Provides the icon to be displayed.