使用IconFont

IconFont官网，进入后我们登陆，然后创建一个项目管理

图中的连接是Icon的地址，需要把它放到我们项目配置下的iconfontUrl参数下

注意！！！

创建项目时

FontClass/Symbol 前缀 一定要是：icon-

这是规定的，不要随便写

解决在Pro V4版本二级后均不显示Icon的问题

这时我们就需要使用到ant提供的Icon组件 createFromIconfontCN

import {createFromIconfontCN } from '@ant-design/icons'const IconFont = createFromIconfontCN({scriptUrl: '///t/font_2059726_d3oz05vvs4i.js',});

我们对菜单的渲染进行重写，即可解决不显示的问题

// 重写菜单渲染menuItemRender={(TWTProps, defaultDom) => {return (<Link to={TWTProps.path ? TWTProps.path : '#'}>{TWTProps.icon && < IconFont type={TWTProps.icon.toString()} />}{defaultDom}</Link>)}}// 重写拥有子菜单菜单项的 render 方法subMenuItemRender={(TWTProps) => {return (<><span className="ant-pro-menu-item"><span role="img" className="anticon">{TWTProps.icon && < IconFont type={TWTProps.icon.toString()} />}</span><span>{TWTProps.name}</span></span></>)}}