Ant Design Pro V5 Introduction: Secondary menus do not display ICONS solution

User Requirement Scenario

Ant Design Pro V5 version 2 menu does not display ICONS. Officially, this feature is deliberately turned off. The main reason is that to support this, when dynamically generating the menu, it means introducing all the image libraries, resulting in an increase in project size of around 3M.

The solution

Add the following menuItemRender content to app.tsx, as follows:

// Fixed 2021.7.8 export const layout: RunTimeLayoutConfig = ({initialState}) => {return {// menuItemRender: (menuItemProps, defaultDom) => { if ( menuItemProps.isUrl || ! menuItemProps.path) { return defaultDom; <Link to={menuItemProps. Path}> {menuItemProps. Pro_layout_parentKeys && menuItemProps.pro_layout_parentKeys.length > 0 && menuItemProps.icon}{defaultDom} </Link> ); }, rightContentRender: () => <RightContent />, disableContentMargin: false, /* disableContentMargin: { content: initialState? .currentUser? .name, }, */ footerRender: () => <Footer />, onPageChange: () => { const { location } = history; // If you are not logged in, redirect to login if (! initialState? .currentUser && location.pathname ! == loginPath) { history.push(loginPath); } }, links: isDev ? <Link to="/umi/plugin/ openAPI "target="_blank"> <span> < / Link >, < Link to = "/ ~ docs" > < BookOutlined / > < span > business component document < / span > < / Link >, * /] : [], menuHeaderRender: // unAccessible: <div>unAccessible</div>,... initialState? .settings, }; };Copy the code