qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2024-11-13 08:46:56 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ Add svelte-sonner.

Browse Source
This commit is contained in:
pheralb 2023-07-07 09:34:08 +01:00
parent 539d103a1e
commit 5470b17afb
2 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/svgCard.svelte
View File

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

10
src/routes/+layout.svelte
View File

@ -18,7 +18,7 @@
import Star from 'phosphor-svelte/lib/Star'; import Star from 'phosphor-svelte/lib/Star';
// Toaster: // Toaster:
import { Toaster } from 'svelte-french-toast'; import { Toaster } from 'svelte-sonner';
// Components for all pages: // Components for all pages:
import Transition from '@/components/transition.svelte'; import Transition from '@/components/transition.svelte';
@ -124,6 +124,12 @@
<Transition pathname={data.pathname}> <Transition pathname={data.pathname}>
<slot /> <slot />
</Transition> </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> </div>
</main> </main>