IconsGallery

Inventory of the standalone components/icons/* SVG components.

Media & Icons

All icons

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Inventory story for the standalone `components/icons/*` SVGs (epic #1647, // wave 6, gap batch #1661) — Bookmark, BookmarkShort, FolderIcon. These are // hand-authored SVG components, distinct from the string-inlined registry in // components/svg/index.ts (see svg-registry.stories.tsx). Single variant by // nature: it's an inventory of the whole set, not a single component with // meaningful prop states. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { Bookmark } from './bookmark'; import { BookmarkShort } from './bookmark-short'; import { FolderIcon } from './folder-icon'; const meta: StoryMeta = { title: 'IconsGallery', category: 'Media & Icons', description: 'Inventory of the standalone components/icons/* SVG components.', usage: `import { Bookmark } from '@/components/icons/bookmark';\nimport { BookmarkShort } from '@/components/icons/bookmark-short';\nimport { FolderIcon } from '@/components/icons/folder-icon';\n\n<Bookmark className="h-8 w-auto text-zd-white" />`, }; export default meta; const icons = [ { name: 'Bookmark', Icon: Bookmark }, { name: 'BookmarkShort', Icon: BookmarkShort }, { name: 'FolderIcon', Icon: FolderIcon }, ]; export const Gallery = defineStory({ name: 'All icons', render: () => ( <ul className="flex flex-wrap gap-hgap-lg"> {icons.map(({ name, Icon }) => ( <li key={name} className="flex flex-col items-center gap-vgap-2xs"> <Icon className="h-16 w-auto text-zd-white" /> <span className="text-xs text-zd-white">{name}</span> </li> ))} </ul> ), });