31 lines
825 B
TypeScript
31 lines
825 B
TypeScript
"use client";
|
|
|
|
// find all lucide icons at https://lucide.dev/
|
|
// github https://github.com/lucide-icons/lucide
|
|
import type { LucideProps } from "lucide-react";
|
|
import { memo } from "react";
|
|
|
|
import { dynamicIconImports } from "./dynamicIconImports";
|
|
|
|
export type IconName = keyof typeof dynamicIconImports;
|
|
|
|
interface IconProps extends Omit<LucideProps, "ref"> {
|
|
name: IconName;
|
|
}
|
|
|
|
const fallback = <div className="bg-emphasis h-4 w-4 animate-pulse rounded-lg" />;
|
|
|
|
const LazyIcon = memo(({ name, ...props }: IconProps) => {
|
|
const LucideIcon = dynamicIconImports[name];
|
|
|
|
// This should never happen, but just in case
|
|
if (!LucideIcon) return fallback;
|
|
|
|
// @ts-expect-error - LucideIcon is a lazy loaded component
|
|
return <LucideIcon {...props} />;
|
|
});
|
|
|
|
LazyIcon.displayName = "LazyIcon";
|
|
|
|
export default LazyIcon;
|