src/components/CategoryIcon.tsx

@@ -15,7 +15,7 @@ import {
   Play,
   type LucideIcon,
 } from "lucide-react";
-import { categorySvgUrlForSlug } from "../lib/categorySvgSlug";
+import { categoryAssetUrlForSlug } from "../lib/categorySvgSlug";
 
 const map: Record<string, LucideIcon> = {
   folder: Folder,
@@ -40,15 +40,15 @@ export function CategoryIcon({
   className,
 }: {
   iconKey: string;
-  /** When set, prefer branded SVG from `public/assets/ark-library/media/svg/`. */
+  /** When set, prefer branded asset from `public/assets/ark-library/media/`. */
   categorySlug?: string;
   className?: string;
 }) {
-  const svgUrl = categorySlug ? categorySvgUrlForSlug(categorySlug) : null;
+  const assetUrl = categorySlug ? categoryAssetUrlForSlug(categorySlug) : null;
-  if (svgUrl) {
+  if (assetUrl) {
     return (
       <img
-        src={svgUrl}
+        src={assetUrl}
         alt=""
         className={[className, "object-contain pointer-events-none select-none"]
           .filter(Boolean)

src/lib/categorySvgSlug.ts

@@ -1,23 +1,24 @@
-/** Basename under `/assets/ark-library/media/svg/` for each category slug (matches ark-library-media/svg). */
+/** Asset path under `/assets/ark-library/media/` for each category slug. */
-const slugToSvg: Record<string, string> = {
+const slugToAsset: Record<string, string> = {
-  "project-ppt": "project-details.svg",
+  "project-ppt": "svg/project-details.svg",
-  "daily-class": "everyday-class.svg",
+  "daily-class": "svg/everyday-class.svg",
-  "official-announcement": "official-announcement.svg",
+  "official-announcement": "svg/official-announcement.svg",
-  "academy-materials": "educational-clips.svg",
+  "academy-materials": "png/academy-materials.png",
-  "global-evangelism": "global-news.svg",
+  "global-evangelism": "svg/global-news.svg",
-  "daily-poster": "poster.svg",
+  "daily-poster": "svg/poster.svg",
-  "community-tweets": "community.svg",
+  "community-tweets": "svg/community.svg",
-  "video-hub": "videos.svg",
+  "video-hub": "svg/videos.svg",
-  "subsidy-policy": "gift.svg",
+  "subsidy-policy": "svg/gift.svg",
-  "how-to": "guidelines.svg",
+  "how-to": "svg/guidelines.svg",
-  "official-assets": "directory.svg",
+  "official-assets": "svg/directory.svg",
-  "media-coverage": "news-record.svg",
+  "media-coverage": "svg/news-record.svg",
-  "academy-video": "educational-clips.svg",
+  "academy-video": "png/academy-video.png",
-  general: "general.svg",
+  "acedemy-video": "png/academy-video.png",
+  general: "svg/general.svg",
 };
 
-export function categorySvgUrlForSlug(slug: string): string | null {
+export function categoryAssetUrlForSlug(slug: string): string | null {
-  const file = slugToSvg[slug];
+  const file = slugToAsset[slug];
   if (!file) return null;
-  return `/assets/ark-library/media/svg/${file}`;
+  return `/assets/ark-library/media/${file}`;
 }