IconGallery

IconGallery 块使你能够轻松地记录与你的项目相关的 React 图标组件，并以整齐的网格显示。

¥The IconGallery block enables you to easily document React icon components associated with your project, displayed in a neat grid.

Screenshot of IconGallery and IconItem blocks

记录图标

¥Documenting icons

要记录一组图标，请使用 IconGallery 块将它们显示在网格中。每个图标都包含在一个 IconItem 块中，你可以指定其属性，例如名称和图标本身。

¥To document a set of icons, use the IconGallery block to display them in a grid. Each icon is wrapped in an IconItem block, enabling you to specify its properties, such as the name and the icon itself.

Iconography.mdx

import { Meta, IconGallery, IconItem } from '@storybook/addon-docs/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>

自动图标文档

¥Automate icon documentation

如果你正在处理一个包含大量要记录的图标的项目，则可以扩展 IconGallery 块，将 IconItem 封装在循环中，然后遍历要记录的图标及其属性。例如：

¥If you're working on a project that contains a large number of icons that you want to document, you can extend the IconGallery block, wrap IconItem in a loop, and iterate over the icons you want to document, including their properties. For example:

Iconography.mdx

import { Meta, IconGallery, IconItem } from '@storybook/addon-docs/blocks';
 
import { Icon as IconExample } from './Icon';
import * as icons from './icons';
 
# Iconography
 
<IconGallery>
  {Object.keys(icons).map((icon) => (
    <IconItem name={icon}>
      <IconExample icon={icon} />
    </IconItem>
  ))}
</IconGallery>

IconGallery

import { IconGallery } from '@storybook/addon-docs/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/addon-docs/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.