ant design Pro 菜单使用iconFont的方法

本文介绍在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的图标必须满足两个条件

  1. 传入一个iconFont的url链接
  2. 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',
},

如果帮到你,请点个赞哦!!

### 更改 Ant Design Pro 中的图标 在 Ant Design Pro 项目中,可以通过多种方式实现菜单图标的自定义。一种方法是利用 `ant-design/icons` 和 Iconfont 图标库来替换默认图标。 对于希望完全自定义菜单图标的情况,可以按照如下方式进行操作: #### 方法一:使用 antd 自带图标 如果目标是在应用内采用不同于默认设置的 antd 图标,则可以直接通过安装额外的 icon 组件包并导入所需图标组件完成配置[^1]。 ```javascript import { HomeOutlined, UserOutlined } from '@ant-design/icons'; ``` 接着,在路由配置文件里指定对应的图标属性即可生效新样式。 #### 方法二:集成 Iconfont 字体图标 当需求超出 antd 提供的标准图标范围时,推荐借助阿里巴巴矢量图形库——Iconfont 来扩展可用资源列表。具体做法包括但不限于创建个人专属图标集合,并将其发布成线上字体形式;之后再于项目的入口处全局加载该字体链接[^2]。 ```html <link rel="stylesheet" href="//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css"> ``` 随后便可以在 JSX 文件内部像下面这样声明特定项所使用的个性化图案了。 ```jsx const menuData = [ { name: '首页', icon: <Icon type="icon-home"/>, path: '/', }, ]; ``` 需要注意的是,这里的 `<Icon>` 是来自 react-component/icon 或者其他兼容版本的一个 React 组件实例,用于渲染由 Iconfont 定义的具体字符编码表示的 SVG 形状。 为了确保最佳实践和维护便利性,建议开发者遵循官方文档指导以及社区分享的最佳案例来进行相应调整优化工作。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值