migrate icons

10 files changed, 21 insertions, 35 deletions

diff --git a/src/components/404.svelte b/src/components/404.svelte
index 7c2e45ee..2f5f7acd 100644
--- a/src/components/404.svelte
+++ b/src/components/404.svelte
@@ -1,15 +1,16 @@
 <script>
-  import Icon from "$comp/Icon.svelte";
   import { t } from "$lib/translations";
 </script>
 
 <div class="flex justify-center items-center mt-20">
   <div class="space-y-5 text-center">
     <a href="/">
-      <Icon icon="logo" style="mx-auto" />
+      <iconify-icon noobserver icon="coinos:logo" width="224" class="mx-auto"
+      ></iconify-icon>
     </a>
 
-    <Icon icon="question" style="mx-auto w-56" />
+    <iconify-icon noobserver icon="ph:question-bold" class="mx-auto w-56"
+    ></iconify-icon>
 
     <h1 class="font-bold text-5xl">{$t("404.404")}</h1>
     <p>{$t("404.pageNotFound")}</p>
diff --git a/src/components/About.svelte b/src/components/About.svelte
index 8f74b47c..ae1955c1 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -1,7 +1,5 @@
 <script>
-  import { onMount } from "svelte";
-  import Icon from "$comp/Icon.svelte";
-  import Image from "$comp/Image.svelte";
+  import { onMount } from "svelte";  import Image from "$comp/Image.svelte";
   import { t } from "$lib/translations";
 
   let team = [
diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index 2d1dba56..898f94c9 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -3,9 +3,7 @@
   import WalletPass from "$comp/WalletPass.svelte";
   import { run } from "svelte/legacy";
   import { onMount } from "svelte";
-  import { goto } from "$app/navigation";
-  import Icon from "$comp/Icon.svelte";
-  import Balance from "$comp/Balance.svelte";
+  import { goto } from "$app/navigation";  import Balance from "$comp/Balance.svelte";
   import { t } from "$lib/translations";
   import { arkkey } from "$lib/ark";
 
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 10d7604c..f499d587 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -22,11 +22,11 @@
   );
 
   const links = $derived([
-    // {
-    //   href: `/${user?.username}`,
-    //   icon: "ph:house-bold",
-    //   label: "Home",
-    // },
+    {
+      href: `/${user?.username}`,
+      icon: "ph:house-bold",
+      label: "Home",
+    },
     // {
     //   href: `/${user?.username}/receive`,
     //   icon: "ph:hand-coins-bold",
diff --git a/src/components/HowItWorksCard.svelte b/src/components/HowItWorksCard.svelte
index c076a3e9..d69d7666 100644
--- a/src/components/HowItWorksCard.svelte
+++ b/src/components/HowItWorksCard.svelte
@@ -1,6 +1,4 @@
-<script>
-  import Icon from "./Icon.svelte";
-  import { t } from "$lib/translations";
+<script>  import { t } from "$lib/translations";
   let { image, stepID } = $props();
 </script>
 
diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte
deleted file mode 100644
index 6d55bf94..00000000
--- a/src/components/Icon.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-  let { icon, style = undefined } = $props();
-</script>
-
-<img src="/icons/{icon}.svg" alt={icon} class={style} />
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
index 812452cd..fe260753 100644
--- a/src/components/LandingHero.svelte
+++ b/src/components/LandingHero.svelte
@@ -1,8 +1,6 @@
 <script>
   import { focus } from "$lib/utils";
-  import { goto } from "$app/navigation";
-  import Icon from "$comp/Icon.svelte";
-  import Image from "$comp/Image.svelte";
+  import { goto } from "$app/navigation";  import Image from "$comp/Image.svelte";
   import { t } from "$lib/translations";
 </script>
 
diff --git a/src/components/LoadingSplash.svelte b/src/components/LoadingSplash.svelte
index 41477a4e..8ed0429f 100644
--- a/src/components/LoadingSplash.svelte
+++ b/src/components/LoadingSplash.svelte
@@ -1,7 +1,4 @@
-<script>
-  import Icon from "$comp/Icon.svelte";
-</script>
-
 <div class="flex justify-center items-center">
-  <Icon icon="logo" style="mt-[calc(50vh-72px)]" />
+  <iconify-icon noobserver icon="coinos:logo" width="224" class="mt-[calc(50vh-72px)]"
+  ></iconify-icon>
 </div>
diff --git a/src/components/Pinpad.svelte b/src/components/Pinpad.svelte
index 65c9bd6c..b3438864 100644
--- a/src/components/Pinpad.svelte
+++ b/src/components/Pinpad.svelte
@@ -1,7 +1,5 @@
 <script>
-  import Left from "$comp/Left.svelte";
-  import Icon from "$comp/Icon.svelte";
-  import { focus, post, warning } from "$lib/utils";
+  import Left from "$comp/Left.svelte";  import { focus, post, warning } from "$lib/utils";
   import { t } from "$lib/translations";
 
   let { v = $bindable(), cancel } = $props();
diff --git a/src/components/WalletPass.svelte b/src/components/WalletPass.svelte
index 9c4c35bb..e3291f61 100644
--- a/src/components/WalletPass.svelte
+++ b/src/components/WalletPass.svelte
@@ -3,7 +3,6 @@
 
   import { focus } from "$lib/utils";
   import { t } from "$lib/translations";
-  import Icon from "$comp/Icon.svelte";
   let { cancel, password = $bindable(), submit } = $props();
   let revealPassword = $state();
 </script>
@@ -43,7 +42,11 @@
           onclick={() => (revealPassword = !revealPassword)}
           class="absolute right-5 top-1/2"
         >
-          <Icon icon={revealPassword ? "eye" : "eye-off"} />
+          <iconify-icon
+            noobserver
+            icon={revealPassword ? "ph:eye-bold" : "ph:eye-slash-bold"}
+            width="32"
+          ></iconify-icon>
         </button>
       </div>
       <div class="w-full flex justify-center gap-2">