doc-block-icongallery.mdx

title	sidebar
IconGallery	order title 6 IconGallery

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

{/* prettier-ignore-start */}

{/* 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>

{/* prettier-ignore-end */}

IconGallery

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

IconGallery is configured with the following props:

children

Type: React.ReactNode

IconGallery expects only IconItem children.

IconItem

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

IconItem is configured with the following props:

name

(Required)

Type: string

Sets the name of the icon.

children

Type: React.ReactNode

Provides the icon to be displayed.