diff --git a/src/components/base/menu/RoutesMenu.tsx b/src/components/base/menu/RoutesMenu.tsx
index 72ad3237..0e767ea5 100644
--- a/src/components/base/menu/RoutesMenu.tsx
+++ b/src/components/base/menu/RoutesMenu.tsx
@@ -1,5 +1,5 @@
import { computed, defineComponent } from "vue";
-import type { PropType } from "vue";
+import type { PropType, Component } from "vue";
import type { MenuGroupType, MenuItemType } from "@/router/menus.config";
import { VMenu, VMenuItem, VMenuLabel } from "@/components/base/menu/index";
import { useRoute, useRouter } from "vue-router";
@@ -24,12 +24,25 @@ const VRoutesMenu = defineComponent({
await push(id);
}
+ function renderIcon(icon: Component | undefined) {
+ if (!icon) return undefined;
+
+ return ;
+ }
+
function renderItems(items: MenuItemType[] | undefined) {
return items?.map((item) => {
return (
<>
{item.children?.length ? (
-
+ renderIcon(item.icon),
+ }}
+ >
{renderItems(item.children)}
) : (
@@ -37,6 +50,9 @@ const VRoutesMenu = defineComponent({
key={item.path}
id={item.path}
title={item.name}
+ v-slots={{
+ icon: () => renderIcon(item.icon),
+ }}
onSelect={handleSelect}
active={route.path === item.path}
/>
diff --git a/src/router/menus.config.ts b/src/router/menus.config.ts
index d86d9f84..0720dfea 100644
--- a/src/router/menus.config.ts
+++ b/src/router/menus.config.ts
@@ -1,4 +1,5 @@
import { IconDashboard } from "@/core/icons";
+import type { Component } from "vue";
declare interface MenuGroupType {
name?: string;
@@ -8,7 +9,7 @@ declare interface MenuGroupType {
declare interface MenuItemType {
name: string;
path: string;
- icon?: string;
+ icon?: Component;
meta?: Record;
children?: MenuItemType[];
}