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

提供要顯示的圖示。