feat(projects): 本地svg动态渲染图标

ISSUES CLOSED: #61

src/utils/common/icon.ts

@@ -1,5 +1,6 @@
 import { h } from 'vue';
 import { Icon } from '@iconify/vue';
+import SvgIcon from '@/components/custom/SvgIcon.vue';
 
 /**
  * 动态渲染iconify
@@ -17,3 +18,21 @@ export function iconifyRender(icon: string, color?: string, size?: number) {
   }
   return () => h(Icon, { icon, style });
 }
+
+/**
+ * 动态渲染自定义图标
+ * @param icon - 图标名称
+ * @param color - 图标颜色
+ * @param size - 图标大小
+ */
+export function customIconRender(icon: string, color?: string, size?: number) {
+  const style: { color?: string; size?: string } = {};
+  if (color) {
+    style.color = color;
+  }
+  if (size) {
+    style.size = `${size}px`;
+  }
+
+  return () => h(SvgIcon, { icon, style });
+}

src/utils/router/menu.ts

@@ -1,4 +1,4 @@
-import { iconifyRender } from '../common';
+import { iconifyRender, customIconRender } from '../common';
 
 /** 路由不转换菜单 */
 function hideInMenu(route: AuthRoute.Route) {
@@ -6,13 +6,21 @@ function hideInMenu(route: AuthRoute.Route) {
 }
 
 /** 给菜单添加可选属性 */
-function addPartialProps(menuItem: GlobalMenuOption, icon?: string, children?: GlobalMenuOption[]) {
-  const item = { ...menuItem };
-  if (icon) {
-    Object.assign(item, { icon: iconifyRender(icon) });
+function addPartialProps(config: {
+  menu: GlobalMenuOption;
+  icon?: string;
+  customIcon?: string;
+  children?: GlobalMenuOption[];
+}) {
+  const item = { ...config.menu };
+  if (config.icon) {
+    Object.assign(item, { icon: iconifyRender(config.icon) });
   }
-  if (children) {
-    Object.assign(item, { children });
+  if (config.customIcon) {
+    Object.assign(item, { icon: customIconRender(config.customIcon) });
+  }
+  if (config.children) {
+    Object.assign(item, { children: config.children });
   }
   return item;
 }
@@ -30,16 +38,17 @@ export function transformAuthRouteToMenu(routes: AuthRoute.Route[]): GlobalMenuO
     if (route.children) {
       menuChildren = transformAuthRouteToMenu(route.children);
     }
-    const menuItem: GlobalMenuOption = addPartialProps(
-      {
+    const menuItem: GlobalMenuOption = addPartialProps({
+      menu: {
         key: routeName,
         label: meta.title,
         routeName,
         routePath: path
       },
-      meta?.icon,
-      menuChildren
-    );
+      icon: meta.icon,
+      customIcon: meta.customIcon,
+      children: menuChildren
+    });
 
     if (!hideInMenu(route)) {
       globalMenu.push(menuItem);