qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-02-11 17:50:32 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

⚙️ Fix download light/dark mode for wordmark version

Browse Source
This commit is contained in:
pheralb 2024-01-25 15:38:51 +00:00
parent d1c140f614
commit 7fd044f804
1 changed files with 42 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/downloadSvg.svelte
View File

@ -25,7 +25,7 @@
let mainDownloadStyles = let mainDownloadStyles =
'flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40'; 'flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40';
let cardDownloadStyles = let cardDownloadStyles =
'mt-5 flex w-full flex-col space-y-2 p-4 rounded-md shadow-sm dark:bg-neutral-800/20 bg-neutral-200/10 border border-neutral-200 dark:border-neutral-800'; 'flex w-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: // Functions:
const downloadSvg = (url?: string) => { const downloadSvg = (url?: string) => {
@ -41,35 +41,34 @@
}; };
// Download all variants: // Download all variants:
const downloadAllVariants = async ({ route }: iSVG) => { const downloadAllVariants = async ({
lightRoute,
darkRoute,
isWordmark
}: {
lightRoute: string;
darkRoute: string;
isWordmark?: boolean;
}) => {
const zip = new JSZip(); const zip = new JSZip();
if (typeof route === 'string') { const lightSvg = await getSvgContent(lightRoute, false);
downloadSvg(route); const darkSvg = await getSvgContent(darkRoute, false);
return;
}
const lightSvg = await getSvgContent(route.light, false); if (isWordmark) {
const darkSvg = await getSvgContent(route.dark, false); zip.file(`${svgInfo.title}_wordmark_light.svg`, lightSvg);
zip.file(`${svgInfo.title}_wordmark_dark.svg`, darkSvg);
zip.file(`${svgInfo.title}.svg`, lightSvg); } else {
zip.file(`${svgInfo.title}.dark.svg`, darkSvg); zip.file(`${svgInfo.title}_light.svg`, lightSvg);
zip.file(`${svgInfo.title}_dark.svg`, darkSvg);
if (svgInfo.wordmark) {
if (typeof svgInfo.wordmark === 'string') {
downloadSvg(svgInfo.wordmark);
return;
}
const lightWordmarkSvg = await getSvgContent(svgInfo.wordmark.light, false);
const darkWordmarkSvg = await getSvgContent(svgInfo.wordmark.dark, false);
zip.file(`${svgInfo.title}.wordmark.svg`, lightWordmarkSvg);
zip.file(`${svgInfo.title}.wordmark.dark.svg`, darkWordmarkSvg);
} }
zip.generateAsync({ type: 'blob' }).then((content) => { zip.generateAsync({ type: 'blob' }).then((content) => {
download(content, `${svgInfo.title}.zip`, 'application/zip'); download(
content,
isWordmark ? `${svgInfo.title}_wordmark_light_dark.zip` : `${svgInfo.title}_light_dark.zip`,
'application/zip'
);
}); });
const category = Array.isArray(svgInfo.category) const category = Array.isArray(svgInfo.category)
@ -77,7 +76,9 @@
: svgInfo.category; : svgInfo.category;
toast.success('Downloading light & dark variants...', { toast.success('Downloading light & dark variants...', {
description: `${svgInfo.title} - ${category}` description: isWordmark
? `${svgInfo.title} - Wordmark - ${category}`
: `${svgInfo.title} - ${category}`
}); });
}; };
</script> </script>
@ -106,7 +107,9 @@
<DialogDescription>This logo has multiple options to download.</DialogDescription> <DialogDescription>This logo has multiple options to download.</DialogDescription>
</DialogHeader> </DialogHeader>
<div class="flex w-full items-center space-x-2"> <div
class="flex w-full flex-col md:flex-row items-center justify-center space-y-2 md:space-y-0 md:space-x-2 mt-5"
>
<div class={cardDownloadStyles}> <div class={cardDownloadStyles}>
<img <img
src={isDarkTheme() ? svgInfo.route.dark : svgInfo.route.light} src={isDarkTheme() ? svgInfo.route.dark : svgInfo.route.light}
@ -116,7 +119,14 @@
<button <button
title="Logo with light & dark variants" title="Logo with light & dark variants"
class={buttonStyles} class={buttonStyles}
on:click={() => downloadAllVariants(svgInfo)} on:click={() => {
if (typeof svgInfo.route !== 'string') {
downloadAllVariants({
lightRoute: svgInfo.route.light,
darkRoute: svgInfo.route.dark
});
}
}}
> >
<DownloadIcon size={iconSize} /> <DownloadIcon size={iconSize} />
<p>Light & dark variants</p> <p>Light & dark variants</p>
@ -186,7 +196,11 @@
class={buttonStyles} class={buttonStyles}
on:click={() => { on:click={() => {
if (typeof svgInfo.wordmark !== 'string') { if (typeof svgInfo.wordmark !== 'string') {
downloadAllVariants(svgInfo); downloadAllVariants({
lightRoute: svgInfo.wordmark?.light || '',
darkRoute: svgInfo.wordmark?.dark || '',
isWordmark: true
});
return; return;
} }
}} }}