From b89761bfeb41b2c7c10cf0104c156d24f2dac673 Mon Sep 17 00:00:00 2001 From: DonovanYe Date: Mon, 1 Jul 2024 18:06:27 +0800 Subject: [PATCH 1/5] =?UTF-8?q?feat(max/layout):=20=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=9B=BE=E6=A0=87=E4=BD=BF=E7=94=A8=E5=9B=BE?= =?UTF-8?q?=E6=A0=87=E9=9B=86=E6=88=96=E8=80=85=E6=9C=AC=E5=9C=B0=E5=9B=BE?= =?UTF-8?q?=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/docs/docs/max/layout-menu.md | 2 ++ examples/max/.umirc.ts | 5 +++-- examples/max/package.json | 2 ++ examples/max/pages/index.tsx | 7 ++++++- packages/plugins/src/layout.ts | 7 +++++++ .../preset-umi/src/features/icons/icons.ts | 8 ++++++-- pnpm-lock.yaml | 18 ++++++++++++++++++ 7 files changed, 44 insertions(+), 5 deletions(-) diff --git a/docs/docs/docs/max/layout-menu.md b/docs/docs/docs/max/layout-menu.md index 4eeb39e25f97..7d46aca15a48 100644 --- a/docs/docs/docs/max/layout-menu.md +++ b/docs/docs/docs/max/layout-menu.md @@ -191,6 +191,8 @@ icon: 'HomeFilled'; icon: 'HomeTwoTone'; ``` +兼容默认配置[icons](https://umijs.org/docs/api/config#icons)，可以在使用图标集或者本地的图标。具体请参考配置的icons页面。 + #### access - Type: `string` diff --git a/examples/max/.umirc.ts b/examples/max/.umirc.ts index 3dbb892f951d..3ff7983d7f4c 100644 --- a/examples/max/.umirc.ts +++ b/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'], }, }); diff --git a/examples/max/package.json b/examples/max/package.json index 653719fb1333..3f03f810cb20 100644 --- a/examples/max/package.json +++ b/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", diff --git a/examples/max/pages/index.tsx b/examples/max/pages/index.tsx index 5ba558d16b57..92f0e51c91c0 100644 --- a/examples/max/pages/index.tsx +++ b/examples/max/pages/index.tsx @@ -54,7 +54,12 @@ export default function HomePage() { tailwindcss -

Icons

+

Icon library icons

+ + + + +

Local Icons

{includedIcons.map((i) => { return ; diff --git a/packages/plugins/src/layout.ts b/packages/plugins/src/layout.ts index 0a711ac4fdfa..e8db33dd1e45 100644 --- a/packages/plugins/src/layout.ts +++ b/packages/plugins/src/layout.ts @@ -429,6 +429,7 @@ export default { ${icons.join(', ')} }; content: ` import React from 'react'; import icons from './icons'; +import { Icon, getIconComponent } from '@umijs/max'; function formatIcon(name: string) { return name @@ -442,6 +443,12 @@ export function patchRoutes({ routes }) { Object.keys(routes).forEach(key => { const { icon } = routes[key]; if (icon && typeof icon === 'string') { + const Component = getIconComponent(icon) + if (Component) { + routes[key].icon = ; + return; + } + const upperIcon = formatIcon(icon); if (icons[upperIcon] || icons[upperIcon + 'Outlined']) { routes[key].icon = React.createElement(icons[upperIcon] || icons[upperIcon + 'Outlined']); diff --git a/packages/preset-umi/src/features/icons/icons.ts b/packages/preset-umi/src/features/icons/icons.ts index fc4e87668a96..531c98df15d5 100644 --- a/packages/preset-umi/src/features/icons/icons.ts +++ b/packages/preset-umi/src/features/icons/icons.ts @@ -322,10 +322,14 @@ interface IUmiIconProps extends React.SVGAttributes { flip?: 'vertical' | 'horizontal' | 'horizontal,vertical' | 'vertical,horizontal'; } +export const getIconComponent = (icon: Pick) => { + const iconName = normalizeIconName(alias[icon] || icon); + return iconsMap[iconName]; +} + export const Icon = React.forwardRef((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; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 89a5b2895eba..2a5a72f48dd4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -737,6 +737,12 @@ importers: specifier: 18.3.1 version: 18.3.1(react@18.3.1) devDependencies: + '@iconify-json/ic': + specifier: 1.1.17 + version: 1.1.17 + '@iconify-json/solar': + specifier: 1.1.9 + version: 1.1.9 cross-env: specifier: ^7.0.3 version: 7.0.3 @@ -13767,6 +13773,18 @@ packages: '@iconify/types': 2.0.0 dev: true + /@iconify-json/ic@1.1.17: + resolution: {integrity: sha512-EvAjZzVESmN36zlyefylePUNaU2BQ3eRKVZ6KQSQ2bG01ppoZaiFZRri74VTyvp5Mlv2yn68ux1fgCoT+etGmA==} + dependencies: + '@iconify/types': 2.0.0 + dev: true + + /@iconify-json/solar@1.1.9: + resolution: {integrity: sha512-BcWzZqA02BiQduYizqU/J4v4RNs0MkjZUGpMbejpozH8YQSt3+S/LfV6zfVRonx/2DhXTVSqiLa1abDRAZtojQ==} + dependencies: + '@iconify/types': 2.0.0 + dev: true + /@iconify/types@1.1.0: resolution: {integrity: sha512-Jh0llaK2LRXQoYsorIH8maClebsnzTcve+7U3rQUSnC11X4jtPnFuyatqFLvMxZ8MLG8dB4zfHsbPfuvxluONw==} dev: false From 70e7f20434cebee7c8070239c677e58e6ab75af4 Mon Sep 17 00:00:00 2001 From: DonovanYe Date: Thu, 4 Jul 2024 12:26:08 +0800 Subject: [PATCH 2/5] =?UTF-8?q?refactor(max/layout):=20=E6=A0=B9=E6=8D=AEi?= =?UTF-8?q?cons=E5=8A=9F=E8=83=BD=E6=98=AF=E5=90=A6=E5=BC=80=E5=90=AF?= =?UTF-8?q?=E5=8A=A8=E6=80=81=E6=8F=92=E5=85=A5=E8=8F=9C=E5=8D=95=E9=A1=B9?= =?UTF-8?q?=E4=BD=BF=E7=94=A8icons=E5=8A=9F=E8=83=BD=E7=9A=84=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/plugins/src/layout.ts | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/plugins/src/layout.ts b/packages/plugins/src/layout.ts index e8db33dd1e45..aa0fad3bf193 100644 --- a/packages/plugins/src/layout.ts +++ b/packages/plugins/src/layout.ts @@ -423,13 +423,19 @@ export default { ${icons.join(', ')} }; `, }); + // 是否启用了 icons 功能 + const isIconsFeatureEnable = !!api.config.icons; // runtime.tsx api.writeTmpFile({ path: 'runtime.tsx', content: ` import React from 'react'; import icons from './icons'; -import { Icon, getIconComponent } from '@umijs/max'; +${ + isIconsFeatureEnable + ? `import { Icon, getIconComponent } from '@umijs/max';` + : '' +} function formatIcon(name: string) { return name @@ -443,10 +449,14 @@ export function patchRoutes({ routes }) { Object.keys(routes).forEach(key => { const { icon } = routes[key]; if (icon && typeof icon === 'string') { - const Component = getIconComponent(icon) + ${ + isIconsFeatureEnable + ? `const Component = getIconComponent(icon) if (Component) { routes[key].icon = ; return; + }` + : '' } const upperIcon = formatIcon(icon); From 0fa4819d91a35e69545febd4de9a5173d8e6cbd3 Mon Sep 17 00:00:00 2001 From: DonovanYe Date: Thu, 4 Jul 2024 12:35:56 +0800 Subject: [PATCH 3/5] =?UTF-8?q?refactor(layout/max):=20=E4=BD=BF=E7=94=A8a?= =?UTF-8?q?pi.isPluginEnable=E5=88=A4=E6=96=AD=E6=98=AF=E5=90=A6=E5=BC=80?= =?UTF-8?q?=E5=90=AF=E4=BA=86icons=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/plugins/src/layout.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugins/src/layout.ts b/packages/plugins/src/layout.ts index aa0fad3bf193..b9498500d245 100644 --- a/packages/plugins/src/layout.ts +++ b/packages/plugins/src/layout.ts @@ -424,7 +424,7 @@ export default { ${icons.join(', ')} }; }); // 是否启用了 icons 功能 - const isIconsFeatureEnable = !!api.config.icons; + const isIconsFeatureEnable = api.isPluginEnable('icons'); // runtime.tsx api.writeTmpFile({ path: 'runtime.tsx', From 34361264b25d947231987a7d6ffc71920998790e Mon Sep 17 00:00:00 2001 From: DonovanYe Date: Thu, 4 Jul 2024 12:42:11 +0800 Subject: [PATCH 4/5] =?UTF-8?q?docs(layout-menu):=20=E6=9B=B4=E6=96=B0layo?= =?UTF-8?q?ut=E4=B8=AD=E8=8F=9C=E5=8D=95icon=E7=9B=B8=E5=85=B3=E7=9A=84?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/docs/docs/max/layout-menu.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/docs/max/layout-menu.md b/docs/docs/docs/max/layout-menu.md index 7d46aca15a48..c3c6b0e05f4d 100644 --- a/docs/docs/docs/max/layout-menu.md +++ b/docs/docs/docs/max/layout-menu.md @@ -191,7 +191,7 @@ icon: 'HomeFilled'; icon: 'HomeTwoTone'; ``` -兼容默认配置[icons](https://umijs.org/docs/api/config#icons)，可以在使用图标集或者本地的图标。具体请参考配置的icons页面。 +兼容[icons](https://umijs.org/docs/api/config#icons)功能，打开icons功能后，可以使用图标集或者本地的图标。具体请参考icons功能的相关配置和使用方法。 #### access From 16495ed9fff6f80e281be4268e39c22f75dfd5d3 Mon Sep 17 00:00:00 2001 From: DonovanYe Date: Sun, 7 Jul 2024 21:04:37 +0800 Subject: [PATCH 5/5] =?UTF-8?q?docs(layout-menu):=20=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E8=8F=9C=E5=8D=95icon=E8=AF=B4=E6=98=8E=E4=B8=AD=E7=9A=84?= =?UTF-8?q?=E7=BB=9D=E5=AF=B9=E8=B7=AF=E5=BE=84=E4=B8=BA=E7=9B=B8=E5=AF=B9?= =?UTF-8?q?=E8=B7=AF=E5=BE=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/docs/docs/max/layout-menu.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/docs/max/layout-menu.md b/docs/docs/docs/max/layout-menu.md index c3c6b0e05f4d..fdcd1f0d2f25 100644 --- a/docs/docs/docs/max/layout-menu.md +++ b/docs/docs/docs/max/layout-menu.md @@ -191,7 +191,7 @@ icon: 'HomeFilled'; icon: 'HomeTwoTone'; ``` -兼容[icons](https://umijs.org/docs/api/config#icons)功能，打开icons功能后，可以使用图标集或者本地的图标。具体请参考icons功能的相关配置和使用方法。 +兼容[icons](../../docs/api/config#icons)功能，打开icons功能后，可以使用图标集或者本地的图标。具体请参考icons功能的相关配置和使用方法。 #### access