feat(projects): refactor icon system, unify icon usage [重构图标系统，统一图标用法]

src/utils/common/icon.ts

@@ -1,39 +0,0 @@
-import { h } from 'vue';
-import { NIcon } from 'naive-ui';
-import { Icon } from '@iconify/vue';
-import SvgIcon from '@/components/custom/SvgIcon.vue';
-
-/**
- * 动态渲染iconify
- * @param icon - 图标名称
- * @param color - 图标颜色
- * @param fontSize - 图标大小
- */
-export function iconifyRender(icon: string, color?: string, fontSize?: number) {
-  const style: { color?: string; fontSize?: string } = {};
-  if (color) {
-    style.color = color;
-  }
-  if (fontSize) {
-    style.fontSize = `${fontSize}px`;
-  }
-  return () => h(NIcon, null, { default: () => h(Icon, { icon, style }) });
-}
-
-/**
- * 动态渲染自定义图标
- * @param icon - 图标名称
- * @param color - 图标颜色
- * @param fontSize - 图标大小
- */
-export function customIconRender(icon: string, color?: string, fontSize?: number) {
-  const style: { color?: string; fontSize?: string } = {};
-  if (color) {
-    style.color = color;
-  }
-  if (fontSize) {
-    style.fontSize = `${fontSize}px`;
-  }
-
-  return () => h(NIcon, null, { default: () => h(SvgIcon, { icon, style }) });
-}

src/utils/common/index.ts

@@ -2,6 +2,5 @@ export * from './typeof';
 export * from './color';
 export * from './number';
 export * from './object';
-export * from './icon';
 export * from './pattern';
 export * from './theme';

src/utils/router/menu.ts

@@ -1,4 +1,4 @@
-import { customIconRender, iconifyRender } from '../common';
+import { useIconRender } from '@/composables';
 
 /** 路由不转换菜单 */
 function hideInMenu(route: AuthRoute.Route) {
@@ -9,18 +9,25 @@ function hideInMenu(route: AuthRoute.Route) {
 function addPartialProps(config: {
   menu: GlobalMenuOption;
   icon?: string;
-  customIcon?: string;
+  localIcon?: string;
   children?: GlobalMenuOption[];
 }) {
+  const { iconRender } = useIconRender();
+
   const item = { ...config.menu };
-  if (config.icon) {
-    Object.assign(item, { icon: iconifyRender(config.icon) });
+
+  const { icon, localIcon, children } = config;
+
+  if (localIcon) {
+    Object.assign(item, { icon: iconRender({ localIcon }) });
   }
-  if (config.customIcon) {
-    Object.assign(item, { icon: customIconRender(config.customIcon) });
+
+  if (icon) {
+    Object.assign(item, { icon: iconRender({ icon }) });
   }
-  if (config.children) {
-    Object.assign(item, { children: config.children });
+
+  if (children) {
+    Object.assign(item, { children });
   }
   return item;
 }
@@ -46,7 +53,7 @@ export function transformAuthRouteToMenu(routes: AuthRoute.Route[]): GlobalMenuO
         routePath: path
       },
       icon: meta.icon,
-      customIcon: meta.customIcon,
+      localIcon: meta.localIcon,
       children: menuChildren
     });