⚙️ Update icons alias & create raycast warning message

src/components/copySvg.svelte

@@ -12,7 +12,7 @@
   import { copyToClipboard as figmaCopyToClipboard } from '@/figma/copy-to-clipboard';
   import { buttonStyles } from '@/ui/styles';
   import { cn } from '@/utils/cn';
-  import ReactIcon from './reactIcon.svelte';
+  import ReactIcon from './icons/reactIcon.svelte';
 
   // Props:
   export let iconSize = 24;

src/components/headerLogoLink.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { toast } from 'svelte-sonner';
+
+  import * as ContextMenu from '@/ui/context-menu';
+  import { CopyIcon } from 'lucide-svelte';
+  import Logo from './icons/logo.svelte';
+  import ReactIcon from './icons/reactIcon.svelte';
+
+  import { clipboard } from '@/utils/clipboard';
+  import { getSvgContent } from '@/utils/getSvgContent';
+  import { getReactComponentCode } from '@/utils/getReactComponentCode';
+
+  const logoUrl = '/library/svgl.svg';
+
+  const copyToClipboard = async () => {
+    const content = await getSvgContent(logoUrl);
+    await clipboard(content);
+    toast.success('Copied to clipboard', {
+      description: `Svgl - Library`
+    });
+  };
+
+  let isLoading = false;
+
+  const convertSvgReactComponent = async (tsx: boolean) => {
+    isLoading = true;
+
+    const title = 'svgl';
+    const content = await getSvgContent(logoUrl);
+    const dataComponent = { code: content, typescript: tsx, name: title };
+    const { data, error } = await getReactComponentCode(dataComponent);
+
+    if (error || !data) {
+      toast.error('Failed to fetch React component', {
+        description: `${error ?? ''}`,
+        duration: 5000
+      });
+      return;
+    }
+
+    await clipboard(data);
+
+    toast.success(`Copied as React ${tsx ? 'TSX' : 'JSX'} component`, {
+      description: `Svgl - Library`
+    });
+
+    isLoading = false;
+  };
+</script>
+
+<ContextMenu.Root>
+  <ContextMenu.Trigger class="flex items-center space-x-2">
+    <a href="/" aria-label="Go to the SVGL v4.1 home page">
+      <div class="flex items-center space-x-2 opacity-100 hover:opacity-80 transition-opacity">
+        <svelte:component this={Logo} />
+        <span class="text-[19px] font-medium tracking-wide hidden md:block">svgl</span>
+        <p class="text-neutral-400 hidden md:block font-mono">v4.3</p>
+      </div>
+    </a>
+  </ContextMenu.Trigger>
+  <ContextMenu.Content>
+    <ContextMenu.Item on:click={() => copyToClipboard()}>
+      <CopyIcon size={16} strokeWidth={2} />
+      <span>Copy as SVG</span>
+    </ContextMenu.Item>
+    <ContextMenu.Item on:click={() => convertSvgReactComponent(false)}>
+      <ReactIcon iconSize={18} color="#60a5fa" />
+      <span>Copy as React JSX Component</span>
+    </ContextMenu.Item>
+    <ContextMenu.Item on:click={() => convertSvgReactComponent(true)}>
+      <ReactIcon iconSize={18} color="#2563eb" />
+      <span>Copy as React TSX Component</span>
+    </ContextMenu.Item>
+  </ContextMenu.Content>
+</ContextMenu.Root>

src/components/navbar.svelte

@@ -2,12 +2,13 @@
   export let currentPath: string;
 
   import { cn } from '@/utils/cn';
-  import Logo from './logo.svelte';
+  import Logo from './icons/logo.svelte';
   import Theme from './theme.svelte';
 
   import { ArrowUpRight, CloudyIcon } from 'lucide-svelte';
-  import XIcon from './xIcon.svelte';
+  import XIcon from './icons/xIcon.svelte';
-  import GithubIcon from './githubIcon.svelte';
+  import GithubIcon from './icons/githubIcon.svelte';
+  import HeaderLogoLink from './headerLogoLink.svelte';
 
   const externalLinks = [
     {
@@ -42,17 +43,8 @@
     'backdrop-blur-md dark:bg-neutral-900/90 bg-white/90'
   )}
 >
-  <!-- Se le puso un aria-label al href="/" -->
   <div class="flex items-center justify-between mx-auto">
-    <div class="flex items-center space-x-2">
+    <HeaderLogoLink />
-      <a href="/" aria-label="Go to the SVGL v4.1 home page">
-        <div class="flex items-center space-x-2 opacity-100 hover:opacity-80 transition-opacity">
-          <svelte:component this={Logo} />
-          <span class="text-[19px] font-medium tracking-wide hidden md:block">svgl</span>
-          <p class="text-neutral-400 hidden md:block font-mono">v4.2</p>
-        </div>
-      </a>
-    </div>
     <div class="flex items-center space-x-0 md:space-x-7">
       <div
         class="flex items-center md:space-x-4 divide-x divide-neutral-300 dark:divide-neutral-700"

src/components/warningRaycast.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { browser } from '$app/environment';
+  import { buttonStyles } from '@/ui/styles';
+  import { cn } from '@/utils/cn';
+  import RaycastIcon from './icons/raycastIcon.svelte';
+  import { ArrowUpLeft, ArrowUpRight, X } from 'lucide-svelte';
+  import XIcon from './icons/xIcon.svelte';
+
+  let warning = false;
+  let warningName = 'svgl_warning_raycast_message';
+  const initialValue = browser ? window.localStorage.getItem(warningName) : true;
+</script>
+
+{#if !warning && !initialValue}
+  <div
+    class="flex items-center w-full justify-between md:flex-row flex-col md:space-x-2 space-x-0 space-y-2 md:space-y-0 py-2 px-3 bg-neutral-100/60 dark:bg-neutral-800/40 text-neutral-700 dark:text-neutral-300 border-b border-neutral-200 dark:border-neutral-800"
+  >
+    <div class="flex items-center space-x-2">
+      <RaycastIcon
+        iconSize={22}
+        className="mr-1 flex-shrink-0 text-rose-600 dark:text-rose-500 animate-pulse"
+      />
+      <p>
+        Update your <strong>Raycast</strong> extension to the latest version to use the new SVGL API.
+      </p>
+    </div>
+    <div class="flex items-center space-x-2">
+      <a
+        href="https://x.com/1weiho/status/1828077090824241445"
+        class={cn(buttonStyles, 'h-10 text-sm')}
+        target="_blank"
+      >
+        <XIcon iconSize={14} />
+        <span>How to update</span>
+        <ArrowUpRight size={14} strokeWidth={2} />
+      </a>
+      <button
+        class={cn(buttonStyles, 'h-10 text-sm')}
+        on:click={() => {
+          localStorage.setItem(warningName, 'true');
+          warning = true;
+        }}
+      >
+        <X size={14} strokeWidth={2} />
+        <span>Close</span>
+      </button>
+    </div>
+  </div>
+{/if}

src/routes/+layout.svelte

@@ -30,7 +30,7 @@
 
   // Layout:
   import Navbar from '@/components/navbar.svelte';
-  import WarningNewApi from '@/components/warningNewApi.svelte';
+  import WarningRaycast from '@/components/warningRaycast.svelte';
 </script>
 
 <ModeWatcher />
@@ -88,7 +88,7 @@
   </aside>
   <div class="ml-0 md:ml-56 pb-6">
     <Warning />
-    <WarningNewApi />
+    <WarningRaycast />
     <Transition pathname={data.pathname}>
       <slot />
     </Transition>