Use new icons

src/routes/settings/+layout.svelte

@@ -1,6 +1,13 @@
 <script lang="ts">
   import type {Snippet} from "svelte"
   import {fly} from "@lib/transition"
+  import UserCircle from "@assets/icons/user-circle.svg?dataurl"
+  import Wallet from "@assets/icons/wallet.svg?dataurl"
+  import Server from "@assets/icons/server.svg?dataurl"
+  import Settings from "@assets/icons/settings.svg?dataurl"
+  import Moon from "@assets/icons/moon.svg?dataurl"
+  import InfoSquare from "@assets/icons/info-square.svg?dataurl"
+  import Exit from "@assets/icons/logout-3.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
   import SecondaryNav from "@lib/components/SecondaryNav.svelte"
@@ -25,37 +32,37 @@
   <SecondaryNavSection>
     <div in:fly|local>
       <SecondaryNavItem href="/settings/profile">
-        <Icon icon="user-circle" /> Profile
+        <Icon icon={UserCircle} /> Profile
       </SecondaryNavItem>
     </div>
     <div in:fly|local>
       <SecondaryNavItem href="/settings/wallet">
-        <Icon icon="wallet" /> Wallet
+        <Icon icon={Wallet} /> Wallet
       </SecondaryNavItem>
     </div>
     <div in:fly|local={{delay: 50}}>
       <SecondaryNavItem href="/settings/relays">
-        <Icon icon="server" /> Relays
+        <Icon icon={Server} /> Relays
       </SecondaryNavItem>
     </div>
     <div in:fly|local={{delay: 100}}>
       <SecondaryNavItem href="/settings">
-        <Icon icon="settings" /> Settings
+        <Icon icon={Settings} /> Settings
       </SecondaryNavItem>
     </div>
     <div in:fly|local={{delay: 150}}>
       <SecondaryNavItem onclick={toggleTheme}>
-        <Icon icon="moon" /> Theme
+        <Icon icon={Moon} /> Theme
       </SecondaryNavItem>
     </div>
     <div in:fly|local={{delay: 200}}>
       <SecondaryNavItem href="/settings/about">
-        <Icon icon="info-square" /> About
+        <Icon icon={InfoSquare} /> About
       </SecondaryNavItem>
     </div>
     <div in:fly|local={{delay: 250}}>
       <SecondaryNavItem class="text-error hover:text-error" onclick={logout}>
-        <Icon icon="exit" /> Log Out
+        <Icon icon={Exit} /> Log Out
       </SecondaryNavItem>
     </div>
   </SecondaryNavSection>

src/routes/settings/about/+page.svelte

@@ -6,6 +6,10 @@
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import {PLATFORM_NAME} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
+  import Code from "@assets/icons/code-2.svg?dataurl"
+  import Global from "@assets/icons/global.svg?dataurl"
+  import Pen from "@assets/icons/pen.svg?dataurl"
+  import HeadphonesRound from "@assets/icons/headphones-round.svg?dataurl"
 
   const hash = import.meta.env.VITE_BUILD_HASH
 
@@ -51,7 +55,7 @@
             Icons by <Link
               external
               class="link"
-              href="https://www.figma.com/community/file/1166831539721848736">480 Design</Link>
+              href="https://www.figma.com/community/file/1396367368966571051">480 Design</Link>
           </p>
           {#if hash}
             <p class="text-xs">Running build {hash.slice(0, 8)}</p>
@@ -60,22 +64,22 @@
         <div class="flex justify-center gap-4">
           <div class="tooltip" data-tip="Source Code">
             <Link external href="https://github.com/coracle-social/flotilla">
-              <Icon icon="code-2" />
+              <Icon icon={Code} />
             </Link>
           </div>
           <div class="tooltip" data-tip="About the Developer">
             <Link external href="https://coracle.tools">
-              <Icon icon="earth" />
+              <Icon icon={Global} />
             </Link>
           </div>
           <div class="tooltip" data-tip="Dev Blog">
             <Link external href="https://hodlbod.npub.pro/">
-              <Icon icon="pen" />
+              <Icon icon={Pen} />
             </Link>
           </div>
           <div class="tooltip" data-tip="Podcast">
             <Link external href="https://fountain.fm/show/vnmoRQQ50siLFRE8k061">
-              <Icon icon="headphones-round" />
+              <Icon icon={HeadphonesRound} />
             </Link>
           </div>
         </div>

src/routes/settings/profile/+page.svelte

@@ -4,6 +4,15 @@
   import {displayPubkey, displayProfile} from "@welshman/util"
   import {pubkey, session, displayNip05, deriveProfile} from "@welshman/app"
   import {slideAndFade} from "@lib/transition"
+  import PenNewSquare from "@assets/icons/pen-new-square.svg?dataurl"
+  import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
+  import Key from "@assets/icons/key-minimalistic.svg?dataurl"
+  import LinkRound from "@assets/icons/link-round.svg?dataurl"
+  import Copy from "@assets/icons/copy.svg?dataurl"
+  import Settings from "@assets/icons/settings-minimalistic.svg?dataurl"
+  import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
+  import AltArrowUp from "@assets/icons/alt-arrow-up.svg?dataurl"
+  import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -54,7 +63,7 @@
         </div>
       </div>
       <Button class="center btn btn-circle btn-neutral -mr-4 -mt-4 h-12 w-12" onclick={startEdit}>
-        <Icon icon="pen-new-square" />
+        <Icon icon={PenNewSquare} />
       </Button>
     </div>
     {#key $profile?.about}
@@ -69,7 +78,7 @@
         {/snippet}
         {#snippet input()}
           <label class="input input-bordered flex w-full items-center gap-2">
-            <Icon icon="user-rounded" />
+            <Icon icon={UserRounded} />
             <input readonly value={$session.email} class="grow" />
           </label>
         {/snippet}
@@ -86,18 +95,18 @@
     <FieldInline>
       {#snippet label()}
         <p class="flex items-center gap-3">
-          <Icon icon="key" />
+          <Icon icon={Key} />
           Public Key
         </p>
       {/snippet}
       {#snippet input()}
         <label class="input input-bordered flex w-full items-center justify-between gap-2">
           <div class="row-2 flex-grow items-center">
-            <Icon icon="link-round" />
+            <Icon icon={LinkRound} />
             <input readonly class="ellipsize flex-grow" value={npub} />
           </div>
           <Button class="flex items-center" onclick={copyNpub}>
-            <Icon icon="copy" />
+            <Icon icon={Copy} />
           </Button>
         </label>
       {/snippet}
@@ -112,16 +121,16 @@
       <FieldInline>
         {#snippet label()}
           <p class="flex items-center gap-3">
-            <Icon icon="key" />
+            <Icon icon={Key} />
             Private Key
           </p>
         {/snippet}
         {#snippet input()}
           <label class="input input-bordered flex w-full items-center gap-2">
-            <Icon icon="link-round" />
+            <Icon icon={LinkRound} />
             <input readonly value={$session.secret} class="grow" type="password" />
             <Button class="flex items-center" onclick={copyNsec}>
-              <Icon icon="copy" />
+              <Icon icon={Copy} />
             </Button>
           </label>
         {/snippet}
@@ -136,21 +145,21 @@
   <div class="card2 bg-alt shadow-xl">
     <div class="flex items-center justify-between">
       <strong class="flex items-center gap-3">
-        <Icon icon="settings" />
+        <Icon icon={Settings} />
         Advanced
       </strong>
       <Button onclick={() => (showAdvanced = !showAdvanced)}>
         {#if showAdvanced}
-          <Icon icon="alt-arrow-down" />
+          <Icon icon={AltArrowDown} />
         {:else}
-          <Icon icon="alt-arrow-up" />
+          <Icon icon={AltArrowUp} />
         {/if}
       </Button>
     </div>
     {#if showAdvanced}
       <div transition:slideAndFade class="flex flex-col gap-2 pt-4">
         <Button class="btn btn-outline btn-error" onclick={startDelete}>
-          <Icon icon="trash-bin-2" />
+          <Icon icon={TrashBin2} />
           Delete your profile
         </Button>
       </div>

src/routes/settings/relays/+page.svelte

@@ -10,6 +10,11 @@
   import {pushModal} from "@app/util/modal"
   import {discoverRelays} from "@app/core/requests"
   import {setRelayPolicy, setInboxRelayPolicy} from "@app/core/commands"
+  import Globus from "@assets/icons/globus.svg?dataurl"
+  import Inbox from "@assets/icons/inbox.svg?dataurl"
+  import Mailbox from "@assets/icons/mailbox.svg?dataurl"
+  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
 
   const readRelayUrls = derivePubkeyRelays($pubkey!, RelayMode.Read)
   const writeRelayUrls = derivePubkeyRelays($pubkey!, RelayMode.Write)
@@ -48,7 +53,7 @@
   <Collapse class="card2 bg-alt column gap-4">
     {#snippet title()}
       <h2 class="flex items-center gap-3 text-xl">
-        <Icon icon="earth" />
+        <Icon icon={Globus} />
         Outbox Relays
       </h2>
     {/snippet}
@@ -66,14 +71,14 @@
             class="tooltip flex items-center"
             data-tip="Stop using this relay"
             onclick={() => removeWriteRelay(url)}>
-            <Icon icon="close-circle" />
+            <Icon icon={CloseCircle} />
           </Button>
         </RelayItem>
       {:else}
         <p class="text-center text-sm">No relays found</p>
       {/each}
       <Button class="btn btn-primary mt-2" onclick={addWriteRelay}>
-        <Icon icon="add-circle" />
+        <Icon icon={AddCircle} />
         Add Relay
       </Button>
     </div>
@@ -81,7 +86,7 @@
   <Collapse class="card2 bg-alt column gap-4">
     {#snippet title()}
       <h2 class="flex items-center gap-3 text-xl">
-        <Icon icon="inbox" />
+        <Icon icon={Inbox} />
         Inbox Relays
       </h2>
     {/snippet}
@@ -98,14 +103,14 @@
             class="tooltip flex items-center"
             data-tip="Stop using this relay"
             onclick={() => removeReadRelay(url)}>
-            <Icon icon="close-circle" />
+            <Icon icon={CloseCircle} />
           </Button>
         </RelayItem>
       {:else}
         <p class="text-center text-sm">No relays found</p>
       {/each}
       <Button class="btn btn-primary mt-2" onclick={addReadRelay}>
-        <Icon icon="add-circle" />
+        <Icon icon={AddCircle} />
         Add Relay
       </Button>
     </div>
@@ -113,7 +118,7 @@
   <Collapse class="card2 bg-alt column gap-4">
     {#snippet title()}
       <h2 class="flex items-center gap-3 text-xl">
-        <Icon icon="mailbox" />
+        <Icon icon={Mailbox} />
         Messaging Relays
       </h2>
     {/snippet}
@@ -131,14 +136,14 @@
             class="tooltip flex items-center"
             data-tip="Stop using this relay"
             onclick={() => removeInboxRelay(url)}>
-            <Icon icon="close-circle" />
+            <Icon icon={CloseCircle} />
           </Button>
         </RelayItem>
       {:else}
         <p class="text-center text-sm">No relays found</p>
       {/each}
       <Button class="btn btn-primary mt-2" onclick={addInboxRelay}>
-        <Icon icon="add-circle" />
+        <Icon icon={AddCircle} />
         Add Relay
       </Button>
     </div>

src/routes/settings/wallet/+page.svelte

@@ -9,6 +9,10 @@
   import WalletDisconnect from "@app/components/WalletDisconnect.svelte"
   import {pushModal} from "@app/util/modal"
   import {getWebLn} from "@app/core/commands"
+  import Wallet2 from "@assets/icons/wallet.svg?dataurl"
+  import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
+  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
+  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
 
   const connect = () => pushModal(WalletConnect)
 
@@ -19,17 +23,17 @@
   <div class="card2 bg-alt flex flex-col gap-6 shadow-xl">
     <div class="flex items-center justify-between">
       <strong class="flex items-center gap-3">
-        <Icon icon="wallet" />
+        <Icon icon={Wallet2} />
         Wallet
       </strong>
       {#if $session?.wallet}
         <div class="flex items-center gap-2 text-sm text-success">
-          <Icon icon="check-circle" size={4} />
+          <Icon icon={CheckCircle} size={4} />
           Connected
         </div>
       {:else}
         <Button class="btn btn-primary btn-sm" onclick={connect}>
-          <Icon icon="add-circle" />
+          <Icon icon={AddCircle} />
           Connect Wallet
         </Button>
       {/if}
@@ -77,7 +81,7 @@
           </div>
         {/if}
         <Button class="btn btn-neutral btn-sm" onclick={disconnect}>
-          <Icon icon="close-circle" />
+          <Icon icon={CloseCircle} />
           Disconnect Wallet
         </Button>
       {:else}