feat: add to switch between Logo and Wordmark

src/components/svgCard.svelte

@@ -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,20 +110,37 @@
 <CardSpotlight>
   <div class="flex flex-col items-center justify-center rounded-md p-4">
     <!-- Image -->
-    <img
+    {#if wordmarkSvg == true}
-      class="hidden dark:block mb-4 mt-2 h-10"
+      <img
-      src={typeof svgInfo.route !== 'string' ? svgInfo.route.dark : svgInfo.route}
+        class="hidden dark:block mb-4 mt-2 h-10"
-      alt={svgInfo.title}
+        src={typeof svgInfo.wordmark !== 'string' ? svgInfo.wordmark?.dark || '' : svgInfo.wordmark || ''}
-      title={svgInfo.title}
+        alt={svgInfo.title}
-      loading="lazy"
+        title={svgInfo.title}
-    />
+        loading="lazy"
-    <img
+      />
-      class="block dark:hidden mb-4 mt-2 h-10"
+      <img
-      src={typeof svgInfo.route !== 'string' ? svgInfo.route.light : svgInfo.route}
+        class="block dark:hidden mb-4 mt-2 h-10"
-      alt={svgInfo.title}
+        src={typeof svgInfo.wordmark !== 'string' ? svgInfo.wordmark?.light || '' : svgInfo.wordmark || ''}
-      title={svgInfo.title}
+        alt={svgInfo.title}
-      loading="lazy"
+        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}
+        alt={svgInfo.title}
+        title={svgInfo.title}
+        loading="lazy"
+      />
+      <img
+        class="block dark:hidden mb-4 mt-2 h-10"
+        src={typeof svgInfo.route !== 'string' ? svgInfo.route.light : svgInfo.route}
+        alt={svgInfo.title}
+        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>

src/data/svgs.ts

@@ -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/'
   },
   {

src/types/svg.ts

@@ -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;
 }

static/library/vercel_wordmark.svg

@@ -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>

static/library/vercel_wordmark_dark.svg

@@ -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>