Ant Design Pro组件pro-layout菜单自定义icon，以及二级菜单不显示icon处理

最新推荐文章于 2024-08-06 10:11:52 发布

twelvet

最新推荐文章于 2024-08-06 10:11:52 发布

阅读量7.4k

点赞数 2

分类专栏：经验分享文章标签： react ant

本文链接：https://blog.csdn.net/twelvet/article/details/108548029

版权

经验分享专栏收录该内容

1 篇文章

订阅专栏

使用IconFont

IconFont官网，进入后我们登陆，然后创建一个项目管理
在这里插入图片描述
图中的连接是Icon的地址，需要把它放到我们项目配置下的iconfontUrl参数下

注意！！！

创建项目时
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 (
        <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>

           </>
       )
}}