⚙️ fix: resolve duplicate id display issue

src/components/copySvg.svelte

@@ -12,6 +12,7 @@
   import { cn } from '@/utils/cn';
   import { clipboard } from '@/utils/clipboard';
   import { copyToClipboard as figmaCopyToClipboard } from '@/figma/copy-to-clipboard';
+  import { getPrefixFromSvgUrl, prefixSvgIds } from '@/utils/prefixSvgIds';
 
   // Templates:
   import { getSource } from '@/templates/getSource';
@@ -84,10 +85,14 @@
     const svgUrlToCopy = getSvgUrl();
     optionsOpen = false;
 
-    const content = await getSource({
+    let content = await getSource({
       url: svgUrlToCopy
     });
 
+    if (svgUrlToCopy) {
+      content = prefixSvgIds(content, getPrefixFromSvgUrl(svgUrlToCopy));
+    }
+
     if (isInFigma) {
       figmaCopyToClipboard(content);
     }
@@ -125,9 +130,14 @@
     isLoading = true;
 
     const title = svgInfo.title.split(' ').join('');
-    const content = await getSource({
+    let content = await getSource({
       url: svgUrlToCopy
     });
+
+    if (svgUrlToCopy) {
+      content = prefixSvgIds(content, getPrefixFromSvgUrl(svgUrlToCopy));
+    }
+
     const dataComponent = { code: content, typescript: tsx, name: title };
     const { data, error } = await getReactCode(dataComponent);
 
@@ -156,10 +166,14 @@
 
       optionsOpen = false;
 
-      const content = await getSource({
+      let content = await getSource({
         url: svgUrlToCopy
       });
 
+      if (svgUrlToCopy) {
+        content = prefixSvgIds(content, getPrefixFromSvgUrl(svgUrlToCopy));
+      }
+
       const copyCode = getVueCode({
         content: content,
         lang: ts ? 'ts' : 'js'
@@ -189,10 +203,14 @@
 
       optionsOpen = false;
 
-      const content = await getSource({
+      let content = await getSource({
         url: svgUrlToCopy
       });
 
+      if (svgUrlToCopy) {
+        content = prefixSvgIds(content, getPrefixFromSvgUrl(svgUrlToCopy));
+      }
+
       const copyCode = getSvelteCode({
         content: content,
         lang: ts ? 'ts' : 'js'
@@ -222,10 +240,14 @@
 
     const title = svgInfo.title.split(' ').join('');
     const svgUrlToCopy = getSvgUrl();
-    const content = await getSource({
+    let content = await getSource({
       url: svgUrlToCopy
     });
 
+    if (svgUrlToCopy) {
+      content = prefixSvgIds(content, getPrefixFromSvgUrl(svgUrlToCopy));
+    }
+
     if (!content) {
       toast.error('Failed to fetch the SVG content', {
         duration: 5000
@@ -255,10 +277,14 @@
 
     const title = svgInfo.title.split(' ').join('');
     const svgUrlToCopy = getSvgUrl();
-    const content = await getSource({
+    let content = await getSource({
       url: svgUrlToCopy
     });
 
+    if (svgUrlToCopy) {
+      content = prefixSvgIds(content, getPrefixFromSvgUrl(svgUrlToCopy));
+    }
+
     if (!content) {
       toast.error('Failed to fetch the SVG content', {
         duration: 5000
@@ -287,10 +313,14 @@
     optionsOpen = false;
 
     const svgUrlToCopy = getSvgUrl();
-    const content = await getSource({
+    let content = await getSource({
       url: svgUrlToCopy
     });
 
+    if (svgUrlToCopy) {
+      content = prefixSvgIds(content, getPrefixFromSvgUrl(svgUrlToCopy));
+    }
+
     if (!content) {
       toast.error('Failed to fetch the SVG content', {
         duration: 5000

src/components/downloadSvg.svelte

@@ -17,6 +17,7 @@
   } from '@/ui/dialog';
   import { buttonStyles } from '@/ui/styles';
   import { cn } from '@/utils/cn';
+  import { getPrefixFromSvgUrl, prefixSvgIds } from '@/utils/prefixSvgIds';
 
   // Props:
   export let svgInfo: iSVG;
@@ -31,8 +32,14 @@
     'flex w-full h-full flex-col p-4 rounded-md shadow-sm dark:bg-neutral-800/20 bg-neutral-200/10 border border-neutral-200 dark:border-neutral-800 space-y-2';
 
   // Functions:
-  const downloadSvg = (url?: string) => {
-    download(url || '');
+  const downloadSvg = async (url?: string) => {
+    let content = await getSource({
+      url: url
+    });
+    if (url) {
+      content = prefixSvgIds(content, getPrefixFromSvgUrl(url));
+    }
+    download(content || '', url?.split('/').pop() || '', 'image/svg+xml');
 
     const category = Array.isArray(svgInfo.category)
       ? svgInfo.category.sort().join(' - ')
@@ -55,13 +62,22 @@
   }) => {
     const zip = new JSZip();
 
-    const lightSvg = await getSource({
+    let lightSvg = await getSource({
       url: lightRoute
     });
-    const darkSvg = await getSource({
+    let darkSvg = await getSource({
       url: darkRoute
     });
 
+    lightSvg = prefixSvgIds(
+      lightSvg,
+      svgInfo.title.toLowerCase() + (isWordmark ? '_wordmark_light' : '_light')
+    );
+    darkSvg = prefixSvgIds(
+      darkSvg,
+      svgInfo.title.toLowerCase() + (isWordmark ? '_wordmark_dark' : '_dark')
+    );
+
     if (isWordmark) {
       zip.file(`${svgInfo.title}_wordmark_light.svg`, lightSvg);
       zip.file(`${svgInfo.title}_wordmark_dark.svg`, darkSvg);

src/utils/prefixSvgIds.ts

@@ -0,0 +1,21 @@
+import { optimize } from 'svgo';
+
+export const getPrefixFromSvgUrl = (svgUrl: string) => {
+  return svgUrl.split('/').pop()!.replace('.svg', '').split('-').join('_');
+};
+
+export const prefixSvgIds = (content: string, prefix: string): string => {
+  const result = optimize(content, {
+    plugins: [
+      {
+        name: 'prefixIds',
+        params: {
+          prefix
+        }
+      }
+    ],
+    multipass: false
+  });
+
+  return (result as { data: string }).data;
+};