From d9273cabdf75ad04b7ac12019a9b66a387799a90 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 13 Apr 2022 11:28:03 +0800
Subject: [PATCH] feat: render routes menu icon

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 src/components/base/menu/RoutesMenu.tsx | 20 ++++++++++++++++++--
 src/router/menus.config.ts              |  3 ++-
 2 files changed, 20 insertions(+), 3 deletions(-)

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 <icon height="20px" width="20px" />;
+    }
+
     function renderItems(items: MenuItemType[] | undefined) {
       return items?.map((item) => {
         return (
           <>
             {item.children?.length ? (
-              <VMenuItem key={item.path} id={item.path} title={item.name}>
+              <VMenuItem
+                key={item.path}
+                id={item.path}
+                title={item.name}
+                v-slots={{
+                  icon: () => renderIcon(item.icon),
+                }}
+              >
                 {renderItems(item.children)}
               </VMenuItem>
             ) : (
@@ -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<string, unknown>;
   children?: MenuItemType[];
 }