✨ Upgrade svgCard, theme, transition & warning components to svelte 5

src/components/svgCard.svelte

@@ -28,22 +28,26 @@
   import { insertSVG as figmaInsertSVG } from '@/figma/insert-svg';
 
   // Props:
-  export let svgInfo: iSVG;
-  export let searchTerm: string;
+  interface Props {
+    svgInfo: iSVG;
+    searchTerm: string;
+  }
 
-  let isInFigma = false;
+  let { svgInfo, searchTerm }: Props = $props();
+
+  let isInFigma = $state(false);
   onMount(() => {
     const searchParams = new URLSearchParams(window.location.search);
     isInFigma = searchParams.get('figma') === '1';
   });
 
   // Wordmark SVG:
-  let wordmarkSvg = false;
-  $: {
+  let wordmarkSvg = $state(false);
+  $effect(() => {
     if (searchTerm) {
       wordmarkSvg = false;
     }
-  }
+  });
 
   const insertSVG = async (url?: string) => {
     const content = (await getSvgContent(url)) as string;
@@ -56,7 +60,7 @@
 
   // Max Categories:
   let maxVisibleCategories = 1;
-  let moreTagsOptions = false;
+  let moreTagsOptions = $state(false);
 
   // Global Styles:
   const globalImageStyles = 'mb-4 mt-2 h-10 select-none pointer-events-none';
@@ -156,7 +160,7 @@
     {#if isInFigma}
       <button
         title="Insert to figma"
-        on:click={() => {
+        onclick={() => {
           const svgHasTheme = typeof svgInfo.route !== 'string';
 
           if (!svgHasTheme) {
@@ -210,7 +214,7 @@
     {#if svgInfo.wordmark !== undefined}
       <button
         title={wordmarkSvg ? 'Show logo SVG' : 'Show wordmark SVG'}
-        on:click={() => {
+        onclick={() => {
           wordmarkSvg = !wordmarkSvg;
         }}
         class={btnStyles}

src/components/theme.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
   import { toggleMode, mode } from 'mode-watcher';
-
-  // Icons:
   import { MoonIcon, SunIcon } from 'lucide-svelte';
 </script>
 
-<button on:click={toggleMode} aria-label="Toggle dark mode" class="opacity-80 hover:opacity-100">
+<button onclick={toggleMode} aria-label="Toggle dark mode" class="opacity-80 hover:opacity-100">
   {#if $mode === 'light'}
     <SunIcon size={20} strokeWidth={1.5} />
   {:else}

src/components/transition.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import { fly } from 'svelte/transition';
-  export let pathname: string = '';
+
+  interface TransitionProps {
+    pathname?: string;
+    children?: Snippet;
+  }
+
+  let { pathname = '', children }: TransitionProps = $props();
 </script>
 
 {#key pathname}
   <div in:fly={{ x: 0, y: 23, duration: 450 }}>
-    <slot />
+    {@render children?.()}
   </div>
 {/key}

src/components/warning.svelte

@@ -4,7 +4,7 @@
   import { buttonStyles } from '@/ui/styles';
   import { cn } from '@/utils/cn';
 
-  let warning = false;
+  let warning = $state(false);
   let warningName = 'svgl_warn_message';
   const initialValue = browser ? window.localStorage.getItem(warningName) : true;
 </script>
@@ -33,7 +33,7 @@
     </div>
     <button
       class={cn(buttonStyles, 'h-10 text-sm')}
-      on:click={() => {
+      onclick={() => {
         localStorage.setItem(warningName, 'true');
         warning = true;
       }}