refactor: replace neoicon with nuxt icon

components/ColorModeButton.vue

@@ -6,13 +6,12 @@
   >
     <ColorScheme placeholder="...">
       <span>{{ currentMode.label }}</span>
-      &nbsp;<NeoIcon :icon="currentMode.icon" />
+      &nbsp;<KIcon :name="currentMode.icon" />
     </ColorScheme>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { NeoIcon } from '@kodadot1/brick'
 import { isMobileDevice } from '@/utils/extension'
 
 const { currentMode, switchToNextMode } = useTheme()

components/ColorModeSwitch.vue

@@ -1,9 +1,9 @@
 <template>
   <ColorScheme>
-    <NeoIcon
+    <KIcon
       v-if="isMobile"
       class="cursor-pointer"
-      :icon="currentMode.icon"
+      :name="currentMode.icon"
       size="medium"
       @click="switchToNextMode"
     />
@@ -17,8 +17,8 @@
     >
       <template #trigger>
         <div class="flex items-center cursor-pointer">
-          <NeoIcon
-            :icon="currentMode.icon"
+          <KIcon
+            :name="currentMode.icon"
             size="medium"
           />
           <span class="ml-1 min-w-[82px]">{{ currentMode?.label }}</span>
@@ -32,9 +32,9 @@
         :active="preference === option.value"
         :value="option"
       >
-        <NeoIcon
+        <KIcon
           class="mr-2"
-          :icon="option.icon"
+          :name="option.icon"
         />
         <span>{{ option.label }}</span>
       </NeoDropdownItem>
@@ -43,7 +43,7 @@
 </template>
 
 <script lang="ts" setup>
-import { NeoDropdown, NeoDropdownItem, NeoIcon } from '@kodadot1/brick'
+import { NeoDropdown, NeoDropdownItem } from '@kodadot1/brick'
 
 const {
   preference,

components/KIcon.vue

@@ -0,0 +1,27 @@
+<template>
+  <Icon
+    :name="name"
+    :class="sizeMap[size]"
+  />
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    name: string
+    size?: 'default' | 'small' | 'medium' | 'large' | '2x' | '3x'
+  }>(),
+  {
+    size: 'default',
+  },
+)
+
+const sizeMap = {
+  'default': 'size-5',
+  'small': 'size-4',
+  'medium': 'size-6',
+  'large': 'size-8',
+  '2x': 'size-10', // fa-2x
+  '3x': 'size-14', // fa-3x
+}
+</script>

components/Navbar.vue

@@ -106,11 +106,9 @@
             >
               {{ $t('drops.drops') }}
 
-              <NeoIcon
-                class="ml-1"
-                icon="fire-flame-curved"
-                pack="fass"
-                variant="primary"
+              <KIcon
+                name="i-mdi:fire"
+                class="text-k-primary ml-1"
               />
             </div>
           </nuxt-link>
@@ -192,15 +190,15 @@
             >
               <span>
                 {{ $t('profile.page') }}
-                <NeoIcon
-                  icon="user-circle"
-                  class="w-4 h-4 ml-2 lg:!ml-0"
+                <KIcon
+                  name="i-mdi:account-circle-outline"
+                  class="ml-1"
                   size="medium"
                 />
               </span>
-              <NeoIcon
+              <KIcon
                 class="icon--right"
-                icon="chevron-right"
+                name="i-mdi:chevron-right"
               />
             </div>
 
@@ -233,7 +231,7 @@
 </template>
 
 <script lang="ts" setup>
-import { NeoButton, NeoIcon } from '@kodadot1/brick'
+import { NeoButton } from '@kodadot1/brick'
 import { nextTick } from 'vue'
 import ShoppingCartButton from './navbar/ShoppingCartButton.vue'
 import { openConnectWalletModal } from '@/components/common/ConnectWallet/useConnectWallet'

components/TheFooter.vue

@@ -32,8 +32,8 @@
                   class="flex items-center"
                 >
                   {{ item.name }}
-                  <NeoIcon
-                    icon="arrow-up-right"
+                  <KIcon
+                    name="i-mdi:arrow-top-right"
                     class="ml-1 text-k-grey"
                   />
                 </a>
@@ -66,8 +66,8 @@
                   class="flex items-center"
                 >
                   {{ item.name }}
-                  <NeoIcon
-                    icon="arrow-up-right"
+                  <KIcon
+                    name="i-mdi:arrow-top-right"
                     class="ml-1 text-k-grey"
                   />
                 </a>
@@ -101,8 +101,8 @@
                 class="flex items-center"
               >
                 {{ item.name }}
-                <NeoIcon
-                  icon="arrow-up-right"
+                <KIcon
+                  name="i-mdi:arrow-top-right"
                   class="ml-1 text-k-grey"
                 />
               </a>
@@ -112,10 +112,9 @@
                 class="flex items-center"
               >
                 {{ item.name }}
-                <NeoIcon
+                <KIcon
                   v-if="item.highlight"
-                  icon="sparkle"
-                  pack="fasr"
+                  name="i-mdi:star-four-points"
                   class="text-k-primary text-xl ml-1"
                 />
               </nuxt-link>
@@ -143,8 +142,8 @@
               class="flex items-center"
             >
               {{ item.name }}
-              <NeoIcon
-                icon="arrow-up-right"
+              <KIcon
+                name="i-mdi:arrow-top-right"
                 class="ml-1 text-k-grey"
               />
             </a>
@@ -163,8 +162,6 @@
 </template>
 
 <script lang="ts" setup>
-import { NeoIcon } from '@kodadot1/brick'
-
 interface Menu {
   name: string
   url: string

components/base/BaseTokenForm.vue

@@ -66,7 +66,7 @@
           key="secondaryFile"
           v-model="vSecondFile"
           :label="$t('mint.nft.cover')"
-          icon="file-image"
+          icon="i-mdi:file-image-outline"
           preview
           accept="image/png, image/jpeg, image/gif"
           expanded

components/base/MediaItem.vue

@@ -31,8 +31,8 @@
       v-if="isLewd && isLewdBlurredLayer"
       class="nsfw-blur flex capitalize items-center justify-center flex-col"
     >
-      <NeoIcon
-        icon="eye-slash"
+      <KIcon
+        name="i-mdi:eye-off-outline"
         class="mb-3"
       />
       <span class="font-bold">
@@ -44,9 +44,8 @@
       v-if="hasNormalTag"
       class="bg-k-shade border-k-grey text-text-color flex items-center justify-center border rounded-md absolute right-3 top-3 image size-6 z-[18]"
     >
-      <NeoIcon
-        icon="image"
-        pack="far"
+      <KIcon
+        name="i-mdi:file-image-box"
         class="text-sm font-medium"
       />
     </div>
@@ -70,7 +69,6 @@ import { useElementHover, useElementVisibility } from '@vueuse/core'
 import {
   NeoButton,
   NeoIFrameMedia,
-  NeoIcon,
   NeoImageMedia,
   NeoJsonMedia,
   NeoObjectMedia,

components/common/ConnectWallet/WalletAssetIdentity.vue

@@ -29,17 +29,16 @@
         v-clipboard:copy="account"
         @click="toast($t('general.copyAddressToClipboard'))"
       >
-        <NeoIcon icon="copy" />
+        <KIcon name="i-mdi:content-copy" />
       </a>
       <a @click="logout">
-        <NeoIcon icon="right-from-bracket" />
+        <KIcon name="i-mdi:logout" />
       </a>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { NeoIcon } from '@kodadot1/brick'
 import { useIdentityStore } from '@/stores/identity'
 
 const { toast } = useToast()

components/common/ConnectWallet/WalletAssetMenu.vue

@@ -12,8 +12,8 @@
         class="wallet-asset-menu"
       >
         <span>{{ menu.label }}</span>
-        <NeoIcon
-          icon="angle-right"
+        <KIcon
+          name="i-mdi:chevron-right"
           size="medium"
           class="text-k-grey"
         />
@@ -29,8 +29,8 @@
         data-testid="sidebar-link-settings"
         @click="closeModal"
       >
-        <NeoIcon
-          icon="gear"
+        <KIcon
+          name="i-mdi:cog-outline"
           size="medium"
         />
         <span class="is-hidden-mobile">{{ $t('settings') }}</span>
@@ -40,7 +40,6 @@
 </template>
 
 <script setup lang="ts">
-import { NeoIcon } from '@kodadot1/brick'
 import type { Prefix } from '@kodadot1/static'
 import { transferVisible, teleportVisible, swapVisible } from '@/utils/config/permission.config'
 

components/create/CreateLanding.vue

@@ -14,11 +14,11 @@
           @click="gotoPathAfterLogin('/create/collection')"
         >
           <div class="text-center w-56 max-sm:flex max-sm:gap-8 max-sm:text-left max-sm:w-full">
-            <NeoIcon
-              icon="image-polaroid"
-              custom-size="fa-3x"
+            <KIcon
+              name="i-mdi:camera-image"
+              size="3x"
             />
-            <div class="mt-8 max-sm:mt-0">
+            <div class="mt-6 max-sm:mt-0">
               <p class="text-2xl font-bold">
                 Collection
               </p>
@@ -32,11 +32,11 @@
           @click="router.push({ query: { select: 'nft' } })"
         >
           <div class="text-center w-56 max-sm:flex max-sm:gap-8 max-sm:text-left max-sm:w-full">
-            <NeoIcon
-              icon="gem"
-              custom-size="fa-3x"
+            <KIcon
+              name="i-mdi:diamond-stone"
+              size="3x"
             />
-            <div class="mt-8 max-sm:mt-0">
+            <div class="mt-6 max-sm:mt-0">
               <p class="text-2xl font-bold">
                 NFT
               </p>
@@ -56,11 +56,11 @@
           @click="gotoPathAfterLogin('/create/nft')"
         >
           <div class="text-center w-56 max-sm:flex max-sm:gap-8 max-sm:text-left max-sm:w-full">
-            <NeoIcon
-              icon="image"
-              custom-size="fa-3x"
+            <KIcon
+              name="i-mdi:file-image-box"
+              size="3x"
             />
-            <div class="mt-8 max-sm:mt-0">
+            <div class="mt-6 max-sm:mt-0">
               <p class="text-2xl font-bold">
                 {{ $t('mint.landing.singleNft') }}
               </p>
@@ -74,11 +74,11 @@
           @click="gotoPathAfterLogin(`/${urlPrefix}/massmint`)"
         >
           <div class="text-center w-56 max-sm:flex max-sm:gap-8 max-sm:text-left max-sm:w-full">
-            <NeoIcon
-              icon="photo-film"
-              custom-size="fa-3x"
+            <KIcon
+              name="i-mdi:folder-multiple-image"
+              size="3x"
             />
-            <div class="mt-8 max-sm:mt-0">
+            <div class="mt-6 max-sm:mt-0">
               <p class="text-2xl font-bold">
                 {{ $t('mint.landing.massNft') }}
               </p>
@@ -92,8 +92,6 @@
 </template>
 
 <script setup lang="ts">
-import { NeoIcon } from '@kodadot1/brick'
-
 const { doAfterLogin } = useDoAfterlogin()
 const { urlPrefix } = usePrefix()
 const route = useRoute()

components/landing/FarcasterBanner.vue

@@ -2,24 +2,22 @@
   <a
     v-safe-href="'https://warpcast.com/~/channel/koda'"
     target="_blank"
-    class="hover:text-text-color flex p-2 bg-background-color border border-text-color rounded-[1.5rem]"
+    class="hover:text-text-color flex p-2 bg-background-color border border-text-color rounded-[1.5rem] items-center"
   >
     <div class="bg-purple-light-color flex gap-3 px-3 py-2 rounded-[1rem]">
       <img :src="farcasterIcon">
       <div class="text-purple-dark-color">
         {{ $t('landing.connectFarcaster') }}
       </div>
     </div>
-    <NeoIcon
-      icon="arrow-right"
+    <KIcon
+      name="i-mdi:arrow-right"
       class="ml-2"
     />
   </a>
 </template>
 
 <script setup lang="ts">
-import { NeoIcon } from '@kodadot1/brick'
-
 const { isDarkMode } = useTheme()
 
 const farcasterIcon = computed(() =>