refactor: custom icon

src/layout/components/header/components/BreadCrumb.vue

@@ -5,14 +5,14 @@
       :key="item.path"
       @click="handleBreadClick(item.path)"
     >
-      <component :is="renderIcon(item.meta?.icon, { size: 16 })" v-if="item.meta?.icon" />
+      <component :is="getIcon(item.meta)" />
       {{ item.meta.title }}
     </n-breadcrumb-item>
   </n-breadcrumb>
 </template>
 
 <script setup>
-import { renderIcon } from '@/utils/icon'
+import { renderCustomIcon, renderIcon } from '@/utils/icon'
 
 const router = useRouter()
 const route = useRoute()
@@ -21,4 +21,10 @@ function handleBreadClick(path) {
   if (path === route.path) return
   router.push(path)
 }
+
+function getIcon(meta) {
+  if (meta?.customIcon) return renderCustomIcon(meta.customIcon, { size: 18 })
+  if (meta?.icon) return renderIcon(meta.icon, { size: 18 })
+  return null
+}
 </script>

src/layout/components/sidebar/components/SideLogo.vue

@@ -1,6 +1,6 @@
 <template>
   <router-link h-60 f-c-c to="/">
-    <icon-custom-logo text-36></icon-custom-logo>
+    <icon-custom-logo text-36 color-primary></icon-custom-logo>
     <h2 v-show="!appStore.collapsed" ml-10 color-primary text-16 font-bold max-w-140 flex-shrink-0>
       {{ title }}
     </h2>

src/layout/components/sidebar/components/SideMenu.vue

@@ -16,7 +16,7 @@ import { usePermissionStore } from '@/store/modules/permission'
 
 import { isExternal } from '@/utils/is'
 import { useAppStore } from '@/store/modules/app'
-import { renderIcon } from '@/utils/icon'
+import { renderCustomIcon, renderIcon } from '@/utils/icon'
 
 const router = useRouter()
 const permissionStore = usePermissionStore()
@@ -43,7 +43,7 @@ function getMenuItem(route, basePath = '') {
     label: (route.meta && route.meta.title) || route.name,
     key: route.name,
     path: resolvePath(basePath, route.path),
-    icon: route.meta?.icon ? renderIcon(route.meta?.icon, { size: 16 }) : renderIcon('mdi:circle-outline', { size: 8 }),
+    icon: getIcon(route.meta),
     order: route.meta?.order || 0,
   }
 
@@ -58,9 +58,7 @@ function getMenuItem(route, basePath = '') {
       label: singleRoute.meta?.title || singleRoute.name,
       key: singleRoute.name,
       path: resolvePath(menuItem.path, singleRoute.path),
-      icon: singleRoute.meta?.icon
-        ? renderIcon(singleRoute.meta?.icon, { size: 16 })
-        : renderIcon('mdi:circle-outline', { size: 8 }),
+      icon: getIcon(singleRoute.meta),
       order: menuItem.order,
     }
     const visibleItems = singleRoute.children ? singleRoute.children.filter((item) => item.name && !item.isHidden) : []
@@ -79,6 +77,12 @@ function getMenuItem(route, basePath = '') {
   return menuItem
 }
 
+function getIcon(meta) {
+  if (meta?.customIcon) return renderCustomIcon(meta.customIcon, { size: 18 })
+  if (meta?.icon) return renderIcon(meta.icon, { size: 18 })
+  return null
+}
+
 function handleMenuSelect(key, item) {
   if (isExternal(item.path)) {
     window.open(item.path)