IconLibraryPreview() — ui Function Reference

Architecture documentation for the IconLibraryPreview() function in icon-library-picker.tsx from the ui codebase.

Function tsx DesignEngine PreviewSystem

Entity Profile

DesignEngine→ PreviewSystem→ IconLibraryPreview() — ui Function Reference

Dependency Diagram

graph TD
  272388b7_acdd_1263_ffe0_863be543f8ea["IconLibraryPreview()"]
  f4a0adba_f490_99de_9ed8_5f1516b92ce0["icon-library-picker.tsx"]
  272388b7_acdd_1263_ffe0_863be543f8ea -->|defined in| f4a0adba_f490_99de_9ed8_5f1516b92ce0
  style 272388b7_acdd_1263_ffe0_863be543f8ea fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/components/icon-library-picker.tsx lines 319–366

const IconLibraryPreview = memo(function IconLibraryPreview({
  iconLibrary,
}: {
  iconLibrary: IconLibraryName
}) {
  const previewIcons = PREVIEW_ICONS[iconLibrary]

  if (!previewIcons) {
    return null
  }

  const IconRenderer =
    iconLibrary === "lucide"
      ? IconLucide
      : iconLibrary === "tabler"
        ? IconTabler
        : iconLibrary === "hugeicons"
          ? IconHugeicons
          : iconLibrary === "phosphor"
            ? IconPhosphor
            : IconRemixicon

  return (
    <Suspense
      fallback={
        <div className="-mx-1 grid w-full grid-cols-7 gap-2">
          {previewIcons.map((iconName) => (
            <div
              key={iconName}
              className="bg-muted size-6 animate-pulse rounded"
            />
          ))}
        </div>
      }
    >
      <div className="-mx-1 grid w-full grid-cols-7 gap-2">
        {previewIcons.map((iconName) => (
          <div
            key={iconName}
            className="flex size-6 items-center justify-center *:[svg]:size-5"
          >
            <IconRenderer name={iconName} />
          </div>
        ))}
      </div>
    </Suspense>
  )
})