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

🎨 Design improvements for downloadSvg & svgCard components

Browse Source
This commit is contained in:
pheralb 2024-01-26 00:04:11 +00:00
parent b69d1f729e
commit 5f4116f25f
2 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/downloadSvg.svelte
View File

@ -110,8 +110,8 @@
<div <div
class={cn( class={cn(
'flex flex-col space-y-2 mt-4', 'flex flex-col space-y-2 mt-4 h-full',
'md:space-y-0 md:flex-row md:space-x-4 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}> <div class={cardDownloadStyles}>
@ -193,7 +193,7 @@
<img <img
src={isDarkTheme() ? svgInfo.wordmark.dark : svgInfo.wordmark.light} src={isDarkTheme() ? svgInfo.wordmark.dark : svgInfo.wordmark.light}
alt={svgInfo.title} alt={svgInfo.title}
class="h-8 my-4" class="h-10 my-4"
/> />
<button <button
title="Download Wordmark light variant" title="Download Wordmark light variant"

6
src/components/svgCard.svelte
View File

@ -7,7 +7,7 @@
import { MIMETYPE, getSvgContent } from '@/utils/getSvgContent'; import { MIMETYPE, getSvgContent } from '@/utils/getSvgContent';
// Icons: // Icons:
import { CopyIcon, LinkIcon, ChevronsRight, Baseline } from 'lucide-svelte'; import { CopyIcon, LinkIcon, ChevronsRight, Baseline, Sparkles } from 'lucide-svelte';
// Components & styles: // Components & styles:
import CardSpotlight from './cardSpotlight.svelte'; import CardSpotlight from './cardSpotlight.svelte';
@ -256,7 +256,11 @@
}} }}
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40" class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
> >
{#if wordmarkSvg}
<Sparkles size={iconSize} strokeWidth={iconStroke} />
{:else}
<Baseline size={iconSize} strokeWidth={iconStroke} /> <Baseline size={iconSize} strokeWidth={iconStroke} />
{/if}
</button> </button>
{/if} {/if}
</div> </div>