qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-02-06 15:17:58 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

⚙️ Fixed download svg when `wordmark & route` are strings

Browse Source
This commit is contained in:
pheralb 2024-01-27 00:09:37 +00:00
parent b2caf5c371
commit 804a060e58
1 changed files with 72 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
src/components/downloadSvg.svelte
View File

@ -84,7 +84,7 @@
}; };
</script> </script>
{#if typeof svgInfo.route === 'string'} {#if typeof svgInfo.route === 'string' && svgInfo.wordmark === undefined}
<button <button
title="Download Light & Dark variants" title="Download Light & Dark variants"
class={mainDownloadStyles} class={mainDownloadStyles}
@ -114,56 +114,79 @@
'md:space-y-0 md:flex-row md:space-x-2 md:items-center md:justify-center' 'md:space-y-0 md:flex-row md:space-x-2 md:items-center md:justify-center'
)} )}
> >
<div class={cardDownloadStyles}> {#if typeof svgInfo.route === 'string'}
<img <div class={cardDownloadStyles}>
src={isDarkTheme() ? svgInfo.route.dark : svgInfo.route.light} <img
alt={svgInfo.title} src={isDarkTheme() ? svgInfo.route : svgInfo.route}
class="h-10 my-4" alt={svgInfo.title}
/> class="h-8 my-4"
<button />
title="Logo with light & dark variants" <button
class={buttonStyles} title="Download logo"
on:click={() => { class={buttonStyles}
if (typeof svgInfo.route !== 'string') { on:click={() => {
downloadAllVariants({ if (typeof svgInfo.route === 'string') {
lightRoute: svgInfo.route.light, downloadSvg(svgInfo.route);
darkRoute: svgInfo.route.dark return;
}); }
} }}
}} >
> <DownloadIcon class="mr-2" size={iconSize} />
<DownloadIcon size={iconSize} /> <p>Icon logo</p>
<p>Light & dark variants</p> </button>
</button> </div>
{:else}
<div class={cardDownloadStyles}>
<img
src={isDarkTheme() ? svgInfo.route.dark : svgInfo.route.light}
alt={svgInfo.title}
class="h-10 my-4"
/>
<button
title="Logo with light & dark variants"
class={buttonStyles}
on:click={() => {
if (typeof svgInfo.route !== 'string') {
downloadAllVariants({
lightRoute: svgInfo.route.light,
darkRoute: svgInfo.route.dark
});
}
}}
>
<DownloadIcon size={iconSize} />
<p>Light & dark variants</p>
</button>
<button <button
title="Download light variant" title="Download light variant"
class={buttonStyles} class={buttonStyles}
on:click={() => { on:click={() => {
if (typeof svgInfo.route !== 'string') { if (typeof svgInfo.route !== 'string') {
downloadSvg(svgInfo.route.light); downloadSvg(svgInfo.route.light);
return; return;
} }
}} }}
> >
<DownloadIcon class="mr-2" size={iconSize} /> <DownloadIcon class="mr-2" size={iconSize} />
Only light variant Only light variant
</button> </button>
<button <button
title="Download dark variant" title="Download dark variant"
class={buttonStyles} class={buttonStyles}
on:click={() => { on:click={() => {
if (typeof svgInfo.route !== 'string') { if (typeof svgInfo.route !== 'string') {
downloadSvg(svgInfo.route.dark); downloadSvg(svgInfo.route.dark);
return; return;
} }
}} }}
> >
<DownloadIcon class="mr-2" size={iconSize} /> <DownloadIcon class="mr-2" size={iconSize} />
Only dark variant Only dark variant
</button> </button>
</div> </div>
{/if}
{#if typeof svgInfo.wordmark === 'string' && svgInfo.wordmark !== undefined} {#if typeof svgInfo.wordmark === 'string' && svgInfo.wordmark !== undefined}
<div class={cardDownloadStyles}> <div class={cardDownloadStyles}>