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