⚡️ Add new icons + update sidebar.

src/components/navbar.svelte

@@ -0,0 +1,86 @@
+<script>
+  import { cn } from '@/utils/cn';
+  import Logo from './logo.svelte';
+  import { ArrowUpRight, CloudyIcon, GithubIcon, TwitterIcon } from 'lucide-svelte';
+  import Theme from './theme.svelte';
+
+  const socials = [
+    {
+      name: 'Twitter',
+      url: 'https://twitter.com/pheralb_',
+      icon: GithubIcon
+    },
+    {
+      name: 'GitHub',
+      url: 'https://github.com/pheralb/svgl',
+      icon: TwitterIcon
+    }
+  ];
+
+  const links = [
+    {
+      name: 'API',
+      url: '/api',
+      icon: CloudyIcon,
+      external: false
+    },
+    {
+      name: 'Submit logo',
+      url: 'https://github.com/pheralb/svgl#-getting-started',
+      icon: ArrowUpRight,
+      external: true
+    }
+  ];
+</script>
+
+<nav
+  class={cn(
+    'dark:bg-neutral-900 bg-neutral-100',
+    'w-full px-5 py-4 border-b border-neutral-200 dark:border-neutral-800',
+    'sticky top-0 z-50',
+    'backdrop-blur-md opacity-95'
+  )}
+>
+  <div class="flex items-center justify-between mx-auto">
+    <div class="flex items-center space-x-2">
+      <a href="/">
+        <div class="flex items-center space-x-2 hover:opacity-80 transition-opacity">
+          <svelte:component this={Logo} />
+          <span class="text-[19px] font-medium tracking-wide">svgl</span>
+          <p class="text-neutral-500">v4.0.0</p>
+        </div>
+      </a>
+    </div>
+    <div class="flex items-center space-x-7">
+      <div class="flex items-center space-x-4 divide-x divide-neutral-300 dark:divide-neutral-700">
+        {#each links as link}
+          <a
+            href={link.url}
+            target={link.external ? '_blank' : '_self'}
+            class="flex items-center hover:opacity-80 transition-opacity text-[15px] pl-3"
+          >
+            {#if !link.external}
+              <svelte:component this={link.icon} size={16} strokeWidth={1.5} class="mr-2" />
+            {/if}
+            <span>{link.name}</span>
+            {#if link.external}
+              <svelte:component this={link.icon} size={16} strokeWidth={1.5} class="ml-1" />
+            {/if}
+          </a>
+        {/each}
+      </div>
+      <div class="flex items-center space-x-3">
+        {#each socials as social}
+          <a
+            href={social.url}
+            target="_blank"
+            class="flex items-center space-x-1 hover:opacity-80 transition-opacity"
+          >
+            <svelte:component this={social.icon} size={20} strokeWidth={1.5} />
+          </a>
+        {/each}
+        <Theme />
+      </div>
+    </div>
+  </div>
+</nav>

src/components/search.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { SearchIcon } from 'lucide-svelte';
   export let searchTerm: string;
   export let placeholder: string = 'Search...';
   export let clearSearch: () => void;
@@ -9,7 +10,7 @@
 <div class="relative w-full">
   <div class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
     <div class="pointer-events-none">
-      <MagnifyingGlass size={18} weight={searchTerm ? 'duotone' : 'regular'} />
+      <SearchIcon size={18} strokeWidth={searchTerm ? 2.5 : 1.5} />
     </div>
   </div>
   <input

src/components/svgCard.svelte

@@ -41,7 +41,7 @@
 
 <CardSpotlight>
   <div class="flex flex-col items-center justify-center rounded-md p-4">
-    <img src={svgInfo.route} alt={svgInfo.title} class="mb-4 mt-2 h-10" />
+    <img src={svgInfo.route} alt={svgInfo.title} class="mb-4 mt-2 h-10" loading="lazy" />
     <div class="mb-3 flex flex-col items-center justify-center">
       <p class="truncate text-[15px] font-medium">{svgInfo.title}</p>
       <a

src/components/theme.svelte

@@ -35,12 +35,10 @@
   }
 
   // Icons:
-  import Moon from 'phosphor-svelte/lib/Moon';
+  import { MoonIcon, SunIcon } from 'lucide-svelte';
-  import Sun from 'phosphor-svelte/lib/Sun';
 </script>
 
 <svelte:head>
-  <!-- set dark mode class based on user preference / device settings (in head to avoid FOUC) -->
   <script>
     if (
       localStorage.theme === 'dark' ||
@@ -53,15 +51,11 @@
   </script>
 </svelte:head>
 
-<button
+<button on:click={toggle} aria-label="Toggle dark mode">
-  on:click={toggle}
-  class="duration-100 hover:-translate-y-0.5 focus:outline-none"
-  aria-label="Toggle dark mode"
->
   <!-- moon icon -->
   {#if dark}
-    <Sun size={18} />
+    <SunIcon size={20} strokeWidth={1.5} />
   {:else}
-    <Moon size={18} />
+    <MoonIcon size={20} strokeWidth={1.5} />
   {/if}
 </button>

src/routes/+layout.svelte

@@ -13,11 +13,8 @@
 
   // Icons:
   import Heart from 'phosphor-svelte/lib/Heart';
-  import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight';
   import ArrowLeft from 'phosphor-svelte/lib/ArrowLeft';
-  import Star from 'phosphor-svelte/lib/Star';
+  import { ArrowUpRight } from 'lucide-svelte';
-  import GithubLogo from 'phosphor-svelte/lib/GithubLogo';
-  import Box from 'phosphor-svelte/lib/Cube';
 
   // Toaster:
   import { Toaster } from 'svelte-sonner';
@@ -25,32 +22,24 @@
   // Components for all pages:
   import Transition from '@/components/transition.svelte';
   import Container from '@/components/container.svelte';
-  import Theme from '@/components/theme.svelte';
 
   // Layout:
   import Navbar from '@/components/navbar.svelte';
+  import { cn } from '@/utils/cn';
 </script>
 
 <Navbar />
 <main>
   <aside
-    class="z-50 w-full overflow-y-auto overflow-x-hidden border-b border-neutral-300 dark:border-neutral-800 md:fixed md:left-0 md:h-full md:w-60 md:border-none md:pb-10"
+    class={cn(
+      'z-50 w-full overflow-y-auto overflow-x-hidden',
+      'dark:border-neutral-800 md:fixed md:left-0 md:h-full md:w-56 md:pb-10',
+      'bg-neutral-100 dark:bg-neutral-900',
+      'backdrop-blur-md opacity-95',
+      'border-r border-neutral-200 dark:border-neutral-800'
+    )}
   >
     <div class="px-6 py-6">
-      <div class="mb-3 border-b border-neutral-300 pb-3 dark:border-neutral-700/40">
-        <div class="flex items-center justify-between">
-          <a href="/">
-            <div
-              class="flex items-center space-x-2 duration-150 hover:text-neutral-500 dark:hover:text-neutral-300"
-            >
-              <h3 class="text-xl font-medium">svgl</h3>
-              <p class="text-neutral-500">v3.2.2</p>
-            </div>
-          </a>
-          <Theme />
-        </div>
-        <p class="mt-2 font-medium text-neutral-400">✨ Optimized SVGs for web</p>
-      </div>
       <div
         class="flex items-center space-x-1 overflow-y-auto border-b border-neutral-300 pb-3 dark:border-neutral-700/40 md:mb-3 md:flex-col md:space-x-0 md:space-y-1 md:overflow-y-visible"
       >
@@ -77,53 +66,21 @@
           >
         {/each}
       </div>
-      <div
-        class="mt-3 flex flex-row items-center space-x-2 border-b border-neutral-300 pb-3 dark:border-neutral-700/40 md:mt-0 md:flex-col md:space-x-0 md:space-y-1"
-      >
-        <a
-          href="https://github.com/pheralb/svgl#-getting-started"
-          target="_blank"
-          class="flex w-full items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
-        >
-          <div><Box size={18} /></div>
-          <span>Submit logo</span>
-          <div><ArrowUpRight size={12} /></div>
-        </a>
-        <a
-          href="https://github.com/pheralb/svgl"
-          target="_blank"
-          class="flex w-full items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
-        >
-          <div class="flex items-center space-x-2">
-            <div><GithubLogo size={18} /></div>
-            <span class="flex items-center justify-center">Repository</span>
-            {#if data.stars}
-              <div class="flex items-center space-x-1 text-neutral-600 dark:text-neutral-400">
-                <div>
-                  <Star size={14} weight="duotone" class="text-yellow-700 dark:text-yellow-500" />
-                </div>
-                <span>{data.stars}</span>
-              </div>
-            {/if}
-            <div><ArrowUpRight size={12} /></div>
-          </div>
-        </a>
-      </div>
       <a
         href="https://twitter.com/pheralb_"
         target="_blank"
-        class="mt-5 flex items-center space-x-2 duration-100 hover:text-dark dark:text-neutral-400 dark:hover:text-white"
+        class="mt-5 md:flex hidden items-center space-x-2 duration-100 hover:text-dark dark:text-neutral-400 dark:hover:text-white"
       >
         <Heart color="#991b1b" size={18} weight={'duotone'} />
         <div class="flex items-center space-x-1">
           <p class="text-muted text-sm">Created by pheralb</p>
-          <ArrowUpRight size={12} />
+          <ArrowUpRight size={14} />
         </div>
       </a>
     </div>
   </aside>
-  <div class="py-2 md:ml-60 md:py-6">
+  <div class="py-2 md:ml-56 md:py-2">
-    {#if data.pathname !== '/'}
+    {#if data.pathname !== '/' && data.pathname !== 'directory'}
       <Container>
         <a href="/">
           <div