refactor: replace neoicon with nuxt icon (5)

components/common/autoTeleport/AutoTeleportWelcomeModal.vue

@@ -28,8 +28,8 @@
             class="border border-k-shade p-4"
           >
             <div class="has-accent-blur">
-              <NeoIcon
-                :icon="reasonsIcons[index]"
+              <KIcon
+                :name="reasonsIcons[index]"
                 size="large"
                 class="text-k-primary mb-3"
               />
@@ -77,15 +77,15 @@
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoIcon, NeoModal } from '@kodadot1/brick'
+import { NeoButton, NeoModal } from '@kodadot1/brick'
 
 const emit = defineEmits(['close'])
 const props = defineProps<{
   modelValue: boolean
 }>()
 
 const isModalActive = useVModel(props, 'modelValue')
-const reasonsIcons = ['arrow-right-to-arc', 'hourglass-half', 'wave-sine']
+const reasonsIcons = ['i-mdi:arrow-right-thick', 'i-mdi:timer-sand', 'i-mdi:sine-wave']
 
 const onClose = () => {
   emit('close')

components/common/successfulModal/ShareSocialsSection.vue

@@ -12,9 +12,8 @@
           no-shadow
           @click="handleShareOnX"
         >
-          <NeoIcon
-            pack="fab"
-            icon="x-twitter"
+          <KIcon
+            name="i-ri:twitter-x-fill"
             class="text-k-grey"
           />
         </NeoButton>
@@ -38,10 +37,9 @@
           no-shadow
           @click="handleShareOnTelegram"
         >
-          <NeoIcon
+          <KIcon
+            name="i-ri:telegram-fill"
             class="text-k-grey"
-            pack="fab"
-            icon="telegram"
           />
         </NeoButton>
       </NeoTooltip>
@@ -66,7 +64,7 @@
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoIcon, NeoTooltip } from '@kodadot1/brick'
+import { NeoButton, NeoTooltip } from '@kodadot1/brick'
 
 const FarcasterIcon = defineAsyncComponent(
   () => import('@/assets/icons/farcaster-icon.svg?component'),

components/drops/CreateCalendarEventModal.vue

@@ -25,10 +25,7 @@
           @click="addEvent(provider.id)"
         >
           <div class="flex gap-2 justify-center">
-            <NeoIcon
-              :icon="provider.icon"
-              pack="fab"
-            />
+            <KIcon :name="provider.icon" />
             <span>{{ provider.label }}</span>
           </div>
         </NeoButton>
@@ -38,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoIcon, NeoModal } from '@kodadot1/brick'
+import { NeoButton, NeoModal } from '@kodadot1/brick'
 import { addHours, format } from 'date-fns'
 import ModalBody from '@/components/shared/modals/ModalBody.vue'
 
@@ -58,7 +55,7 @@ const providers: { id: CalendarProvider, label: string, icon: string }[] = [
   {
     id: 'google',
     label: 'Google Calendar',
-    icon: 'google',
+    icon: 'i-mdi:google',
   },
 ]
 

components/explore/FilterMenuButton.vue

@@ -7,8 +7,8 @@
       :class="[{ disabled: disabled }, 'is-hidden-mobile flex items-center']"
       @click="toggleSidebarFilters"
     >
-      <NeoIcon
-        :icon="isSidebarFiltersOpen && !disabled ? 'times' : 'bars'"
+      <KIcon
+        :name="isSidebarFiltersOpen && !disabled ? 'i-mdi:close' : 'i-mdi:menu'"
         size="medium"
       />
     </a>
@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoIcon } from '@kodadot1/brick'
+import { NeoButton } from '@kodadot1/brick'
 import ActiveCount from './ActiveCount.vue'
 import { usePreferencesStore } from '@/stores/preferences'
 import useActiveRouterFilters from '@/composables/useActiveRouterFilters'

components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemBuy.vue

@@ -25,15 +25,14 @@
           data-testid="item-add-to-cart"
           @click="onClickShoppingCart"
         >
-          <NeoIcon
+          <KIcon
             size="medium"
             class="w-4 h-4"
-            :icon="
+            :name="
               shoppingCartStore.isItemInCart(nft.id)
-                ? 'fa-striked-out-cart-shopping'
-                : 'fa-shopping-cart-outline-sharp'
+                ? 'i-mdi:cart-off'
+                : 'i-mdi:cart'
             "
-            pack="fa-kit"
           />
         </NeoButton>
       </div>
@@ -51,7 +50,7 @@
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoIcon } from '@kodadot1/brick'
+import { NeoButton } from '@kodadot1/brick'
 import GalleryItemPriceSection from '../GalleryItemActionSection.vue'
 import { useShoppingCartStore } from '@/stores/shoppingCart'
 import { usePreferencesStore } from '@/stores/preferences'

components/identity/module/IdentityChain.vue

@@ -1,10 +1,9 @@
 <template v-else>
   <div :class="{ 'flex items-center': showBadge }">
-    <NeoIcon
+    <KIcon
       v-if="showBadge"
-      icon="badge-check"
+      name="i-mdi:check"
       class="mr-1"
-      pack="fass"
       size="small"
     />
 
@@ -42,7 +41,6 @@
 
 <script lang="ts" setup>
 import type { GenericAccountId } from '@polkadot/types/generic/AccountId'
-import { NeoIcon } from '@kodadot1/brick'
 import IdentityPopover from './IdentityPopover.vue'
 import { isMobileDevice } from '@/utils/extension'
 

components/identity/module/IdentitySocial.vue

@@ -6,9 +6,8 @@
       target="_blank"
       rel="nofollow noopener noreferrer"
     >
-      <NeoIcon
-        pack="fab"
-        icon="x-twitter"
+      <KIcon
+        name="i-ri:twitter-x-fill"
       />
       <span class="aligned">
         {{ twitter }}
@@ -18,8 +17,6 @@
 </template>
 
 <script lang="ts" setup>
-import { NeoIcon } from '@kodadot1/brick'
-
 defineProps<{
   twitter: string
   showTwitter: boolean

components/items/ItemsGrid/ItemsGridImage.vue

@@ -41,14 +41,13 @@
           class="p-1 !border-l-0"
           @click.prevent="onClickShoppingCart"
         >
-          <NeoIcon
+          <KIcon
             class="w-4 h-4"
-            :icon="
+            :name="
               shoppingCartStore.isItemInCart(nft.id)
-                ? 'fa-striked-out-cart-shopping'
-                : 'fa-shopping-cart-outline-sharp'
+                ? 'i-mdi:cart-off'
+                : 'i-mdi:cart'
             "
-            pack="fa-kit"
           />
         </NeoButton>
       </div>
@@ -76,7 +75,7 @@
 <script setup lang="ts">
 // PLEASE FIX bind-key href => to
 import { resolveComponent } from 'vue'
-import { NeoButton, NeoIcon } from '@kodadot1/brick'
+import { NeoButton } from '@kodadot1/brick'
 import useAtomicSwapAction from './useAtomicSwapAction'
 import type { NftCardVariant } from '@/components/shared/nftCard/types'
 import type { NFTWithMetadata } from '@/composables/useNft'

components/items/ItemsGrid/ItemsGridImageTokenEntity.vue

@@ -46,14 +46,13 @@
           class="p-1 !border-l-0"
           @click.prevent="onClickShoppingCart"
         >
-          <NeoIcon
+          <KIcon
             class="w-4 h-4"
-            :icon="
+            :name="
               shoppingCartStore.isItemInCart(nftForShoppingCart.id)
-                ? 'fa-striked-out-cart-shopping'
-                : 'fa-shopping-cart-outline-sharp'
+                ? 'i-mdi:cart-off'
+                : 'i-mdi:cart'
             "
-            pack="fa-kit"
           />
         </NeoButton>
       </div>
@@ -94,7 +93,7 @@
 <script setup lang="ts">
 // PLEASE FIX bind-key href => to
 import { resolveComponent } from 'vue'
-import { NeoButton, NeoIcon } from '@kodadot1/brick'
+import { NeoButton } from '@kodadot1/brick'
 import { getTokensNfts, useNftActions } from './useNftActions'
 import type { NftCardVariant } from '@/components/shared/nftCard/types'
 import type { TokenEntity } from '@/composables/useNft'

components/massmint/Massmint.vue

@@ -6,8 +6,8 @@
           class="absolute left-10 max-lg:static max-lg:mb-8"
           @click="toOnborading"
         >
-          <NeoIcon
-            icon="arrow-left"
+          <KIcon
+            name="i-mdi:arrow-left"
             class="mr-1"
           />
           {{ $t('massmint.backToOnbaording') }}
@@ -103,7 +103,7 @@
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoIcon } from '@kodadot1/brick'
+import { NeoButton } from '@kodadot1/brick'
 import UploadMediaZip from './uploadCompressedMedia/UploadCompressedMedia.vue'
 import UploadDescription from './uploadDescription/UploadDescription.vue'
 import OverviewTable from './OverviewTable.vue'

components/profile/CuratedDrops.vue

@@ -13,9 +13,8 @@
             {{ $t('profiles.curatedGenerativDrops.title') }}
           </p>
 
-          <NeoIcon
-            icon="badge-check"
-            pack="fass"
+          <KIcon
+            name="i-mdi:check"
             class="text-k-accent"
           />
         </div>
@@ -81,7 +80,7 @@
 </template>
 
 <script lang="ts" setup>
-import { NeoIcon, NeoSkeleton, NeoTooltip } from '@kodadot1/brick'
+import { NeoSkeleton, NeoTooltip } from '@kodadot1/brick'
 import { useQuery } from '@tanstack/vue-query'
 import { getDrops } from '@/services/fxart'
 

components/profile/ProfileDetail.vue

@@ -221,9 +221,8 @@
 
             <NeoDropdownItem @click="shareOnX($i18n.t('sharing.profile'), shareURL, '')">
               <div class="flex text-nowrap w-max items-center">
-                <NeoIcon
-                  icon="x-twitter"
-                  pack="fab"
+                <KIcon
+                  name="i-ri:twitter-x-fill"
                   class="mr-3"
                 />
                 {{ $t('share.twitter') }}

components/profile/create/SelectImageField.vue

@@ -12,9 +12,8 @@
         v-if="!vSelectedFile && !preview"
         class="flex items-center justify-center bg-neutral-3 dark:bg-neutral-11 w-16 h-16"
       >
-        <NeoIcon
-          icon="up-to-line"
-          pack="fas"
+        <KIcon
+          name="i-mdi:upload"
         />
       </div>
       <NuxtImg
@@ -39,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoIcon, NeoUpload } from '@kodadot1/brick'
+import { NeoButton, NeoUpload } from '@kodadot1/brick'
 
 const NuxtImg = resolveComponent('NuxtImg')
 const ONE_MB = 1024 * 1024

components/profile/create/stages/Form.vue

@@ -176,13 +176,14 @@
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoField, NeoIcon, NeoInput } from '@kodadot1/brick'
+import { NeoButton, NeoField, NeoInput } from '@kodadot1/brick'
 import type { StatusAPIResponse } from '@farcaster/auth-client'
 import SelectImageField from '../SelectImageField.vue'
 import type { ProfileFormData } from '.'
 import type { Profile } from '@/services/profile'
 import { toSubstrateAddress } from '@/services/profile'
 import { addHttpToUrl } from '@/utils/url'
+import KIcon from '@/components/KIcon.vue'
 
 const FarcasterIcon = defineAsyncComponent(
   () => import('@/assets/icons/farcaster-icon.svg?component'),
@@ -198,14 +199,14 @@ const socialLinks = [
   },
   {
     name: 'website',
-    icon: () => h(NeoIcon, { icon: 'globe', pack: 'fas' }),
+    icon: () => h(KIcon, { name: 'i-mdi:earth' }),
     model: 'website',
     placeholder: 'Website',
     testId: 'create-profile-input-website',
   },
   {
     name: 'twitter',
-    icon: () => h(NeoIcon, { icon: 'x-twitter', pack: 'fab' }),
+    icon: () => h(KIcon, { name: 'i-ri:twitter-x-fill' }),
     model: 'twitterHandle',
     placeholder: 'Twitter Handle',
     testId: 'create-profile-input-twitter-handle',

components/search/SearchSuggestion.vue

@@ -215,7 +215,7 @@
         @click="goToExploreResults(item)"
       >
         <div class="flex items-center">
-          <NeoIcon icon="history" />
+          <KIcon name="i-mdi:history" />
           <div class="ml-3 history-label">
             {{ item.name }}
           </div>
@@ -280,7 +280,7 @@
 
 <script setup lang="ts">
 import { useDebounceFn } from '@vueuse/core'
-import { NeoIcon, NeoSkeleton, NeoTabItem, NeoTabs } from '@kodadot1/brick'
+import { NeoSkeleton, NeoTabItem, NeoTabs } from '@kodadot1/brick'
 import { useTopCollections } from '../landing/topCollections/utils/useTopCollections'
 import { fetchCollectionSuggestion } from './utils/collectionSearch'
 import type { DefaultCollectionSuggestion, SearchQuery } from './types'

components/shared/DragDrop.vue

@@ -17,8 +17,8 @@
           <slot name="title">
             <span class="mb-4 text-left">{{ title }}</span>
           </slot>
-          <NeoIcon
-            :icon="icon"
+          <KIcon
+            :name="icon"
             class="icon-size text-k-grey py-3"
             custom-size="fa-2x"
             pack="fass"
@@ -57,7 +57,7 @@
 </template>
 
 <script setup lang="ts">
-import { NeoIcon, NeoUpload } from '@kodadot1/brick'
+import { NeoUpload } from '@kodadot1/brick'
 
 const { $i18n } = useNuxtApp()
 
@@ -73,7 +73,7 @@ const props = withDefaults(
   {
     accept: '',
     title: '',
-    icon: 'cloud-arrow-up',
+    icon: 'i-mdi:cloud-arrow-up',
     subtitle: undefined,
     disabled: false,
   },