IconPlaceholder() — ui Function Reference

Architecture documentation for the IconPlaceholder() function in icon-placeholder.tsx from the ui codebase.

Function tsx DesignEngine PreviewSystem

Entity Profile

DesignEngine→ PreviewSystem→ IconPlaceholder() — ui Function Reference

Dependency Diagram

graph TD
  22e0fc81_dc77_7ab9_d832_17e167652ad0["IconPlaceholder()"]
  72896a45_b124_4612_efea_d67f3581f577["icon-placeholder.tsx"]
  22e0fc81_dc77_7ab9_d832_17e167652ad0 -->|defined in| 72896a45_b124_4612_efea_d67f3581f577
  style 22e0fc81_dc77_7ab9_d832_17e167652ad0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/components/icon-placeholder.tsx lines 39–66

export function IconPlaceholder({
  ...props
}: {
  [K in IconLibraryName]: string
} & React.ComponentProps<"svg">) {
  const [{ iconLibrary }] = useDesignSystemSearchParams()
  const iconName = props[iconLibrary]

  if (!iconName) {
    return null
  }

  return (
    <Suspense fallback={<SquareIcon {...props} />}>
      {iconLibrary === "lucide" && <IconLucide name={iconName} {...props} />}
      {iconLibrary === "tabler" && <IconTabler name={iconName} {...props} />}
      {iconLibrary === "hugeicons" && (
        <IconHugeicons name={iconName} {...props} />
      )}
      {iconLibrary === "phosphor" && (
        <IconPhosphor name={iconName} {...props} />
      )}
      {iconLibrary === "remixicon" && (
        <IconRemixicon name={iconName} {...props} />
      )}
    </Suspense>
  )
}