feat: multiple category feature

src/components/svgCard.svelte

@@ -44,8 +44,13 @@
   // Download SVG:
   const downloadSvg = (url?: string) => {
     download(url || '');
+
+    const category = Array.isArray(svgInfo.category)
+      ? svgInfo.category.sort().join(' - ')
+      : svgInfo.category;
+
     toast.success(`Downloading...`, {
-      description: `${svgInfo.title} - ${svgInfo.category}`
+      description: `${svgInfo.title} - ${category}`
     });
   };
 
@@ -81,8 +86,12 @@
       download(content, `${svgInfo.title}.zip`, 'application/zip');
     });
 
+    const category = Array.isArray(svgInfo.category)
+      ? svgInfo.category.sort().join(' - ')
+      : svgInfo.category;
+
     toast.success('Downloading light & dark variants...', {
-      description: `${svgInfo.title} - ${svgInfo.category}`
+      description: `${svgInfo.title} - ${category}`
     });
   };
 
@@ -105,22 +114,26 @@
       await navigator.clipboard.writeText(content);
     }
 
+    const category = Array.isArray(svgInfo.category)
+      ? svgInfo.category.sort().join(' - ')
+      : svgInfo.category;
+
     if (isInFigma) {
       toast.success('Ready to paste in Figma!', {
-        description: `${svgInfo.title} - ${svgInfo.category}`
+        description: `${svgInfo.title} - ${category}`
       });
       return;
     }
 
     if (wordmarkSvg) {
       toast.success('Copied wordmark SVG to clipboard!', {
-        description: `${svgInfo.title} - ${svgInfo.category}`
+        description: `${svgInfo.title} - ${category}`
       });
       return;
     }
 
     toast.success('Copied to clipboard!', {
-      description: `${svgInfo.title} - ${svgInfo.category}`
+      description: `${svgInfo.title} - ${category}`
     });
   };
 
@@ -177,10 +190,21 @@
       <p class="truncate text-[15px] font-medium text-balance text-center select-all">
         {svgInfo.title}
       </p>
-      <a
-        href={`/directory/${svgInfo.category.toLowerCase()}`}
-        class="text-sm lowercase text-neutral-500 hover:underline font-mono">{svgInfo.category}</a
-      >
+    </div>
+    <div class="mb-3 flex flex-col items-center justify-center h-10">
+      {#if Array.isArray(svgInfo.category)}
+        {#each svgInfo.category.sort() as c}
+          <a
+            href={`/directory/${c.toLowerCase()}`}
+            class="text-sm lowercase text-neutral-500 hover:underline font-mono">{c}</a
+          >
+        {/each}
+      {:else}
+        <a
+          href={`/directory/${svgInfo.category.toLowerCase()}`}
+          class="text-sm lowercase text-neutral-500 hover:underline font-mono">{svgInfo.category}</a
+        >
+      {/if}
     </div>
     <!-- Actions -->
     <div class="flex items-center space-x-1">

src/data/svgs.ts

@@ -1132,7 +1132,7 @@ export const svgs: iSVG[] = [
   },
   {
     title: 'WordPress',
-    category: 'Software',
+    category: ['Software', 'CMS'],
     route: '/library/wordpress.svg',
     url: 'https://wordpress.org/'
   },

src/routes/+layout.svelte

@@ -8,7 +8,7 @@
   // Get categories:
   import { svgs } from '@/data/svgs';
   const categories = svgs
-    .map((svg) => svg.category)
+    .flatMap((svg) => Array.isArray(svg.category) ? svg.category : [svg.category])
     .filter((category, index, array) => array.indexOf(category) === index);
 
   // Icons:

src/routes/directory/[slug]/+page.ts

@@ -13,7 +13,13 @@ export const load = (async ({ params }) => {
   }
 
   // Filter out the svg with the matching slug:
-  const svgsByCategory = svgs.filter((svg: iSVG) => svg.category.toLowerCase() === slug);
+  const svgsByCategory = svgs.filter((svg: iSVG) => {
+    if (Array.isArray(svg.category)) {
+      return svg.category.some(categoryItem => categoryItem.toLowerCase() === slug);
+    } else {
+      return svg.category.toLowerCase() === slug;
+    }
+  });
 
   return {
     category: slug as string,

src/types/svg.ts

@@ -1,9 +1,12 @@
 import type { tCategory } from './categories';
 
+type tCategoryPair = [tCategory, tCategory];
+type CategoryTriple = [tCategory, tCategory, tCategory];
+
 export interface iSVG {
   id?: number;
   title: string;
-  category: tCategory;
+  category: tCategory | tCategoryPair | CategoryTriple;
   route:
     | string // for backwards compat of when theme support was not added
     | {