🛠️ Refactor svgCard and index files; streamline image handling and improve type definitions

src/components/svgs/svgCard.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import type { iSVG } from "@/types/svg";
+
   import { cn } from "@/utils/cn";
   import { mode } from "mode-watcher";
+  import { getSvgImgUrl } from "@/data";
 
   // Icons:
   import XIcon from "@lucide/svelte/icons/x";
@@ -32,7 +34,6 @@
   // States:
   let wordmarkSvg = $state<boolean>(false);
   let moreTagsOptions = $state<boolean>(false);
-  let changeThemeMode = $state<boolean>(false);
 
   // Icon Stroke & Size:
   let iconStroke = 1.8;
@@ -69,15 +70,17 @@
     <AddToFavorite svg={svgInfo} />
   </div>
   <!-- Image -->
-  {#if wordmarkSvg == true && svgInfo.wordmark !== undefined}
+  {#if wordmarkSvg && svgInfo.wordmark !== undefined}
-    {#if changeThemeMode}
     <img
-        class={cn("block", globalImageStyles)}
+      class={cn("hidden dark:block", globalImageStyles)}
-        src={typeof svgInfo.wordmark !== "string"
+      src={getSvgImgUrl({ url: svgInfo.wordmark, isDark: true })}
-          ? mode.current === "dark"
+      alt={svgInfo.title}
-            ? svgInfo.wordmark?.light || ""
+      title={svgInfo.title}
-            : svgInfo.wordmark?.dark || ""
+      loading="lazy"
-          : svgInfo.wordmark || ""}
+    />
+    <img
+      class={cn("block dark:hidden", globalImageStyles)}
+      src={getSvgImgUrl({ url: svgInfo.wordmark, isDark: false })}
       alt={svgInfo.title}
       title={svgInfo.title}
       loading="lazy"
@@ -85,50 +88,14 @@
   {:else}
     <img
       class={cn("hidden dark:block", globalImageStyles)}
-        src={typeof svgInfo.wordmark !== "string"
+      src={getSvgImgUrl({ url: svgInfo.route, isDark: true })}
-          ? svgInfo.wordmark?.dark || ""
-          : svgInfo.wordmark || ""}
       alt={svgInfo.title}
       title={svgInfo.title}
       loading="lazy"
     />
     <img
       class={cn("block dark:hidden", globalImageStyles)}
-        src={typeof svgInfo.wordmark !== "string"
+      src={getSvgImgUrl({ url: svgInfo.route, isDark: false })}
-          ? svgInfo.wordmark?.light || ""
-          : svgInfo.wordmark || ""}
-        alt={svgInfo.title}
-        title={svgInfo.title}
-        loading="lazy"
-      />
-    {/if}
-  {:else if changeThemeMode}
-    <img
-      class={cn("block", globalImageStyles)}
-      src={typeof svgInfo.route !== "string"
-        ? mode.current === "dark"
-          ? svgInfo.route.light
-          : svgInfo.route.dark
-        : svgInfo.route}
-      alt={svgInfo.title}
-      title={svgInfo.title}
-      loading="lazy"
-    />
-  {:else}
-    <img
-      class={cn("hidden dark:block", globalImageStyles)}
-      src={typeof svgInfo.route !== "string"
-        ? svgInfo.route.dark
-        : svgInfo.route}
-      alt={svgInfo.title}
-      title={svgInfo.title}
-      loading="lazy"
-    />
-    <img
-      class={cn("block dark:hidden", globalImageStyles)}
-      src={typeof svgInfo.route !== "string"
-        ? svgInfo.route.light
-        : svgInfo.route}
       alt={svgInfo.title}
       title={svgInfo.title}
       loading="lazy"
@@ -148,7 +115,8 @@
             href={`/directory/${c.toLowerCase()}`}
             class={badgeVariants({
               variant: "outline",
-              class: "cursor-pointer font-mono",
+              class:
+                "cursor-pointer font-mono hover:border-neutral-400 dark:hover:border-neutral-600",
             })}
             title={`This icon is part of the ${svgInfo.category} category`}
           >
@@ -164,7 +132,8 @@
             <Popover.Trigger
               class={badgeVariants({
                 variant: "outline",
-                class: "cursor-pointer font-mono",
+                class:
+                  "cursor-pointer font-mono hover:border-neutral-400 dark:hover:border-neutral-600",
               })}
               title="More Tags"
             >
@@ -193,7 +162,8 @@
           href={`/directory/${svgInfo.category.toLowerCase()}`}
           class={badgeVariants({
             variant: "outline",
-            class: "cursor-pointer font-mono",
+            class:
+              "cursor-pointer font-mono hover:border-neutral-400 dark:hover:border-neutral-600",
           })}
         >
           {svgInfo.category}
@@ -221,13 +191,7 @@
       />
     {/if}
 
-    <DownloadSvg
+    <DownloadSvg {svgInfo} isDarkTheme={() => mode.current === "dark"} />
-      {svgInfo}
-      isDarkTheme={() => {
-        const dark = document.documentElement.classList.contains("dark");
-        return dark;
-      }}
-    />
 
     <a
       href={svgInfo.url}

src/data/index.ts

@@ -1,11 +1,12 @@
-import type { iSVG } from "@/types/svg";
+import type { iSVG, ThemeOptions } from "@/types/svg";
-import { svgs } from "./svgs";
+import type { Category } from "@/types/categories";
+import { svgs } from "@/data/svgs";
 
 export const svgsData = svgs.map((svg: iSVG, index: number) => {
   return { id: index, ...svg };
 }) as iSVG[];
 
-export const getCategories = () => {
+export const getCategories = (): Category[] => {
   const categories = svgs
     .flatMap((svg) =>
       Array.isArray(svg.category) ? svg.category : [svg.category],
@@ -14,14 +15,23 @@ export const getCategories = () => {
   return categories;
 };
 
-export const getCategoriesForDirectory = () => {
+export const getSvgsByCategory = (category: string): iSVG[] =>
-  const categories = svgs
+  svgsData.filter((svg: iSVG) => {
-    .flatMap((svg) =>
+    if (Array.isArray(svg.category)) {
-      Array.isArray(svg.category) ? svg.category : [svg.category],
+      return svg.category.some(
-    )
+        (categoryItem) => categoryItem.toLowerCase() === category.toLowerCase(),
-    .filter((category, index, array) => array.indexOf(category) === index)
+      );
-    .map((category) => ({
+    } else {
-      slug: category.toLowerCase(),
+      return svg.category.toLowerCase() === category.toLowerCase();
-    }));
+    }
-  return categories;
+  });
+
+interface GetSvgImgUrl {
+  url: string | ThemeOptions;
+  isDark: boolean;
+}
+
+export const getSvgImgUrl = ({ url, isDark }: GetSvgImgUrl) => {
+  if (typeof url === "string") return url;
+  return isDark ? url.dark : url.light;
 };