Files
Arkie-Library-Frontend/src/components/CategoryIcon.tsx
2026-05-16 00:18:22 +08:00

64 lines
1.2 KiB
TypeScript

import {
BookOpen,
Calendar,
Film,
Folder,
Gift,
Globe2,
GraduationCap,
Hash,
Image as ImageIcon,
Megaphone,
MessageCircle,
Newspaper,
Palette,
Play,
type LucideIcon,
} from "lucide-react";
import { categorySvgUrlForSlug } from "../lib/categorySvgSlug";
const map: Record<string, LucideIcon> = {
folder: Folder,
calendar: Calendar,
megaphone: Megaphone,
graduation: GraduationCap,
globe: Globe2,
image: ImageIcon,
chat: MessageCircle,
film: Film,
gift: Gift,
book: BookOpen,
palette: Palette,
newspaper: Newspaper,
play: Play,
hash: Hash,
};
export function CategoryIcon({
iconKey,
categorySlug,
className,
}: {
iconKey: string;
/** When set, prefer branded SVG from `public/assets/ark-library/media/svg/`. */
categorySlug?: string;
className?: string;
}) {
const svgUrl = categorySlug ? categorySvgUrlForSlug(categorySlug) : null;
if (svgUrl) {
return (
<img
src={svgUrl}
alt=""
className={[className, "object-contain pointer-events-none select-none"]
.filter(Boolean)
.join(" ")}
loading="lazy"
decoding="async"
/>
);
}
const Icon = map[iconKey] || Folder;
return <Icon className={className} />;
}