Icons overhaul

.changeset/common-bushes-move.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+feat: Setup default icons on settings() for easy overriding. Change default to lucide (from mdi)

.changeset/true-fans-crash.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+feat: Support component icons (Unplugin icons, etc)

packages/svelte-ux/package.json

@@ -61,7 +61,6 @@
     "@layerstack/svelte-table": "1.0.1-next.12",
     "@layerstack/tailwind": "2.0.0-next.15",
     "@layerstack/utils": "2.0.0-next.12",
-    "@mdi/js": "^7.4.47",
     "d3-array": "^3.2.4",
     "d3-scale": "^4.0.2",
     "esm-env": "^1.2.2",

packages/svelte-ux/src/app.d.ts

@@ -1,53 +1,55 @@
-// export * from 'unplugin-icons/types/svelte';
+import 'unplugin-icons/types/svelte';
 
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 // and what to do when importing types
-declare namespace App {
-  // interface Error {}
-  // interface Locals {}
-
-  interface PageData {
-    meta: {
-      title?: string;
-      description?: string;
-      source?: string;
-      pageSource?: string;
-      api?: SveldJson;
-      features?: string[];
-      related?: string[];
-      hideUsage?: boolean;
-      hideTableOfContents?: boolean;
-      status?: string;
-    };
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+
+    interface PageData {
+      meta: {
+        title?: string;
+        description?: string;
+        source?: string;
+        pageSource?: string;
+        api?: SveldJson;
+        features?: string[];
+        related?: string[];
+        hideUsage?: boolean;
+        hideTableOfContents?: boolean;
+        status?: string;
+      };
+    }
+
+    // interface PageState {}
+    // interface Platform {}
   }
 
-  // interface PageState {}
-  // interface Platform {}
-}
-
-// TODO: Can this be referenced from `@layerstack/svelte-actions` types.d.ts without breaking other things?
-// https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md
-declare namespace svelteHTML {
-  interface HTMLAttributes<T> {
-    // use:intersection
-    'on:intersecting'?: (event: CustomEvent<IntersectionObserverEntry>) => void;
+  // TODO: Can this be referenced from `@layerstack/svelte-actions` types.d.ts without breaking other things?
+  // https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md
+  namespace svelteHTML {
+    interface HTMLAttributes<T> {
+      // use:intersection
+      'on:intersecting'?: (event: CustomEvent<IntersectionObserverEntry>) => void;
 
-    // use:mutate
-    'on:mutate'?: (event: CustomEvent<MutationRecord[]>) => void;
+      // use:mutate
+      'on:mutate'?: (event: CustomEvent<MutationRecord[]>) => void;
 
-    // use:movable
-    'on:movestart'?: (event: CustomEvent<{ x: number; y: number }>) => void;
-    'on:move'?: (event: CustomEvent<{ x: number; y: number; dx: number; dy: number }>) => void;
-    'on:moveend'?: (event: CustomEvent<{ x: number; y: number }>) => void;
+      // use:movable
+      'on:movestart'?: (event: CustomEvent<{ x: number; y: number }>) => void;
+      'on:move'?: (event: CustomEvent<{ x: number; y: number; dx: number; dy: number }>) => void;
+      'on:moveend'?: (event: CustomEvent<{ x: number; y: number }>) => void;
 
-    // use:popover
-    'on:clickOutside'?: (event: CustomEvent) => void;
+      // use:popover
+      'on:clickOutside'?: (event: CustomEvent) => void;
 
-    // use:overflow
-    'on:overflow'?: (event: CustomEvent<{ overflowX: number; overflowY: number }>) => void;
+      // use:overflow
+      'on:overflow'?: (event: CustomEvent<{ overflowX: number; overflowY: number }>) => void;
 
-    // use:longpress
-    'on:longpress'?: (event: CustomEvent) => void;
+      // use:longpress
+      'on:longpress'?: (event: CustomEvent) => void;
+    }
   }
 }

packages/svelte-ux/src/docs/Blockquote.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { mdiInformation } from '@mdi/js';
-  import Icon from '../lib/components/Icon.svelte';
   import { cls } from '@layerstack/tailwind';
+
+  import LucideInfo from '~icons/lucide/info';
 </script>
 
 <div
@@ -10,6 +10,6 @@
     '[&>a]:font-medium [&>a]:underline [&>a]:decoration-dashed [&>a]:decoration-primary/50 [&>a]:underline-offset-2'
   )}
 >
-  <Icon data={mdiInformation} class="text-primary" />
+  <LucideInfo class="text-primary" />
   <slot />
 </div>

packages/svelte-ux/src/docs/ViewSourceButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { ComponentProps } from 'svelte';
-  import { mdiGithub } from '@mdi/js';
+  import LucideGithub from '~icons/lucide/github.svelte';
 
   import Button from '../lib/components/Button.svelte';
   import Code from '../lib/components/Code.svelte';
@@ -29,7 +29,7 @@
         </div>
 
         {#if href}
-          <Button icon={mdiGithub} variant="fill-light" color="primary" {href} target="_blank">
+          <Button icon={LucideGithub} variant="fill-light" color="primary" {href} target="_blank">
             View on Github
           </Button>
         {/if}

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

@@ -1,19 +1,18 @@
 <script lang="ts">
-  import {
-    mdiBullhorn,
-    mdiCodeBraces,
-    mdiGoogleCirclesGroup,
-    mdiInformationOutline,
-  } from '@mdi/js';
+  import LucideGroup from '~icons/lucide/group';
+  import LucideRadio from '~icons/lucide/radio';
 
   import Button from './Button.svelte';
   import EmptyMessage from './EmptyMessage.svelte';
   import Icon from './Icon.svelte';
   import ListItem from './ListItem.svelte';
   import Tooltip from './Tooltip.svelte';
+  import { getSettings } from './settings.js';
 
   export let api: SveldJson;
 
+  const { icons } = getSettings();
+
   function parseSlotProps(slot_props: string) {
     return slot_props
       .slice(1, slot_props.length - 1) // remove '{' and '}'
@@ -32,7 +31,7 @@
       {#each api.props ?? [] as prop}
         <ListItem
           list="type"
-          icon={mdiCodeBraces}
+          icon={icons.codeBraces}
           avatar={{ size: 'sm', class: 'text-xs text-white bg-blue-500' }}
         >
           <div slot="title">{prop.name}</div>
@@ -78,7 +77,7 @@
 
     {#if api.rest_props}
       <div class="text-surface-content/50 text-xs flex gap-2 mt-2 ml-4 items-center">
-        <Icon data={mdiInformationOutline} />
+        <Icon data={icons.info} />
         <span>
           Remaining props are passed to underlying
           {#if api.rest_props.type === 'InlineComponent'}
@@ -116,7 +115,7 @@
       {#each api.slots ?? [] as slot}
         <ListItem
           list="type"
-          icon={mdiGoogleCirclesGroup}
+          icon={LucideGroup}
           avatar={{ size: 'sm', class: 'text-xs text-white bg-purple-500' }}
         >
           <div slot="title">
@@ -159,7 +158,7 @@
       {#each api.events ?? [] as event}
         <ListItem
           list="type"
-          icon={mdiBullhorn}
+          icon={LucideRadio}
           avatar={{ size: 'sm', class: 'text-xs text-white bg-success-500' }}
         >
           <div slot="title">{event.name}</div>
@@ -196,7 +195,7 @@
       {#each api.moduleExports ?? [] as prop}
         <ListItem
           list="type"
-          icon={mdiCodeBraces}
+          icon={icons.codeBraces}
           avatar={{ size: 'sm', class: 'text-xs text-white bg-blue-500' }}
         >
           <div slot="title">{prop.name}</div>

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

@@ -1,15 +1,18 @@
 <script lang="ts">
   import { BROWSER } from 'esm-env';
-  import { mdiMenu } from '@mdi/js';
   import { cls } from '@layerstack/tailwind';
 
   import Breadcrumb from './Breadcrumb.svelte';
   import Button from './Button.svelte';
   import { getComponentClasses } from './theme.js';
   import { getSettings } from './index.js';
+  import type { IconProp } from '$lib/types/index.js';
+
+  const { showDrawer, icons } = getSettings();
+  const settingsClasses = getComponentClasses('AppBar');
 
   export let title: string | number | Array<string | number> = '';
-  export let menuIcon: string | null = mdiMenu;
+  export let menuIcon: IconProp | null = icons.menu;
   let className: string | undefined = undefined;
   export { className as class };
 
@@ -18,9 +21,6 @@
    */
   export let head = true;
 
-  const { showDrawer } = getSettings();
-  const settingsClasses = getComponentClasses('AppBar');
-
   $: titleString = Array.isArray(title) ? title.filter((x) => x).join(' › ') : title.toString();
 
   $: if (BROWSER && head) {

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

@@ -13,6 +13,9 @@
   /** Control whether header should be full width (deafult) or nav should be full height */
   export let headerPosition: 'full' | 'inset' = 'full';
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     aside?: string;
@@ -39,7 +42,7 @@
     '[:where(&_[id])]:scroll-m-[var(--headerHeight)]',
     settingsClasses.root,
     classes.root,
-    $$props.class
+    className
   )}
 >
   <slot />

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

@@ -2,9 +2,10 @@
   import { cls } from '@layerstack/tailwind';
   import Icon from './Icon.svelte';
   import { getComponentClasses } from './theme.js';
+  import type { IconProp } from '$lib/types/index.js';
 
   export let size: 'sm' | 'md' | 'lg' | 'unset' = 'md';
-  export let icon: string | undefined = undefined;
+  export let icon: IconProp | undefined = undefined;
   let className: string | undefined = undefined;
   export { className as class };
 

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

@@ -17,6 +17,9 @@
   }[];
   export let total: number | undefined = undefined;
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   export let classes: {
     root?: string;
     item?: string;
@@ -28,7 +31,7 @@
   }>();
 </script>
 
-<div class={cls('BarStack', 'flex gap-px', settingsClasses.root, classes.root, $$props.class)}>
+<div class={cls('BarStack', 'flex gap-px', settingsClasses.root, classes.root, className)}>
   {#each data as item}
     {@const valuePercent = item.value / (total ?? sum(data, (d) => d.value))}
     <!-- Hide empty -->

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

@@ -1,16 +1,15 @@
 <script lang="ts" generics="TItem">
-  import { mdiChevronRight } from '@mdi/js';
-
-  import Icon from './Icon.svelte';
   import { cls } from '@layerstack/tailwind';
   import { getComponentClasses } from './theme.js';
+  import { getSettings } from './settings.js';
 
   export let items: TItem[] = [];
   export let divider: string | undefined = undefined;
   export let inline = false;
   let className: string | undefined = undefined;
   export { className as class };
 
+  const { icons } = getSettings();
   const settingsClasses = getComponentClasses('Breadcrumb');
 
   $: displayItems = items?.filter((x) => x != null) ?? [];
@@ -36,7 +35,8 @@
         {#if divider}
           <div class="divider opacity-25">{divider}</div>
         {:else}
-          <Icon data={mdiChevronRight} class="divider opacity-25" />
+          {@const Icon = icons.chevronRight}
+          <Icon class="divider opacity-25" />
         {/if}
       </slot>
     {/if}