mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +00:00
zeekay
05fc512820
Upstream sync from shadcn-ui/ui (1686 commits since last merge base). Key changes: - packages/shadcn upgraded to 4.1.0 (CLI font transformers, scaffold from github, chart colors) - apps/v4 replaces apps/www as the primary docs/registry app - Font system: 25+ heading font registries, font markers utility, @supports override - Chart improvements: recharts v3 compat, radial chart fixes - templates/ updated with monorepo variants (astro, vite, react-router, start) - skills/shadcn AI skill definitions added - deprecated/ removed (auth, auth-firebase, cli, www) Preserved Hanzo-only paths: app/, pkg/, demo/, docs/, template/next/
76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import { lazy, Suspense } from "react"
|
|
import { SquareIcon } from "lucide-react"
|
|
import type { IconLibraryName } from "shadcn/icons"
|
|
|
|
import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
|
|
|
|
const IconLucide = lazy(() =>
|
|
import("@/registry/icons/icon-lucide").then((mod) => ({
|
|
default: mod.IconLucide,
|
|
}))
|
|
)
|
|
|
|
const IconTabler = lazy(() =>
|
|
import("@/registry/icons/icon-tabler").then((mod) => ({
|
|
default: mod.IconTabler,
|
|
}))
|
|
)
|
|
|
|
const IconHugeicons = lazy(() =>
|
|
import("@/registry/icons/icon-hugeicons").then((mod) => ({
|
|
default: mod.IconHugeicons,
|
|
}))
|
|
)
|
|
|
|
const IconPhosphor = lazy(() =>
|
|
import("@/registry/icons/icon-phosphor").then((mod) => ({
|
|
default: mod.IconPhosphor,
|
|
}))
|
|
)
|
|
|
|
const IconRemixicon = lazy(() =>
|
|
import("@/registry/icons/icon-remixicon").then((mod) => ({
|
|
default: mod.IconRemixicon,
|
|
}))
|
|
)
|
|
|
|
// Preload all icon renderer modules so switching libraries is instant.
|
|
// These warm the browser module cache; React.lazy resolves immediately
|
|
// for modules that are already loaded.
|
|
void import("@/registry/icons/icon-lucide")
|
|
void import("@/registry/icons/icon-tabler")
|
|
void import("@/registry/icons/icon-hugeicons")
|
|
void import("@/registry/icons/icon-phosphor")
|
|
void import("@/registry/icons/icon-remixicon")
|
|
|
|
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>
|
|
)
|
|
}
|