mod(message-component): replacing iconify/vue to static component

Author: KUN1007

app/components/kun/alert/Info.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Icon } from '@iconify/vue'
 import img from './loli'
 
 const { loli, name } = img
@@ -83,7 +82,7 @@ onBeforeUnmount(() => {
         class="hover:bg-default/40 absolute top-1 right-1 inline-flex cursor-pointer overflow-hidden rounded-full border-transparent bg-transparent p-2 text-sm font-medium transition-all hover:opacity-80 active:scale-[0.97] disabled:opacity-50"
         @click="close"
       >
-        <Icon icon="lucide:x" />
+        <KunIconLucideX class="h-4 w-4" />
       </button>
 
       <span

app/components/kun/alert/MessageItem.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import { Icon } from '@iconify/vue'
+import LucideAlertTriangle from '~/components/kun/icon/LucideAlertTriangle.vue'
+import LucideCheckCircle2 from '~/components/kun/icon/LucideCheckCircle2.vue'
+import LucideInfo from '~/components/kun/icon/LucideInfo.vue'
+import LucideXCircle from '~/components/kun/icon/LucideXCircle.vue'
 import type { KunMessageType } from '~/composables/useMessage'
 
 const props = defineProps<{
@@ -83,23 +86,23 @@ const typeStyles = computed(() => {
         text: 'text-success-800',
         icon: 'text-success-500',
         progress: 'bg-success-400',
-        iconName: 'lucide:check-circle-2'
+        iconComponent: LucideCheckCircle2
       }
     case 'error':
       return {
         bg: 'bg-danger-50 dark:bg-danger-50/90',
         text: 'text-danger-800',
         icon: 'text-danger-500',
         progress: 'bg-danger-400',
-        iconName: 'lucide:x-circle'
+        iconComponent: LucideXCircle
       }
     case 'warn':
       return {
         bg: 'bg-warning-50 dark:bg-warning-50/90',
         text: 'text-warning-800',
         icon: 'text-warning-500',
         progress: 'bg-warning-400',
-        iconName: 'lucide:alert-triangle'
+        iconComponent: LucideAlertTriangle
       }
     case 'info':
     default:
@@ -108,7 +111,7 @@ const typeStyles = computed(() => {
         text: 'text-primary-800',
         icon: 'text-primary-500',
         progress: 'bg-primary-400',
-        iconName: 'lucide:info'
+        iconComponent: LucideInfo
       }
   }
 })
@@ -126,9 +129,9 @@ const typeStyles = computed(() => {
     @mouseenter="pauseTimer"
     @mouseleave="resumeTimer"
   >
-    <Icon
+    <component
+      :is="typeStyles.iconComponent"
       :class="cn('mt-0.5 mr-3 h-6 w-6 flex-shrink-0', typeStyles.icon)"
-      :icon="typeStyles.iconName"
     />
 
     <div class="flex-1 text-sm font-medium">

app/components/kun/icon/LucideAlertTriangle.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4.27 21h15.46A2 2 0 0 0 21.73 18" />
+    <path d="M12 9v4" />
+    <path d="M12 17h.01" />
+  </svg>
+</template>

app/components/kun/icon/LucideCheckCircle2.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <circle cx="12" cy="12" r="10" />
+    <path d="m9 12 2 2 4-4" />
+  </svg>
+</template>

app/components/kun/icon/LucideInfo.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <circle cx="12" cy="12" r="10" />
+    <path d="M12 16v-4" />
+    <path d="M12 8h.01" />
+  </svg>
+</template>

app/components/kun/icon/LucideX.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M18 6 6 18" />
+    <path d="M6 6l12 12" />
+  </svg>
+</template>

app/components/kun/icon/LucideXCircle.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <circle cx="12" cy="12" r="10" />
+    <path d="m15 9-6 6m0-6 6 6" />
+  </svg>
+</template>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kun-galgame-nuxt4",
-  "version": "5.0.51",
+  "version": "5.0.52",
   "type": "module",
   "packageManager": "pnpm@10.17.1",
   "private": true,