fix: render navigation icons through Vue components

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

web/hwlab-cloud-web/src/components/layout/AppNavigation.vue

@@ -24,7 +24,7 @@ import {
   ShieldCheck,
   Users
 } from "lucide-vue-next";
-import { computed, type Component } from "vue";
+import { computed, defineComponent, h, type Component, type PropType } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useAppStore } from "@/stores/app";
 import { useAuthStore } from "@/stores/auth";
@@ -38,6 +38,19 @@ const router = useRouter();
 const app = useAppStore();
 const auth = useAuthStore();
 
+const NavIcon = defineComponent({
+  name: "NavIcon",
+  props: {
+    icon: {
+      type: [Object, Function] as PropType<Component>,
+      required: true,
+    },
+  },
+  setup(props) {
+    return () => h(props.icon, { size: 18 });
+  },
+});
+
 interface NavItem {
   name: string;
   label: string;
@@ -292,7 +305,7 @@ function isActive(item: NavItem): boolean {
         @click="go(item)"
       >
         <span class="nav-icon" aria-hidden="true">
-          <component :is="item.icon" :size="18" />
+          <NavIcon :icon="item.icon" />
         </span>
         <span class="nav-label">{{ item.label }}</span>
       </button>