From 3d23d22ed25c316800ce5d3d2da702d0fd1e805c Mon Sep 17 00:00:00 2001
From: Igor Bedesqui <igorbedesqui@gmail.com>
Date: Mon, 11 Dec 2023 20:58:05 -0300
Subject: [PATCH] feat: make icon theme aware.

---
 src/components/svgCard.svelte                | 13 +++++++++++--
 src/data/svgs.ts                             |  5 ++++-
 src/types/svg.ts                             |  7 ++++++-
 static/library/{axiom.svg => axiom-dark.svg} |  0
 static/library/axiom-light.svg               |  1 +
 5 files changed, 22 insertions(+), 4 deletions(-)
 rename static/library/{axiom.svg => axiom-dark.svg} (100%)
 create mode 100644 static/library/axiom-light.svg

diff --git a/src/components/svgCard.svelte b/src/components/svgCard.svelte
index b60837c..502db65 100644
--- a/src/components/svgCard.svelte
+++ b/src/components/svgCard.svelte
@@ -41,7 +41,16 @@
 
 <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" />
+    <img
+      class="hidden dark:block mb-4 mt-2 h-10"
+      src={typeof svgInfo.route !== 'string' ? svgInfo.route.dark : svgInfo.route}
+      alt={svgInfo.title}
+    />
+    <img
+      class="block dark:hidden mb-4 mt-2 h-10"
+      src={typeof svgInfo.route !== 'string' ? svgInfo.route.light : svgInfo.route}
+      alt={svgInfo.title}
+    />
     <div class="mb-3 flex flex-col items-center justify-center">
       <p class="truncate text-[15px] font-medium">{svgInfo.title}</p>
       <a
@@ -62,7 +71,7 @@
       <button
         title="Download"
         on:click={() => {
-          downloadSvg(svgInfo.route);
+          downloadSvg(typeof svgInfo.route !== 'string' ? svgInfo.route.dark : 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"
       >
diff --git a/src/data/svgs.ts b/src/data/svgs.ts
index b188a84..adc2362 100644
--- a/src/data/svgs.ts
+++ b/src/data/svgs.ts
@@ -1720,7 +1720,10 @@ export const svgs: iSVG[] = [
     id: 775133760594,
     title: 'Axiom',
     category: 'Software',
-    route: '/library/axiom.svg',
+    route: {
+      dark: '/library/axiom-dark.svg',
+      light: '/library/axiom-light.svg'
+    },
     url: 'https://axiom.co/'
   }
 ];
diff --git a/src/types/svg.ts b/src/types/svg.ts
index d49eb3b..bdbeb0b 100644
--- a/src/types/svg.ts
+++ b/src/types/svg.ts
@@ -4,6 +4,11 @@ export interface iSVG {
   id: number;
   title: string;
   category: tCategory;
-  route: string;
+  route:
+    | string // for backwards compat of when theme support was not added
+    | {
+        dark: string;
+        light: string;
+      };
   url: string;
 }
diff --git a/static/library/axiom.svg b/static/library/axiom-dark.svg
similarity index 100%
rename from static/library/axiom.svg
rename to static/library/axiom-dark.svg
diff --git a/static/library/axiom-light.svg b/static/library/axiom-light.svg
new file mode 100644
index 0000000..be2e2c2
--- /dev/null
+++ b/static/library/axiom-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="358" height="309" fill="none"><g clip-path="url(#a)"><path fill="#000" d="M354.75 215.609 278.412 87.8475c-3.501-5.872-12.127-10.6761-19.17-10.6761h-47.659c-11.077 0-15.618-7.5477-10.093-16.7723l26.136-43.6269c2.074-3.4623 2.069-7.72483-.011-11.1835C225.534 2.13003 221.691 0 217.533 0h-66.485c-7.044 0-15.688 4.79349-19.212 10.6524L2.6449 225.448c-3.524953 5.859-3.526307 15.447-.00541 21.307L35.8815 302.08c5.5392 9.217 14.6223 9.228 20.1846.023l25.9742-42.98c5.5636-9.205 14.6452-9.195 20.1847.023l23.548 39.192c3.521 5.86 12.164 10.654 19.207 10.654h153.633c7.04 0 15.685-4.794 19.206-10.654l36.892-61.397c3.521-5.86 3.538-15.459.039-21.332Zm-103.096-6.149c5.505 9.236.945 16.794-10.132 16.794H122.021c-11.077 0-15.609-7.542-10.07-16.76l59.796-99.517c5.539-9.218 14.602-9.217 20.141.001l59.766 99.482Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h358v309H0z"/></clipPath></defs></svg>
\ No newline at end of file