ant design Pro 菜单使用iconFont的方法

最新推荐文章于 2025-05-16 09:29:20 发布

置顶挥别了青春

最新推荐文章于 2025-05-16 09:29:20 发布

阅读量6.1k

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wang729506596/article/details/102713815

react 专栏收录该内容

2 篇文章

订阅专栏

本文介绍在AntDesign Pro项目中如何使用IconFont图标，需满足两个条件：引入IconFont的URL链接及icon命名以'icon-'开头。通过修改配置文件并遵循特定格式，即可在项目中成功应用IconFont图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ant design Pro 项目中官方文档提供给我们定义菜单的icon方式有两种:

使用ant design内部的icon
使用http url地址

具体的使用方式可以查看官方文档

但是怎么使用iconFont的icon呢，这里文档里没有说明

我查看了下它的源码，了解到它内部是可以使用iconFont的，可以看如下代码

// https://github.com/ant-design/ant-design-pro-layout/blob/master/src/SiderMenu/BaseMenu.tsx
// scriptUrl: iconFont
let IconFont = Icon.createFromIconfontCN({
  scriptUrl: defaultSettings.iconfontUrl,
});

// Allow menu.js config icon as string or ReactNode
//   icon: 'setting',
//   icon: 'icon-geren' #For Iconfont ,
//   icon: 'http://demo.com/icon.png',
//   icon: '/favicon.png',
//   icon: <Icon type="setting" />,
const getIcon = (icon?: string | React.ReactNode): React.ReactNode => {
  if (typeof icon === 'string') {
    if (isUrl(icon)) {
      return (
        <Icon
          component={() => (
            <img src={icon} alt="icon" className="ant-pro-sider-menu-icon" />
          )}
        />
      );
    }
    if (icon.startsWith('icon-')) {
      return <IconFont type={icon} />;
    }
    return <Icon type={icon} />;
  }
  return icon;
};

以上代码比较简单，大致意思就是要使用iconFont的图标必须满足两个条件

传入一个iconFont的url链接
icon命名必须以icon-开头

这个url怎么来呢，这个url就是下图中的url部分，需要将后缀名改为.js

依照上图，找到这个url，然后把它赋值给config/defaultSettings.ts下的iconfontUrl属性。

export default {
  navTheme: 'dark',
  primaryColor: '#333EBC',
  layout: 'sidemenu',
  contentWidth: 'Fluid',
  fixedHeader: true,
  autoHideHeader: false,
  fixSiderbar: true,
  colorWeak: false,
  menu: {
    locale: true,
  },
  title: 'The Force',
  pwa: false,
  iconfontUrl: '//at.alicdn.com/t/font_1266539_d2jqk1q16kg.js',
} as DefaultSettings;

最后就可以在路由配置文件config/config.ts下的路由配置文件中使用iconFont的图标了

 {
  path: '/home',
  name: 'home',
  icon: 'icon-home', // 需要以 icon- 开头
  component: './home',
},

如果帮到你，请点个赞哦！！