Merge pull request #11476 from kodadot/refactor--replace-neo-icon-3

refactor: replace neoicon with nuxt icon (3)

Author: preschian

components/chart/PriceChart.vue

@@ -39,11 +39,10 @@
           no-shadow
           variant="icon"
         >
-          <NeoIcon
-            icon="gear"
-            pack="fass"
+          <KIcon
+            name="i-mdi:cog-outline"
             size="large"
-            :variant="!active ? 'k-grey' : undefined"
+            :class="!active ? 'text-k-grey' : undefined"
           />
         </NeoButton>
       </template>
@@ -87,13 +86,7 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  NeoButton,
-  NeoCheckbox,
-  NeoDropdown,
-  NeoDropdownItem,
-  NeoIcon,
-} from '@kodadot1/brick'
+import { NeoButton, NeoCheckbox, NeoDropdown, NeoDropdownItem } from '@kodadot1/brick'
 import { useEventListener, useVModel } from '@vueuse/core'
 import type {
   ChartData,

components/codeChecker/CodeChecker.vue

@@ -27,15 +27,14 @@
             <div
               class="text-k-blue hover:text-k-blue-hover flex items-center mr-2"
             >
-              <NeoIcon
-                icon="circle"
-                pack="fas"
-                class="text-[4px] mr-2"
+              <KIcon
+                name="i-mdi:circle"
+                class="size-[6px] mr-2"
               />
               {{ $t(item.title) }}
             </div>
-            <NeoIcon
-              icon="arrow-up-right"
+            <KIcon
+              name="i-mdi:arrow-top-right"
               class="text-neutral-7 text-sm"
             />
           </a>
@@ -190,7 +189,7 @@
         :render="Boolean(selectedFile)"
         :koda-renderer-used="fileValidity.kodaRendererUsed"
         :reload-trigger="reloadTrigger"
-        :index-url="indexUrl"
+        :index-url="indexUrl ?? ''"
         @reload="startClock"
         @hash:update="(hash) => (previewHash = hash)"
       />
@@ -210,11 +209,13 @@
         >
 
         <div class="flex items-center gap-5">
-          <NeoIcon
-            icon="shield"
-            class="!block text-k-grey"
-            size="large"
-          />
+          <div>
+            <KIcon
+              name="i-mdi:shield-outline"
+              class="text-k-grey"
+              size="large"
+            />
+          </div>
           <p class="capitalize text-k-grey">
             {{ $t('codeChecker.confidentialCode') }}
           </p>
@@ -225,7 +226,6 @@
 </template>
 
 <script lang="ts" setup>
-import { NeoIcon } from '@kodadot1/brick'
 import { validate } from './validate'
 import { createSandboxAssets, extractAssetsFromZip } from './utils'
 import config from './codechecker.config'

components/codeChecker/FileUploader.vue

@@ -10,8 +10,8 @@
     >
       <template v-if="!selectedFile">
         <div class="flex flex-col items-center limit-width gap-2 py-5">
-          <NeoIcon
-            icon="arrow-down-to-bracket"
+          <KIcon
+            name="i-mdi:folder-upload-outline"
             class="text-xl text-k-grey"
           />
           <span>Drag Your <b class="mr-1">.Zip File</b> Here Or Click To
@@ -24,8 +24,8 @@
       <template v-else>
         <div class="flex justify-between items-center">
           <div class="flex items-center gap-4 overflow-hidden">
-            <NeoIcon
-              icon="code"
+            <KIcon
+              name="i-mdi:code-block-tags"
               class="border py-3 px-[10px] rounded-full text-k-grey"
             />
             <span class="text-ellipsis overflow-hidden">{{
@@ -47,7 +47,7 @@
 </template>
 
 <script lang="ts" setup>
-import { NeoButton, NeoIcon, NeoUpload } from '@kodadot1/brick'
+import { NeoButton, NeoUpload } from '@kodadot1/brick'
 
 const emits = defineEmits(['update:selectedFile', 'fileSelected', 'clear'])
 

components/codeChecker/TestItem.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="flex justify-between">
     <div>
-      <NeoIcon
-        :icon="icon.name"
+      <KIcon
+        :name="icon.name"
         :class="['text-lg', icon.class]"
-        :spin="icon.spin"
       />
       <span class="ml-[20px]">{{ description }}</span>
     </div>
@@ -36,7 +35,7 @@
 </template>
 
 <script lang="ts" setup>
-import { NeoIcon, NeoModal, NeoModalHead } from '@kodadot1/brick'
+import { NeoModal, NeoModalHead } from '@kodadot1/brick'
 import type { Passed } from './types'
 
 const props = defineProps<{
@@ -50,20 +49,19 @@ const showResolveIssuesModal = ref(false)
 const icon = computed(() => {
   if (props.passed === 'loading') {
     return {
-      name: 'spinner-third',
-      class: 'text-k-grey',
-      spin: true,
+      name: 'i-mdi:loading',
+      class: 'text-k-grey animate-spin',
     }
   }
   if (props.passed === 'unknown' || (props.optional && !props.passed)) {
     return {
-      name: 'question',
+      name: 'i-mdi:help',
       class: 'text-k-grey',
     }
   }
 
   return {
-    name: props.passed ? 'check' : 'xmark',
+    name: props.passed ? 'i-mdi:check' : 'i-mdi:close',
     class: props.passed ? 'text-k-green' : 'text-k-red',
   }
 })

components/codeChecker/massPreview/Controls.vue

@@ -33,15 +33,15 @@
           <span class="capitalize">
             {{ $t('codeChecker.retryTest') }}
           </span>
-          <NeoIcon icon="rotate-left" />
+          <KIcon name="i-mdi:rotate-left" />
         </div>
       </NeoButton>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { NeoButton, NeoIcon, NeoInput } from '@kodadot1/brick'
+import { NeoButton, NeoInput } from '@kodadot1/brick'
 import mean from 'lodash/mean'
 import type { CanvasPreviewItem, CapturePreviewItem } from './types'
 

components/collection/CollectionInfo.vue

@@ -32,9 +32,9 @@
             class="text-neutral-7"
             :append-to="body"
           >
-            <NeoIcon
+            <KIcon
               class="w-4 h-4"
-              icon="info-circle"
+              name="i-mdi:information-variant-circle-outline"
             />
 
             <template #content>
@@ -120,7 +120,7 @@
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoIcon } from '@kodadot1/brick'
+import { NeoButton } from '@kodadot1/brick'
 import { useCollectionDetails } from './utils/useCollectionDetails'
 import {
   DESCRIPTION_MAX_LENGTH,

components/collection/EditModal.vue

@@ -18,7 +18,7 @@
           :error="!name"
         >
           <NonRecommendFieldNotification
-            :show="name && nameChanged"
+            :show="Boolean(name && nameChanged)"
             @undo="name = props.collection.name"
           >
             <NeoInput
@@ -167,7 +167,7 @@
                   step="0.01"
                   min="0.0001"
                   pattern="[0-9]+([\.,][0-9]+)?"
-                  class="indent-2.5 border-none outline-none w-20 bg-background-color text-text-color w-full"
+                  class="indent-2.5 border-none outline-none bg-background-color text-text-color w-full"
                   :placeholder="$t('mint.collection.permission.pricePlaceholder')"
                 >
                 <div class="px-3 flex items-center">
@@ -193,8 +193,8 @@
                 v-if="permissionSettingWarningMessage"
                 class="flex items-center gap-2 bg-yellow-50 border border-yellow-200 rounded-md p-3 !mt-2"
               >
-                <NeoIcon
-                  icon="warning"
+                <KIcon
+                  name="i-mdi:alert-circle-outline"
                   class="text-yellow-500"
                   size="small"
                 />
@@ -223,7 +223,7 @@
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoField, NeoInput, NeoModal, NeoSwitch, NeoSelect, NeoIcon } from '@kodadot1/brick'
+import { NeoButton, NeoField, NeoInput, NeoModal, NeoSwitch, NeoSelect } from '@kodadot1/brick'
 import ModalBody from '@/components/shared/modals/ModalBody.vue'
 import { type UpdateCollection, type CollectionMintSetting, CollectionMintSettingType } from '@/composables/transaction/types'
 

components/collection/HeroButtons.vue

@@ -36,42 +36,45 @@
 
           <NeoDropdownItem
             v-clipboard:copy="currentCollectionUrl"
-            class="w-max"
+            class="w-max !flex items-center"
             @click="shareCollectionToFarcaster"
           >
-            <NeoIcon
-              icon="frame"
+            <KIcon
+              name="i-mdi:vector-square"
               class="mr-2"
             />
             {{ $i18n.t('share.farcasterFrame') }}
           </NeoDropdownItem>
           <NeoDropdownItem
             v-clipboard:copy="currentCollectionUrl"
             data-testid="hero-copy-link-dropdown"
+            class="!flex items-center"
             @click="toast($t('toast.urlCopy'))"
           >
-            <NeoIcon
-              icon="link"
+            <KIcon
+              name="i-mdi:link"
               class="mr-2"
             />
             {{ $i18n.t('share.copyLink') }}
           </NeoDropdownItem>
           <NeoDropdownItem
             data-testid="hero-share-QR-dropdown"
+            class="!flex items-center"
             @click="QRModalActive = true"
           >
-            <NeoIcon
-              icon="qrcode"
+            <KIcon
+              name="i-mdi:qrcode"
               class="mr-2"
             />
             {{ $i18n.t('share.qrCode') }}
           </NeoDropdownItem>
           <NeoDropdownItem
             data-testid="hero-share-twitter-dropdown"
+            class="!flex items-center"
             @click="shareUrlToX"
           >
-            <NeoIcon
-              icon="share"
+            <KIcon
+              name="i-mdi:share"
               class="mr-2"
             />
             {{ $i18n.t('share.twitter') }}
@@ -130,7 +133,6 @@ import {
   NeoButton,
   NeoDropdown,
   NeoDropdownItem,
-  NeoIcon,
   NeoModal,
   NeoModalHead,
 } from '@kodadot1/brick'

components/collection/activity/ownerInsightsTabs/FlipperTab.vue

@@ -67,11 +67,11 @@
                 @click="toggleNFTDetails(flipperId)"
               >
                 {{ $t('activity.nftDetails') }}
-                <NeoIcon
-                  :icon="
+                <KIcon
+                  :name="
                     isNFTDetailsOpen[flipperId]
-                      ? 'chevron-down'
-                      : 'chevron-right'
+                      ? 'i-mdi:chevron-down'
+                      : 'i-mdi:chevron-right'
                   "
                 />
               </div>
@@ -101,7 +101,6 @@
 </template>
 
 <script setup lang="ts">
-import { NeoIcon } from '@kodadot1/brick'
 import NFTsDetaislDropdown from './NFTsDetaislDropdown.vue'
 import ProfileLink from '@/components/profile/ProfileLink.vue'
 import { format } from '@/components/collection/activity/utils'

components/collection/activity/ownerInsightsTabs/HolderTab.vue

@@ -52,11 +52,11 @@
                 @click="toggleNFTDetails(holderId)"
               >
                 {{ $t('activity.nftDetails') }}
-                <NeoIcon
-                  :icon="
+                <KIcon
+                  :name="
                     isNFTDetailsOpen[holderId]
-                      ? 'chevron-down'
-                      : 'chevron-right'
+                      ? 'i-mdi:chevron-down'
+                      : 'i-mdi:chevron-right'
                   "
                 />
               </div>
@@ -86,7 +86,6 @@
 </template>
 
 <script setup lang="ts">
-import { NeoIcon } from '@kodadot1/brick'
 import NFTsDetaislDropdown from './NFTsDetaislDropdown.vue'
 import ProfileLink from '@/components/profile/ProfileLink.vue'
 import type { Owners } from '@/composables/collectionActivity/types'