✨ Add svelte-sonner.

src/components/svgCard.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import download from 'downloadjs';
-  import toast from 'svelte-french-toast';
+  import { toast } from 'svelte-sonner';
   import type { iSVG } from '../types/svg';
   import { MIMETYPE, getSvgContent } from '../utils/getSvgContent';
 
@@ -15,10 +15,7 @@
   // Download SVG:
   const downloadSvg = (url?: string) => {
     download(url || '');
-    toast('Downloading', {
+    toast.success('Downloading...');
-      icon: '🎉',
-      style: 'border-radius: 200px; background: #333; color: #fff;'
-    });
   };
 
   // Copy SVG to clipboard:
@@ -33,9 +30,8 @@
       const content = (await getSvgContent(url, false)) as string;
       await navigator.clipboard.writeText(content);
     }
-    toast('Copied to clipboard', {
+    toast.message('Copied to clipboard!', {
-      icon: '👏',
+      description: `${svgInfo.title} - ${svgInfo.category}`
-      style: 'border-radius: 200px; background: #333; color: #fff;'
     });
   };
 </script>

src/routes/+layout.svelte

@@ -18,7 +18,7 @@
   import Star from 'phosphor-svelte/lib/Star';
 
   // Toaster:
-  import { Toaster } from 'svelte-french-toast';
+  import { Toaster } from 'svelte-sonner';
 
   // Components for all pages:
   import Transition from '@/components/transition.svelte';
@@ -124,6 +124,12 @@
     <Transition pathname={data.pathname}>
       <slot />
     </Transition>
-    <Toaster position="bottom-center" />
+    <Toaster
+      position="bottom-right"
+      toastOptions={{
+        class:
+          'font-sans dark:bg-neutral-800 dark:text-white bg-neutral-200 text-neutral-800 border dark:border-neutral-900 border-neutral-300'
+      }}
+    />
   </div>
 </main>