SvgIconRegistry

Centralized zfb-safe SVG registry: brand logos + UI icons (components/svg/index.ts).

Media & Icons

Full registry

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Inventory story for the SVG icon/brand-logo registry (epic #1647, wave 6, // gap batch #1661). // // Spec deviation: issue #1661 names `src/components/svg/index.tsx` as the // registry to story. That file is DEAD CODE — it has zero importers anywhere // in the repo (verified via grep) and its own `?raw` SVG imports are exactly // the pattern `components/svg/index.ts`'s own history comment says "blew up // esbuild" under zfb, which is why it was replaced. The LIVE, zfb-safe // registry every real consumer (mobile-menu-drawer, section-heading, article // `a.tsx`, purchase-nav, brand-square-logo.tsx, …) actually imports is the // root-level `components/svg/index.ts`, which re-exports string-inlined icons // from `src/lib/svg/icons.tsx`. Storying the dead file risked breaking the // styleguide's zfb SSR route-eval for no benefit, so this story targets the // real registry instead. Flagged to the manager in the wave-6 report. // // Single variant by nature: this is an inventory of the whole registry, not a // single component with meaningful prop states. TakazudoLogoSymbol / // TakazudoLogoUse are excluded — they're a <symbol>/<use> dedup pair meant to // be mounted together once per page, not a standalone visual icon. import type { ComponentChildren } from 'preact'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { BrandAddac, BrandAiSynthesis, BrandDivergentWaves, BrandFourMs, BrandMengQi, BrandMordax, BrandNoisyFruitsLab, BrandOam, BrandOxiInstruments, BrandRecovery, BrandRykModular, BrandShik, BrandTakazudo, BrandWeston, ArrowDown, ArrowRight, ArrowRightThick, Bookmark, BreadSeparatorLeft, BreadSeparatorRight, Discord, Document, Folder, Mercari, Rocket, Search, TakazudoLogo, X, Youtube, } from './index'; const meta: StoryMeta = { title: 'SvgIconRegistry', category: 'Media & Icons', description: 'Centralized zfb-safe SVG registry: brand logos + UI icons (components/svg/index.ts).', usage: `import { BrandOxiInstruments, ArrowRight } from '@/components/svg';\n\n<ArrowRight className="h-4 w-auto" />`, }; export default meta; const brandLogos = [ { name: 'BrandAddac', Icon: BrandAddac }, { name: 'BrandAiSynthesis', Icon: BrandAiSynthesis }, { name: 'BrandDivergentWaves', Icon: BrandDivergentWaves }, { name: 'BrandFourMs', Icon: BrandFourMs }, { name: 'BrandMengQi', Icon: BrandMengQi }, { name: 'BrandMordax', Icon: BrandMordax }, { name: 'BrandNoisyFruitsLab', Icon: BrandNoisyFruitsLab }, { name: 'BrandOam', Icon: BrandOam }, { name: 'BrandOxiInstruments', Icon: BrandOxiInstruments }, { name: 'BrandRecovery', Icon: BrandRecovery }, { name: 'BrandRykModular', Icon: BrandRykModular }, { name: 'BrandShik', Icon: BrandShik }, { name: 'BrandTakazudo', Icon: BrandTakazudo }, { name: 'BrandWeston', Icon: BrandWeston }, ]; const uiIcons = [ { name: 'ArrowDown', Icon: ArrowDown }, { name: 'ArrowRight', Icon: ArrowRight }, { name: 'ArrowRightThick', Icon: ArrowRightThick }, { name: 'Bookmark', Icon: Bookmark }, { name: 'BreadSeparatorLeft', Icon: BreadSeparatorLeft }, { name: 'BreadSeparatorRight', Icon: BreadSeparatorRight }, { name: 'Discord', Icon: Discord }, { name: 'Document', Icon: Document }, { name: 'Folder', Icon: Folder }, { name: 'Mercari', Icon: Mercari }, { name: 'Rocket', Icon: Rocket }, { name: 'Search', Icon: Search }, { name: 'TakazudoLogo', Icon: TakazudoLogo }, { name: 'X', Icon: X }, { name: 'Youtube', Icon: Youtube }, ]; function IconGrid({ items, }: { items: { name: string; Icon: (props: { className?: string }) => ComponentChildren }[]; }) { return ( <ul className="flex flex-wrap gap-hgap-md"> {items.map(({ name, Icon }) => ( <li key={name} className="flex flex-col items-center gap-vgap-2xs w-[96px]"> <div className="flex h-12 w-12 items-center justify-center bg-zd-white"> <Icon className="h-8 w-auto text-zd-literal-black" /> </div> <span className="text-center text-xs text-zd-white">{name}</span> </li> ))} </ul> ); } export const Registry = defineStory({ name: 'Full registry', render: () => ( <div className="flex flex-col gap-vgap-md"> <div> <h3 className="pb-vgap-xs text-sm text-zd-white">Brand logos</h3> <IconGrid items={brandLogos} /> </div> <div> <h3 className="pb-vgap-xs text-sm text-zd-white">UI icons</h3> <IconGrid items={uiIcons} /> </div> </div> ), });