fix: Replace use of unplugin-icons ~icon/ imports with @lucide/svelte package for default icons to remove Vite configuration. Fixes #618 (#625)

* fix: Replace use of unplugin-icons `~icon/` imports with `@lucide/svelte` package for default icons to remove Vite configuration. Fixes #618

* Improve discord/bluesky icon size

* Move `@lucide/svelte` from `devDependencies` to `dependencies`

* Update ApiDocs import

Author: techniq

.changeset/stale-words-allow.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+fix: Replace use of unplugin-icons `~icon/` imports with `@lucide/svelte` package for default icons to remove Vite configuration. Fixes #618

packages/svelte-ux/package.json

@@ -61,6 +61,7 @@
     "@layerstack/svelte-table": "1.0.1-next.14",
     "@layerstack/tailwind": "2.0.0-next.17",
     "@layerstack/utils": "2.0.0-next.14",
+    "@lucide/svelte": "^0.534.0",
     "d3-array": "^3.2.4",
     "d3-scale": "^4.0.2",
     "esm-env": "^1.2.2",

packages/svelte-ux/src/lib/components/ApiDocs.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import LucideGroup from '~icons/lucide/group';
-  import LucideRadio from '~icons/lucide/radio';
+  import LucideGroup from '@lucide/svelte/icons/group';
+  import LucideRadio from '@lucide/svelte/icons/radio';
 
   import Button from './Button.svelte';
   import EmptyMessage from './EmptyMessage.svelte';

packages/svelte-ux/src/lib/components/Breadcrumb.svelte

@@ -2,6 +2,7 @@
   import { cls } from '@layerstack/tailwind';
   import { getComponentClasses } from './theme.js';
   import { getSettings } from './settings.js';
+  import Icon from './Icon.svelte';
 
   export let items: TItem[] = [];
   export let divider: string | undefined = undefined;
@@ -35,8 +36,7 @@
         {#if divider}
           <div class="divider opacity-25">{divider}</div>
         {:else}
-          {@const Icon = icons.chevronRight}
-          <Icon class="divider opacity-25" />
+          <Icon data={icons.chevronRight} class="divider opacity-25" />
         {/if}
       </slot>
     {/if}

packages/svelte-ux/src/lib/components/Button.svelte

@@ -476,15 +476,15 @@
     <span in:slide={{ axis: 'x', duration: 200 }}>
       {#if typeof icon === 'function'}
         <!-- Component, such as unplugin-icons -->
-        {@const Icon = icon}
-        <Icon class={cls('pointer-events-none', settingsClasses.icon, classes.icon)} />
+        <Icon data={icon} class={cls('pointer-events-none', settingsClasses.icon, classes.icon)} />
       {:else if typeof icon === 'string' || 'icon' in icon}
         <!-- font path/url/etc or font-awesome IconDefinition -->
         <Icon
           data={asIconData(icon)}
           class={cls('pointer-events-none', settingsClasses.icon, classes.icon)}
         />
       {:else}
+        <!-- Icon props -->
         <Icon class={cls('pointer-events-none', settingsClasses.icon, classes.icon)} {...icon} />
       {/if}
     </span>

packages/svelte-ux/src/lib/components/ErrorNotification.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Button from './Button.svelte';
   import Dialog from './Dialog.svelte';
+  import Icon from './Icon.svelte';
   import Notification from './Notification.svelte';
   import { getSettings } from './settings.js';
   import Toggle from './Toggle.svelte';
@@ -19,7 +20,7 @@
 <Toggle let:on={open} let:toggle>
   <Notification actionsPlacement="below" closeIcon on:close>
     <div slot="icon" class="self-start">
-      <icons.alert class="text-danger" />
+      <Icon data={icons.alert} class="text-danger" />
     </div>
     <div slot="title">{title}</div>
 

packages/svelte-ux/src/lib/components/Field.svelte

@@ -126,8 +126,7 @@
               <span class={cls('mr-3', rounded && !$$slots.prepend && 'ml-3')}>
                 {#if typeof icon === 'function'}
                   <!-- Component, such as unplugin-icons -->
-                  {@const Icon = icon}
-                  <Icon class="text-surface-content/50" />
+                  <Icon data={icon} class="text-surface-content/50" />
                 {:else if typeof icon === 'string' || 'icon' in icon}
                   <!-- font path/url/etc or font-awesome IconDefinition -->
                   <Icon data={asIconData(icon)} class="text-surface-content/50" />
@@ -209,12 +208,11 @@
             <slot name="append" />
 
             {#if error}
-              <icons.info class="text-danger" />
+              <Icon data={icons.info} class="text-danger" />
             {:else if iconRight}
               {#if typeof iconRight === 'function'}
                 <!-- Component, such as unplugin-icons -->
-                {@const Icon = iconRight}
-                <Icon class="text-surface-content/50" />
+                <Icon data={iconRight} class="text-surface-content/50" />
               {:else if typeof iconRight === 'string' || 'icon' in iconRight}
                 <!-- font path/url/etc or font-awesome IconDefinition -->
                 <Icon data={asIconData(iconRight)} class="text-surface-content/50" />

packages/svelte-ux/src/lib/components/Icon.svelte

@@ -90,7 +90,8 @@
   <Icon
     class={cls(
       'Icon',
-      'icon-container inline-block shrink-0 align-middle fill-current',
+      // 'icon-container _inline-block shrink-0 _align-middle _fill-current',
+      'size-[1.2em]', // default scale of unplugin-icons - https://github.com/unplugin/unplugin-icons?tab=readme-ov-file#options
       settingsClasses.root,
       classes.root,
       className

packages/svelte-ux/src/lib/components/ListItem.svelte

@@ -89,16 +89,14 @@
         >
           {#if typeof icon === 'function'}
             <!-- Component, such as unplugin-icons -->
-            {@const Icon = icon}
-            <Icon class={cls(settingsClasses.icon, classes.icon)} />
+            <Icon data={icon} class={cls(settingsClasses.icon, classes.icon)} />
           {:else if typeof icon === 'string' || 'icon' in icon}
             <Icon data={asIconData(icon)} class={cls(settingsClasses.icon, classes.icon)} />
           {/if}
         </Avatar>
       {:else if typeof icon === 'function'}
         <!-- Component, such as unplugin-icons -->
-        {@const Icon = icon}
-        <Icon class={cls(settingsClasses.icon, classes.icon)} />
+        <Icon data={icon} class={cls(settingsClasses.icon, classes.icon)} />
       {:else if typeof icon === 'string' || 'icon' in icon}
         <Icon data={asIconData(icon)} class={cls(settingsClasses.icon, classes.icon)} />
       {/if}

packages/svelte-ux/src/lib/components/MenuButton.svelte

@@ -54,8 +54,8 @@
   {#if menuIcon}
     {#if typeof menuIcon === 'function'}
       <!-- Component, such as unplugin-icons -->
-      {@const Icon = menuIcon}
       <Icon
+        data={menuIcon}
         class={cls(
           'opacity-50 transform transition-all -mr-2 duration-300',
           open && '-rotate-180',