IconGallery

观看视频教程

IconGallery 块使您可以轻松地记录与您的项目关联的 React 图标组件，以整洁的网格显示。

Screenshot of IconGallery and IconItem blocks

文档化图标

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

Iconography.mdx

import { Meta, 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 块，将 IconItem 包裹在一个循环中，并迭代您想要记录的图标，包括它们的属性。例如

Iconography.mdx

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

IconGallery 使用以下 props 进行配置

`children`

类型：React.ReactNode

IconGallery 仅接受 IconItem 子元素。

IconItem

import { IconItem } from '@storybook/blocks';

IconItem 使用以下 props 进行配置

`name`

（必需）

类型：string

设置图标的名称。

`children`

类型：React.ReactNode

提供要显示的图标。