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;