feat(app): add more icons (#2697)

unionlabs · Aug 8, 2024 · ca7e64d · ca7e64d
2 parents 329ddba + 63bbac6
commit ca7e64d
Show file tree

Hide file tree

Showing 26 changed files with 467 additions and 154 deletions.
diff --git a/app/src/lib/components/search/cmdk.svelte b/app/src/lib/components/search/cmdk.svelte
@@ -21,6 +21,8 @@ import BrainIcon from "virtual:icons/lucide/brain"
 import Badge from "$lib/components/ui/badge/badge.svelte"
 import * as Command from "$lib/components/ui/command/index.ts"
 import DollarSignIcon from "virtual:icons/lucide/badge-dollar-sign"
+import UnionIcon from "$lib/components/union-icons/index.svelte"
+import { mode } from "mode-watcher"
 
 let searchInput = writable("")
 searchInput.update($searchInput => $searchInput.replaceAll(" ", ""))
@@ -145,7 +147,7 @@ const DISABLE_TAB_INDEX = -1
     filter={(value, search) => (value.includes(search) ? 1 : 0)}
 
  class={cn('text-foreground bg-background')}
-    
+
   >
     <Command.Input
       type="text"
@@ -200,15 +202,16 @@ const DISABLE_TAB_INDEX = -1
           let:attrs
           tabindex={DISABLE_TAB_INDEX}
           class={cn(
-            'hover:cursor-pointer',
+            'hover:cursor-pointer group',
             'focus:ring-1 focus:ring-union-accent-300 focus:ring-opacity-75 focus:rounded-none my-1',
           )}
           onSelect={() => {
             goto(`/faucet`)
             commandDialogOpen = false
           }}
         >
-          <SmileIcon class="mr-2 size-5" />
+
+          <UnionIcon theme="mono" name="faucet" class="mr-2 size-5"/>
           <span>Get tokens from faucet</span>
           {#if $page.route.id?.startsWith('/faucet')}
             <Badge
@@ -222,7 +225,7 @@ const DISABLE_TAB_INDEX = -1
             </Badge>
           {/if}
         </Command.Item>
-  
+
         <Command.Item
           let:attrs
           tabindex={DISABLE_TAB_INDEX}
@@ -235,7 +238,11 @@ const DISABLE_TAB_INDEX = -1
             commandDialogOpen = false
           }}
         >
-          <DollarSignIcon class="mr-2 size-5" />
+          <UnionIcon
+                  theme="mono"
+                  name="transfers"
+                  class="mr-2 size-5"
+          />
           <span>Transfer assets across chains</span>
           {#if $page.route.id?.startsWith('/transfer')}
             <Badge
@@ -249,10 +256,10 @@ const DISABLE_TAB_INDEX = -1
             </Badge>
           {/if}
         </Command.Item>
-        
+
       </Command.Group>
       <Command.Separator />
-      
+
       <Command.Group heading="Explore Data" class={cn('text-black bg-background')}>
         {@const userAddresses = [$sepoliaStore?.address, $cosmosStore?.address].filter(Boolean)}
         <Command.Item
@@ -268,7 +275,11 @@ const DISABLE_TAB_INDEX = -1
             commandDialogOpen = false
           }}
         >
-          <TableIcon class="mr-2 size-5" />
+          <UnionIcon
+                  theme="mono"
+                  name="usertransfers"
+                  class="mr-2 size-5"
+          />
           <span>Your transfers</span>
           {#if $page.route.id?.startsWith('/explorer/address')}
             <Badge
@@ -294,7 +305,11 @@ const DISABLE_TAB_INDEX = -1
             commandDialogOpen = false
           }}
         >
-          <BrainIcon class="mr-2 size-5" />
+          <UnionIcon
+                  theme="mono"
+                  name="channel"
+                  class="mr-2 size-5"
+          />
           <span>All transfers</span>
           {#if $page.route.id?.startsWith('/explorer/transfers')}
             <Badge
@@ -320,7 +335,11 @@ const DISABLE_TAB_INDEX = -1
             commandDialogOpen = false
           }}
         >
-          <BrainIcon class="mr-2 size-5" />
+          <UnionIcon
+                  theme="mono"
+                  name="ibcconnections"
+                  class="mr-2 size-5"
+          />
           <span>IBC connections</span>
           {#if $page.route.id?.startsWith('/explorer/connections')}
             <Badge
@@ -334,7 +353,7 @@ const DISABLE_TAB_INDEX = -1
             </Badge>
           {/if}
         </Command.Item>
-        
+
         <Command.Item
           let:attrs
           tabindex={DISABLE_TAB_INDEX}
@@ -347,7 +366,11 @@ const DISABLE_TAB_INDEX = -1
             commandDialogOpen = false
           }}
         >
-          <BrainIcon class="mr-2 size-5" />
+          <UnionIcon
+                  theme="mono"
+                  name="ibcchannels"
+                  class="mr-2 size-5"
+          />
           <span>IBC channels</span>
           {#if $page.route.id?.startsWith('/explorer/channels')}
             <Badge
@@ -374,7 +397,11 @@ const DISABLE_TAB_INDEX = -1
             commandDialogOpen = false
           }}
         >
-          <BrainIcon class="mr-2 size-5" />
+          <UnionIcon
+                  theme="mono"
+                  name="hubblestatus"
+                  class="mr-2 size-5"
+          />
           <span>Hubble index status</span>
           {#if $page.route.id?.startsWith('/explorer/index-status')}
             <Badge
@@ -388,11 +415,11 @@ const DISABLE_TAB_INDEX = -1
             </Badge>
           {/if}
         </Command.Item>
-        
+
       </Command.Group>
 
 
-      
+
     </Command.List>
   </Command.Root>
 </Command.Dialog>

diff --git a/app/src/lib/components/union-icons/color/icon-home-color.svelte b/app/src/lib/components/union-icons/color/icon-home-color.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+let className: string | undefined = undefined
+export { className as class }
+</script>
+
+<svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_402_385)">
+    <rect x="2.5" y="2.5" width="60" height="60" rx="2.5" fill="white" stroke="black" stroke-width="5"/>
+    <path d="M15 26.6667V50H50V26.6667L32.5 15L15 26.6667Z" stroke="black" stroke-width="5"/>
+    <rect x="31.25" y="36.25" width="2.5" height="12.5" fill="black" stroke="black" stroke-width="2.5"/>
+    <rect x="31.25" y="26.25" width="2.5" height="2.5" stroke="#A0ECFD" stroke-width="2.5"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_402_385">
+      <rect width="65" height="65" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
+
diff --git a/app/src/lib/components/union-icons/color/icon-settings-color.svelte b/app/src/lib/components/union-icons/color/icon-settings-color.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+let className: string | undefined = undefined
+export { className as class }
+</script>
+
+<svg class={className} viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_402_324)">
+    <rect x="2.5" y="2.5" width="60" height="60" rx="2.5" fill="white" stroke="black" stroke-width="5"/>
+    <rect x="30" y="10" width="5" height="15" fill="black"/>
+    <rect x="30" y="40" width="5" height="15" fill="black"/>
+    <rect x="10" y="30" width="15" height="5" fill="black"/>
+    <rect x="40" y="30" width="15" height="5" fill="black"/>
+    <rect x="14.8242" y="18.3578" width="5" height="15" transform="rotate(-45 14.8242 18.3578)" fill="black"/>
+    <rect x="36.0352" y="39.571" width="5" height="15" transform="rotate(-45 36.0352 39.571)" fill="black"/>
+    <rect x="14.8242" y="46.6422" width="15" height="5" transform="rotate(-45 14.8242 46.6422)" fill="black"/>
+    <rect x="36.0352" y="25.429" width="15" height="5" transform="rotate(-45 36.0352 25.429)" fill="black"/>
+    <circle cx="32.5" cy="32.5" r="2.5" fill="#A0ECFD"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_402_324">
+      <rect width="65" height="65" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>