⚡️ 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 Sun from 'phosphor-svelte/lib/Sun';
+  import { MoonIcon, SunIcon } from 'lucide-svelte';
 </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
-  on:click={toggle}
-  class="duration-100 hover:-translate-y-0.5 focus:outline-none"
-  aria-label="Toggle dark mode"
->
+<button on:click={toggle} 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>