Use new icons

src/lib/components/CardButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   interface Props {
     icon?: import("svelte").Snippet
@@ -25,6 +26,6 @@
     </div>
   </div>
   <div class="hidden h-14 w-14 items-center justify-end sm:flex">
-    <Icon size={7} icon="alt-arrow-right" />
+    <Icon size={7} icon={AltArrowRight} />
   </div>
 </div>

src/lib/components/Collapse.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {slide} from "@lib/transition"
+  import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   interface Props {
     title?: import("svelte").Snippet
@@ -23,7 +24,7 @@
     class="absolute right-8 top-8 h-4 w-4 cursor-pointer transition-all"
     class:rotate-90={!isOpen}
     onclick={toggle}>
-    <Icon icon="alt-arrow-down" />
+    <Icon icon={AltArrowDown} />
   </button>
   {@render props.title?.()}
   {@render props.description?.()}

src/lib/components/Confirm.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import {preventDefault} from "@lib/html"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -42,12 +44,12 @@
   <p class="text-center">{message}</p>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={loading}>
       <Spinner {loading}>Confirm</Spinner>
-      <Icon icon="alt-arrow-right" />
+      <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>
 </form>

src/lib/components/DateTimeInput.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import {DateInput} from "date-picker-svelte"
   import {secondsToDate, dateToSeconds} from "@welshman/lib"
+  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
+  import CalendarMinimalistic from "@assets/icons/calendar-minimalistic.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
 
@@ -72,11 +74,11 @@
     <div class="absolute right-2 top-0 flex h-12 cursor-pointer items-center gap-2">
       {#if date}
         <Button onclick={clear} class="h-5">
-          <Icon icon="close-circle" />
+          <Icon icon={CloseCircle} />
         </Button>
       {:else}
         <Button onclick={focusDate} class="h-5">
-          <Icon icon="calendar-minimalistic" />
+          <Icon icon={CalendarMinimalistic} />
         </Button>
       {/if}
     </div>

src/lib/components/Icon.svelte

@@ -6,98 +6,6 @@
 </style>
 
 <script lang="ts">
-  import {switcher} from "@welshman/lib"
-  import AddSquare from "@assets/icons/Add Square.svg?dataurl"
-  import ArrowsALogout2 from "@assets/icons/Arrows ALogout 2.svg?dataurl"
-  import ArrowDown from "@assets/icons/Arrow Down.svg?dataurl"
-  import Bell from "@assets/icons/Bell.svg?dataurl"
-  import Bookmark from "@assets/icons/Bookmark.svg?dataurl"
-  import BillList from "@assets/icons/Bill List.svg?dataurl"
-  import Code2 from "@assets/icons/Code 2.svg?dataurl"
-  import Document from "@assets/icons/Document.svg?dataurl"
-  import Earth from "@assets/icons/Earth.svg?dataurl"
-  import Pen from "@assets/icons/Pen.svg?dataurl"
-  import PenNewSquare from "@assets/icons/Pen New Square.svg?dataurl"
-  import HeadphonesRound from "@assets/icons/Headphones Round.svg?dataurl"
-  import AddCircle from "@assets/icons/Add Circle.svg?dataurl"
-  import AltArrowDown from "@assets/icons/Alt Arrow Down.svg?dataurl"
-  import AltArrowRight from "@assets/icons/Alt Arrow Right.svg?dataurl"
-  import AltArrowUp from "@assets/icons/Alt Arrow Up.svg?dataurl"
-  import AltArrowLeft from "@assets/icons/Alt Arrow Left.svg?dataurl"
-  import ArrowRight from "@assets/icons/Arrow Right.svg?dataurl"
-  import Bag from "@assets/icons/Bag.svg?dataurl"
-  import Bolt from "@assets/icons/Bolt.svg?dataurl"
-  import CalendarAdd from "@assets/icons/Calendar Add.svg?dataurl"
-  import CalendarMinimalistic from "@assets/icons/Calendar Minimalistic.svg?dataurl"
-  import ChatRound from "@assets/icons/Chat Round.svg?dataurl"
-  import CheckCircle from "@assets/icons/Check Circle.svg?dataurl"
-  import ClipboardText from "@assets/icons/Clipboard Text.svg?dataurl"
-  import ClockCircle from "@assets/icons/Clock Circle.svg?dataurl"
-  import CloseCircle from "@assets/icons/Close Circle.svg?dataurl"
-  import Copy from "@assets/icons/Copy.svg?dataurl"
-  import Compass from "@assets/icons/Compass.svg?dataurl"
-  import CompassBig from "@assets/icons/Compass Big.svg?dataurl"
-  import CPU from "@assets/icons/CPU.svg?dataurl"
-  import Danger from "@assets/icons/Danger.svg?dataurl"
-  import Exit from "@assets/icons/Exit.svg?dataurl"
-  import File from "@assets/icons/File.svg?dataurl"
-  import FireMinimalistic from "@assets/icons/Fire Minimalistic.svg?dataurl"
-  import GallerySend from "@assets/icons/Gallery Send.svg?dataurl"
-  import Ghost from "@assets/icons/Ghost.svg?dataurl"
-  import Hashtag from "@assets/icons/Hashtag.svg?dataurl"
-  import HamburgerMenu from "@assets/icons/Hamburger Menu.svg?dataurl"
-  import HandPills from "@assets/icons/Hand Pills.svg?dataurl"
-  import Heart from "@assets/icons/Heart.svg?dataurl"
-  import HomeSmile from "@assets/icons/Home Smile.svg?dataurl"
-  import Inbox from "@assets/icons/Inbox.svg?dataurl"
-  import InfoCircle from "@assets/icons/Info Circle.svg?dataurl"
-  import InfoSquare from "@assets/icons/Info Square.svg?dataurl"
-  import Key from "@assets/icons/Key.svg?dataurl"
-  import KeyMinimalisticSquare3 from "@assets/icons/Key Minimalistic Square 3.svg?dataurl"
-  import Letter from "@assets/icons/Letter.svg?dataurl"
-  import LinkRound from "@assets/icons/Link Round.svg?dataurl"
-  import Lock from "@assets/icons/Lock.svg?dataurl"
-  import Login from "@assets/icons/Login.svg?dataurl"
-  import Login2 from "@assets/icons/Login 2.svg?dataurl"
-  import Magnifer from "@assets/icons/Magnifer.svg?dataurl"
-  import Mailbox from "@assets/icons/Mailbox.svg?dataurl"
-  import MapPoint from "@assets/icons/Map Point.svg?dataurl"
-  import MenuDots from "@assets/icons/Menu Dots.svg?dataurl"
-  import MenuDotsCircle from "@assets/icons/Menu Dots Circle.svg?dataurl"
-  import Moon from "@assets/icons/Moon.svg?dataurl"
-  import NotesMinimalistic from "@assets/icons/Notes Minimalistic.svg?dataurl"
-  import Pallete2 from "@assets/icons/Pallete 2.svg?dataurl"
-  import Paperclip from "@assets/icons/Paperclip.svg?dataurl"
-  import Plain from "@assets/icons/Plain.svg?dataurl"
-  import QRCode from "@assets/icons/QR Code.svg?dataurl"
-  import QuestionSquare from "@assets/icons/Question Square.svg?dataurl"
-  import RemoteControllerMinimalistic from "@assets/icons/Remote Controller Minimalistic.svg?dataurl"
-  import Rocket2 from "@assets/icons/Rocket 2.svg?dataurl"
-  import Reply from "@assets/icons/Reply.svg?dataurl"
-  import Server from "@assets/icons/Server.svg?dataurl"
-  import Settings from "@assets/icons/Settings.svg?dataurl"
-  import SettingsMinimalistic from "@assets/icons/Settings Minimalistic.svg?dataurl"
-  import ShieldUser from "@assets/icons/Shield User.svg?dataurl"
-  import Station from "@assets/icons/Station.svg?dataurl"
-  import TagHorizontal from "@assets/icons/Tag Horizontal.svg?dataurl"
-  import Ticket from "@assets/icons/Ticket.svg?dataurl"
-  import ShareCircle from "@assets/icons/Share Circle.svg?dataurl"
-  import ShopMinimalistic from "@assets/icons/Shop Minimalistic.svg?dataurl"
-  import SmileCircle from "@assets/icons/Smile Circle.svg?dataurl"
-  import SquareShareLine from "@assets/icons/Square Share Line.svg?dataurl"
-  import SortVertical from "@assets/icons/Sort Vertical.svg?dataurl"
-  import Star from "@assets/icons/Star.svg?dataurl"
-  import StarFallMinimalistic2 from "@assets/icons/Star Fall Minimalistic 2.svg?dataurl"
-  import TrashBin2 from "@assets/icons/Trash Bin 2.svg?dataurl"
-  import UFO3 from "@assets/icons/UFO 3.svg?dataurl"
-  import UserHeart from "@assets/icons/User Heart.svg?dataurl"
-  import UserCircle from "@assets/icons/User Circle.svg?dataurl"
-  import UserRounded from "@assets/icons/User Rounded.svg?dataurl"
-  import Wallet from "@assets/icons/Wallet.svg?dataurl"
-  import Widget from "@assets/icons/Widget.svg?dataurl"
-  import WidgetAdd from "@assets/icons/Widget Add.svg?dataurl"
-  import WiFiRouterRound from "@assets/icons/Wi-Fi Router Round.svg?dataurl"
-
   const {
     icon,
     size = 5,
@@ -109,106 +17,9 @@
   } = $props()
 
   const px = size * 4
-
-  const data = switcher(icon, {
-    "add-square": AddSquare,
-    "arrows-a-logout-2": ArrowsALogout2,
-    "arrow-down": ArrowDown,
-    bell: Bell,
-    bookmark: Bookmark,
-    "bill-list": BillList,
-    "code-2": Code2,
-    document: Document,
-    earth: Earth,
-    pen: Pen,
-    "pen-new-square": PenNewSquare,
-    "headphones-round": HeadphonesRound,
-    "add-circle": AddCircle,
-    "alt-arrow-down": AltArrowDown,
-    "alt-arrow-right": AltArrowRight,
-    "alt-arrow-up": AltArrowUp,
-    "alt-arrow-left": AltArrowLeft,
-    "arrow-right": ArrowRight,
-    bag: Bag,
-    bolt: Bolt,
-    "calendar-add": CalendarAdd,
-    "calendar-minimalistic": CalendarMinimalistic,
-    "chat-round": ChatRound,
-    "check-circle": CheckCircle,
-    "clipboard-text": ClipboardText,
-    "clock-circle": ClockCircle,
-    "close-circle": CloseCircle,
-    copy: Copy,
-    compass: Compass,
-    "compass-big": CompassBig,
-    cpu: CPU,
-    danger: Danger,
-    exit: Exit,
-    file: File,
-    "fire-minimalistic": FireMinimalistic,
-    "gallery-send": GallerySend,
-    ghost: Ghost,
-    hashtag: Hashtag,
-    "hamburger-menu": HamburgerMenu,
-    "hand-pills": HandPills,
-    heart: Heart,
-    "home-smile": HomeSmile,
-    inbox: Inbox,
-    "info-circle": InfoCircle,
-    "info-square": InfoSquare,
-    key: Key,
-    "key-minimalistic-square-3": KeyMinimalisticSquare3,
-    letter: Letter,
-    "link-round": LinkRound,
-    login: Login,
-    lock: Lock,
-    "login-2": Login2,
-    magnifer: Magnifer,
-    mailbox: Mailbox,
-    "map-point": MapPoint,
-    "menu-dots": MenuDots,
-    "menu-dots-circle": MenuDotsCircle,
-    moon: Moon,
-    "notes-minimalistic": NotesMinimalistic,
-    "pallete-2": Pallete2,
-    paperclip: Paperclip,
-    plain: Plain,
-    "qr-code": QRCode,
-    "question-square": QuestionSquare,
-    reply: Reply,
-    "remote-controller-minimalistic": RemoteControllerMinimalistic,
-    "rocket-2": Rocket2,
-    "share-circle": ShareCircle,
-    "shop-minimalistic": ShopMinimalistic,
-    "smile-circle": SmileCircle,
-    server: Server,
-    settings: Settings,
-    "settings-minimalistic": SettingsMinimalistic,
-    "shield-user": ShieldUser,
-    station: Station,
-    "tag-horizontal": TagHorizontal,
-    ticket: Ticket,
-    "trash-bin-2": TrashBin2,
-    "ufo-3": UFO3,
-    "square-share-line": SquareShareLine,
-    "sort-vertical": SortVertical,
-    star: Star,
-    "star-fall-minimalistic-2": StarFallMinimalistic2,
-    "user-heart": UserHeart,
-    "user-circle": UserCircle,
-    "user-rounded": UserRounded,
-    wallet: Wallet,
-    widget: Widget,
-    "widget-add": WidgetAdd,
-    "wifi-router-round": WiFiRouterRound,
-  })
-
-  if (!data) {
-    throw new Error(`Invalid icon: ${icon}`)
-  }
 </script>
 
 <div
   class="inline-block {restProps.class}"
-  style="mask-image: url({data}); width: {px}px; height: {px}px; min-width: {px}px; min-height: {px}px; background-color: currentcolor;">
+  style="mask-image: url({icon}); width: {px}px; height: {px}px; min-width: {px}px; min-height: {px}px; background-color: currentcolor;">
 </div>

src/lib/components/InputList.svelte

@@ -2,6 +2,9 @@
   import type {Snippet} from "svelte"
   import {append, removeAt, replaceAt, insertAt} from "@welshman/lib"
   import Button from "@lib/components/Button.svelte"
+  import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
+  import HamburgerMenu from "@assets/icons/hamburger-menu.svg?dataurl"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
 
   type Props = {
@@ -56,7 +59,7 @@
       ondragover={e => handleDragOver(e, index)}
       ondragend={handleDragEnd}>
       <Button onclick={() => removeItem(index)}>
-        <Icon icon="trash-bin-2" />
+        <Icon icon={TrashBin2} />
       </Button>
       <input
         type="text"
@@ -65,12 +68,12 @@
         {placeholder}
         oninput={e => updateItem(index, e.currentTarget.value)} />
       <div class="cursor-move" role="button" aria-label="Drag handle">
-        <Icon icon="hamburger-menu" />
+        <Icon icon={HamburgerMenu} />
       </div>
     </div>
   {/each}
   <Button onclick={addItem} class="btn btn-link w-fit px-0">
-    <Icon icon="add-circle" size={5} />
+    <Icon icon={AddCircle} size={5} />
     {#if addLabel}
       {@render addLabel?.()}
     {:else}

src/lib/components/InputPicture.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import {randomId} from "@welshman/lib"
   import {preventDefault, stopPropagation} from "@lib/html"
+  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
+  import GallerySend from "@assets/icons/gallery-send.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
 
   interface Props {
@@ -84,14 +87,14 @@
           tabindex="-1"
           onmousedown={stopPropagation(onClear)}
           ontouchstart={stopPropagation(onClear)}>
-          <Icon icon="close-circle" class="scale-150 !bg-base-300" />
+          <Icon icon={CloseCircle} class="scale-150 !bg-base-300" />
         </span>
       {:else}
-        <Icon icon="add-circle" class="scale-150 !bg-base-300" />
+        <Icon icon={AddCircle} class="scale-150 !bg-base-300" />
       {/if}
     </div>
     {#if !file}
-      <Icon icon="gallery-send" size={7} />
+      <Icon icon={GallerySend} size={7} />
     {/if}
   </label>
 </form>

src/lib/components/InputProfilePicture.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import {randomId} from "@welshman/lib"
   import {preventDefault, stopPropagation} from "@lib/html"
+  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
+  import GallerySend from "@assets/icons/gallery-send.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
 
   interface Props {
@@ -84,14 +87,14 @@
           tabindex="-1"
           onmousedown={stopPropagation(onClear)}
           ontouchstart={stopPropagation(onClear)}>
-          <Icon icon="close-circle" class="scale-150 !bg-base-300" />
+          <Icon icon={CloseCircle} class="scale-150 !bg-base-300" />
         </span>
       {:else}
-        <Icon icon="add-circle" class="scale-150 !bg-base-300" />
+        <Icon icon={AddCircle} class="scale-150 !bg-base-300" />
       {/if}
     </div>
     {#if !url}
-      <Icon icon="gallery-send" size={7} />
+      <Icon icon={GallerySend} size={7} />
     {/if}
   </label>
 </form>