mirror of
https://github.com/pheralb/svgl.git
synced 2024-11-10 14:46:54 +08:00
feat: add to switch between Logo and Wordmark
This commit is contained in:
ridemountainpig
parent
0caef2f8b7
commit
3b4730e88f
@ -16,7 +16,8 @@
|
||||
LinkIcon,
|
||||
PackageIcon,
|
||||
PaintBucket,
|
||||
ChevronsRight
|
||||
ChevronsRight,
|
||||
CaseSensitive
|
||||
} from 'lucide-svelte';
|
||||
|
||||
// Main Card:
|
||||
@ -37,6 +38,9 @@
|
||||
isInFigma = searchParams.get('figma') === '1';
|
||||
});
|
||||
|
||||
// Wordmark SVG:
|
||||
let wordmarkSvg = false;
|
||||
|
||||
// Download SVG:
|
||||
const downloadSvg = (url?: string) => {
|
||||
download(url || '');
|
||||
@ -106,6 +110,22 @@
|
||||
<CardSpotlight>
|
||||
<div class="flex flex-col items-center justify-center rounded-md p-4">
|
||||
<!-- Image -->
|
||||
{#if wordmarkSvg == true}
|
||||
<img
|
||||
class="hidden dark:block mb-4 mt-2 h-10"
|
||||
src={typeof svgInfo.wordmark !== 'string' ? svgInfo.wordmark?.dark || '' : svgInfo.wordmark || ''}
|
||||
alt={svgInfo.title}
|
||||
title={svgInfo.title}
|
||||
loading="lazy"
|
||||
/>
|
||||
<img
|
||||
class="block dark:hidden mb-4 mt-2 h-10"
|
||||
src={typeof svgInfo.wordmark !== 'string' ? svgInfo.wordmark?.light || '' : svgInfo.wordmark || ''}
|
||||
alt={svgInfo.title}
|
||||
title={svgInfo.title}
|
||||
loading="lazy"
|
||||
/>
|
||||
{:else}
|
||||
<img
|
||||
class="hidden dark:block mb-4 mt-2 h-10"
|
||||
src={typeof svgInfo.route !== 'string' ? svgInfo.route.dark : svgInfo.route}
|
||||
@ -120,6 +140,7 @@
|
||||
title={svgInfo.title}
|
||||
loading="lazy"
|
||||
/>
|
||||
{/if}
|
||||
<!-- Title -->
|
||||
<div class="mb-3 flex flex-col items-center justify-center">
|
||||
<p class="truncate text-[15px] font-medium text-balance text-center select-all">
|
||||
@ -167,6 +188,7 @@
|
||||
title="Copy to clipboard"
|
||||
on:click={() => {
|
||||
const svgHasTheme = typeof svgInfo.route !== 'string';
|
||||
const svgWordmarkHasTheme = typeof svgInfo.wordmark !== 'string';
|
||||
|
||||
if (!svgHasTheme) {
|
||||
copyToClipboard(
|
||||
@ -268,6 +290,17 @@
|
||||
>
|
||||
<LinkIcon size={iconSize} strokeWidth={iconStroke} />
|
||||
</a>
|
||||
{#if svgInfo.wordmark !== undefined}
|
||||
<button
|
||||
title="Wordmark SVG"
|
||||
on:click={() => {
|
||||
wordmarkSvg = !wordmarkSvg;
|
||||
}}
|
||||
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
|
||||
>
|
||||
<CaseSensitive size={iconSize} strokeWidth={iconStroke} />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</CardSpotlight>
|
||||
|
||||
@ -32,6 +32,10 @@ export const svgs: iSVG[] = [
|
||||
light: '/library/vercel.svg',
|
||||
dark: '/library/vercel_dark.svg'
|
||||
},
|
||||
wordmark: {
|
||||
light: '/library/vercel_wordmark.svg',
|
||||
dark: '/library/vercel_wordmark_dark.svg'
|
||||
},
|
||||
url: 'https://vercel.com/'
|
||||
},
|
||||
{
|
||||
|
||||
@ -10,5 +10,11 @@ export interface iSVG {
|
||||
dark: string;
|
||||
light: string;
|
||||
};
|
||||
wordmark?:
|
||||
| string // for backwards compat of when theme support was not added
|
||||
| {
|
||||
dark: string;
|
||||
light: string;
|
||||
};
|
||||
url: string;
|
||||
}
|
||||
|
||||
1
static/library/vercel_wordmark.svg
Normal file
1
static/library/vercel_wordmark.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" viewBox="0 0 284 65"><path d="M141.68 16.25c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zm117.14-14.5c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zm-39.03 3.5c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9v-46h9zM37.59.25l36.95 64H.64l36.95-64zm92.38 5l-27.71 48-27.71-48h10.39l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10v14.8h-9v-34h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" /><!-- With love, the ▲ team --></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
1
static/library/vercel_wordmark_dark.svg
Normal file
1
static/library/vercel_wordmark_dark.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" viewBox="0 0 284 65"><path d="M141.68 16.25c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zm117.14-14.5c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zm-39.03 3.5c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9v-46h9zM37.59.25l36.95 64H.64l36.95-64zm92.38 5l-27.71 48-27.71-48h10.39l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10v14.8h-9v-34h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" /><!-- With love, the ▲ team --></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in New Issue
Block a user