Initial frontend import

src/components/CategoryIcon.tsx

@@ -0,0 +1,63 @@
+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} />;
+}