⚡️ Merge branch 'main' of github.com:pheralb/svgl into next.

src/components/svgCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+  import type { iSVG } from '../types/svg';
   import download from 'downloadjs';
   import { toast } from 'svelte-sonner';
-  import type { iSVG } from '../types/svg';
   import { MIMETYPE, getSvgContent } from '../utils/getSvgContent';
 
   // Icons:
@@ -9,6 +9,8 @@
   import Copy from 'phosphor-svelte/lib/Copy';
   import Link from 'phosphor-svelte/lib/Link';
   import Star from 'phosphor-svelte/lib/Star';
+
+  // Main Card:
   import CardSpotlight from './cardSpotlight.svelte';
 
   // Props:
@@ -41,7 +43,20 @@
 
 <CardSpotlight>
   <div class="flex flex-col items-center justify-center rounded-md p-4">
-    <img src={svgInfo.route} alt={svgInfo.title} class="mb-4 mt-2 h-10" loading="lazy" />
+    <img
+      class="hidden dark:block mb-4 mt-2 h-10"
+      src={typeof svgInfo.route !== 'string' ? svgInfo.route.dark : svgInfo.route}
+      alt={svgInfo.title}
+      title={svgInfo.title}
+      loading="lazy"
+    />
+    <img
+      class="block dark:hidden mb-4 mt-2 h-10"
+      src={typeof svgInfo.route !== 'string' ? svgInfo.route.light : svgInfo.route}
+      alt={svgInfo.title}
+      title={svgInfo.title}
+      loading="lazy"
+    />
     <div class="mb-3 flex flex-col items-center justify-center">
       <p class="truncate text-[15px] font-medium">{svgInfo.title}</p>
       <a
@@ -53,7 +68,26 @@
       <button
         title="Copy to clipboard"
         on:click={() => {
-          copyToClipboard(svgInfo.route);
+          const svgHasTheme = typeof svgInfo.route !== 'string';
+
+          if (!svgHasTheme) {
+            copyToClipboard(
+              typeof svgInfo.route === 'string'
+                ? svgInfo.route
+                : "Something went wrong. Couldn't copy the SVG."
+            );
+            return;
+          }
+
+          const dark = document.documentElement.classList.contains('dark');
+
+          copyToClipboard(
+            typeof svgInfo.route !== 'string'
+              ? dark
+                ? svgInfo.route.dark
+                : svgInfo.route.light
+              : svgInfo.route
+          );
         }}
         class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
       >
@@ -62,7 +96,26 @@
       <button
         title="Download"
         on:click={() => {
-          downloadSvg(svgInfo.route);
+          const svgHasTheme = typeof svgInfo.route !== 'string';
+
+          if (!svgHasTheme) {
+            downloadSvg(
+              typeof svgInfo.route === 'string'
+                ? svgInfo.route
+                : "Something went wrong. Couldn't copy the SVG."
+            );
+            return;
+          }
+
+          const dark = document.documentElement.classList.contains('dark');
+
+          downloadSvg(
+            typeof svgInfo.route !== 'string'
+              ? dark
+                ? svgInfo.route.dark
+                : svgInfo.route.light
+              : svgInfo.route
+          );
         }}
         class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
       >