diff --git a/src/components/svgCard.svelte b/src/components/svgCard.svelte
index f52b388..b8b51c6 100644
--- a/src/components/svgCard.svelte
+++ b/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 @@
{svgInfo.title}
- {svgInfo.category}
+
+
+ {#if Array.isArray(svgInfo.category)}
+ {#each svgInfo.category.sort() as c}
+
{c}
+ {/each}
+ {:else}
+
{svgInfo.category}
+ {/if}
diff --git a/src/data/svgs.ts b/src/data/svgs.ts
index 48d50f3..f59b75e 100644
--- a/src/data/svgs.ts
+++ b/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/'
},
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7615225..cfe1a17 100644
--- a/src/routes/+layout.svelte
+++ b/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:
diff --git a/src/routes/directory/[slug]/+page.ts b/src/routes/directory/[slug]/+page.ts
index 4abaf55..10fc98d 100644
--- a/src/routes/directory/[slug]/+page.ts
+++ b/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,
diff --git a/src/types/svg.ts b/src/types/svg.ts
index ca5f6aa..0fc68f6 100644
--- a/src/types/svg.ts
+++ b/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
| {