Ant Design Pro组件pro |
您所在的位置：网站首页 › 蚂蚁设计图片 › Ant Design Pro组件pro |
Ant Design Pro组件pro
|
使用IconFont
IconFont官网，进入后我们登陆，然后创建一个项目管理 创建项目时 FontClass/Symbol 前缀 一定要是：icon- 这是规定的，不要随便写 解决在Pro V4版本二级后均不显示Icon的问题这时我们就需要使用到ant提供的Icon组件 createFromIconfontCN import { createFromIconfontCN } from '@ant-design/icons' const IconFont = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_2059726_d3oz05vvs4i.js', });我们对菜单的渲染进行重写，即可解决不显示的问题 // 重写菜单渲染 menuItemRender={(TWTProps, defaultDom) => { return ( TWTProps.icon && defaultDom} ) }} // 重写拥有子菜单菜单项的 render 方法 subMenuItemRender={(TWTProps) => { return ( {TWTProps.icon && TWTProps.name} ) }} |
图中的连接是Icon的地址，需要把它放到我们项目配置下的iconfontUrl参数下【本文地址】