feat(plugins): icons enhanced feature can be used for layout menu (#1…

…2515)

* feat(max/layout): 支持菜单图标使用图标集或者本地图标

* refactor(max/layout): 根据icons功能是否开启动态插入菜单项使用icons功能的代码

* refactor(layout/max): 使用api.isPluginEnable判断是否开启了icons功能

* docs(layout-menu): 更新layout中菜单icon相关的文档

* docs(layout-menu): 修改菜单icon说明中的绝对路径为相对路径

docs/docs/docs/max/layout-menu.md

@@ -191,6 +191,8 @@ icon: 'HomeFilled';
 icon: 'HomeTwoTone';
 ```
 
+兼容[icons](../../docs/api/config#icons)功能，打开icons功能后，可以使用图标集或者本地的图标。具体请参考icons功能的相关配置和使用方法。
+
 #### access
 
 - Type: `string`

examples/max/.umirc.ts

@@ -5,13 +5,13 @@ export default defineConfig({
     {
       title: 'site.title',
       path: '/',
-      icon: 'PlaySquareFilled',
+      icon: 'ic:baseline-14mp',
       component: 'index',
       name: 'index',
     },
     {
       path: '/users',
-      icon: 'SmileFilled',
+      icon: 'local:rice',
       component: 'users',
       name: 'users',
       wrappers: ['@/wrappers/foo', '@/wrappers/bar'],
@@ -105,6 +105,7 @@ export default defineConfig({
     jsStrategy: 'granularChunks',
   },
   icons: {
+    autoInstall: {},
     include: ['local:rice', 'local:logo/umi', 'ant-design:fire-twotone'],
   },
 });

examples/max/package.json

@@ -23,6 +23,8 @@
     "react-dom": "18.3.1"
   },
   "devDependencies": {
+    "@iconify-json/ic": "1.1.17",
+    "@iconify-json/solar": "1.1.9",
     "cross-env": "^7.0.3",
     "cypress": "^12.0.0",
     "start-server-and-test": "^1.15.2",

examples/max/pages/index.tsx

@@ -54,7 +54,12 @@ export default function HomePage() {
         tailwindcss
       </h2>
 
-      <h2> Icons</h2>
+      <h2>Icon library icons</h2>
+      <Icon icon="ic:baseline-14mp" />
+      <Icon icon="ic:baseline-3p" />
+      <Icon icon="solar:4k-bold" />
+
+      <h2>Local Icons</h2>
       <div>
         {includedIcons.map((i) => {
           return <Icon spin icon={i} className={i} key={i} />;

packages/plugins/src/layout.ts

@@ -423,12 +423,19 @@ export default { ${icons.join(', ')} };
       `,
     });
 
+    // 是否启用了 icons 功能
+    const isIconsFeatureEnable = api.isPluginEnable('icons');
     // runtime.tsx
     api.writeTmpFile({
       path: 'runtime.tsx',
       content: `
 import React from 'react';
 import icons from './icons';
+${
+  isIconsFeatureEnable
+    ? `import { Icon, getIconComponent } from '@umijs/max';`
+    : ''
+}
 
 function formatIcon(name: string) {
   return name
@@ -442,6 +449,16 @@ export function patchRoutes({ routes }) {
   Object.keys(routes).forEach(key => {
     const { icon } = routes[key];
     if (icon && typeof icon === 'string') {
+      ${
+        isIconsFeatureEnable
+          ? `const Component = getIconComponent(icon)
+      if (Component) {
+        routes[key].icon = <Icon icon={icon} width={14} height={14} />;
+        return;
+      }`
+          : ''
+      }
+
       const upperIcon = formatIcon(icon);
       if (icons[upperIcon] || icons[upperIcon + 'Outlined']) {
         routes[key].icon = React.createElement(icons[upperIcon] || icons[upperIcon + 'Outlined']);

packages/preset-umi/src/features/icons/icons.ts

@@ -322,10 +322,14 @@ interface IUmiIconProps extends React.SVGAttributes<SVGElement> {
   flip?: 'vertical' | 'horizontal' | 'horizontal,vertical' | 'vertical,horizontal';
 }
 
+export const getIconComponent = (icon: Pick<IUmiIconProps, 'icon'>) => {
+  const iconName = normalizeIconName(alias[icon] || icon);
+  return iconsMap[iconName];
+}
+
 export const Icon = React.forwardRef<HTMLSpanElement, IUmiIconProps>((props, ref) => {
   const { icon, hover, style, className = '' , rotate, spin, flip, ...extraProps } = props;
-  const iconName = normalizeIconName(alias[icon] || icon);
-  const Component = iconsMap[iconName];
+  const Component = getIconComponent(icon);
   if (!Component) {
     // TODO: give a error icon when dev, to help developer find the error
     return null;