Ant Design Pro 菜单icon图标修改或新增

最新推荐文章于 2024-06-28 09:15:34 发布
最新推荐文章于 2024-06-28 09:15:34 发布
阅读量3.5k 收藏 1
点赞数 4
分类专栏： Ant Design 文章标签： ue4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/g313105910/article/details/120953121
版权

由于Ant Design Pro菜单和以前不一样了，去官网查到的Icon图标无法直接使用名称了，那怎么办呢，办法总是比问题多的，进入官网的图标组件，找到你想要用的图标，进入开发模式

图标 Icon - Ant Design

找到图标的data-icon属性，如下图

 放大一点

将data-icon的内容替换到Ant Design Pro 项目菜单中的icon值即可

图标愉快的显示出来了

花开花落的个人博客
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
Ant Design Pro 菜单自定义 icon
钬码狼酷的博客
05-23 2万+
Ant Design Pro 官方文档说明在菜单中使用自定义的 icon 由于 umi 的限制，在router.config.js是不能直接只是用组件的，Pro 中暂时支持 使用ant.design本身的 icon type，和传入一个 img 的 url。只需要直接在 icon 属性上配置即可，如果是个 url，Pro 会自动处理为一个 img 标签。 如果这样还不能满足需求，可以...
浅谈Ant Design Pro 菜单自定义 icon
01-18
Ant Design Pro 官方文档说明 在菜单中使用自定义的 icon 由于 umi 的限制，在 router.config.js 是不能直接只是用组件的，Pro 中暂时支持 使用 ant.design 本身的 icon type，和传入一个 img 的 url。只需要直接在 icon 属性上配置即可，如果是个 url，Pro 会自动处理为一个 img 标签。 如果这样还不能满足需求，可以自定义 getIcon 方法。 如果你想使用 iconfont 的图标，你可以使用ant.desgin的自定义图标. 1. getIcon方法 /* eslint no-useless-escape:0
antd pro 动态菜单实现及icon图标不显示问题
最新发布
lanjingmao的博客
06-28 267
antd pro 动态菜单 及 icon不显示实现
ant design Pro 菜单使用iconFont的方法
挥别了青春的博客
10-24 5960
ant design Pro 项目中官方文档提供给我们定义菜单的icon方式有两种: 使用ant design内部的icon 使用http url地址 具体的使用方式可以查看 官方文档 但是怎么使用iconFont的icon呢，这里文档里没有说明 我查看了下它的源码，了解到它内部是可以使用iconFont的，可以看如下代码 // https://github.com/ant-design/an...
antdpro菜单自定义图标
qq_30047905的博客
09-14 1928
创建图标 Ant Design自带了一些图标（https://ant.design/components/icon-cn/），但是符合项目中的图标很少，需要自己去设计或者去网上下载字体图标，这里推荐去https://www.iconfont.cn下载或上传自己想要的图片， 使用图标 1.在线字体使用 复制 //at.alicdn.com/t/font_2808839_p5hy7qk0gkj.js 修改项目defaultSettings.ts 文件中的ico...
ant-design-pro 动态菜单配置Icon和菜单权限显隐控制
iorn_mangg的博客
06-02 6627
ant-design-pro 修改为动态菜单有很多大佬都给了解决方法，就不多说直接进入怎么配置动态icon！！！！ 在配置动态菜单时发现，后台接口返回的路由必须要在config.ts中的routes配置，才能正常显示。这下route都确定好了，route中的icon也是确定的，即使接口数据icon不一样，显示依旧会出问题，会显示icon的文字。 所以我们就要自定义menu的样式了。 首先在BasicLayout.tsx中查看代码，我的是v4版本，用的是proLayout来搭建的菜单框架，githu
ant design pro vue左侧菜单自定义图标
weixin_56927228的博客
01-04 3557
ant design pro vue左侧菜单自定义图标
ant design pro动态菜单
03-30
在Ant Design Pro中，菜单数据通常以树形结构表示，根节点代表顶级菜单，子节点代表二级或更低级别的菜单。我们可以使用`Menu`组件来渲染这个树形结构，通过`Menu.Item`和`Menu.SubMenu`来创建菜单项和子菜单。 在...
ant design pro新版本动态菜单
12-26
基于12月版本的ant design pro开源项目的动态菜单生成的完整方法附代码，粘贴就可使用，简单方便。内含解说。直接能用，本人亲测，非诚勿扰！！！
ant design pro 菜单图标引入问题 iconfontUrl inconfont图标本地
fred8的博客
07-30 2614
ant design pro 菜单栏使用图标 官网使用inconfont图标，推荐使用inconfont官网的线上地址 查看地址：https://pro.ant.design/zh-CN/docs/new-page/ 我的项目是在config.ts 中的iconfontUrl export default { navTheme: "dark", // 菜单的主题 primaryColor: "daybreak", // Ant Design 的主色调 layout: "sidemenu", /
【吐槽】ant design pro v5 icon问题
m0_37694033的博客
08-31 221
ant design
ant design pro框架动态获取菜单栏icon图标不显示
qq_51976882的博客
01-28 374
动态获取菜单栏内容，icon图标不显示，依照官方文档操作仍无效果。打印控制台icon字段为underfind。icon 只能用 dom，access 必须要触发页面的重新渲染才有用。遍历从服务器端动态获取菜单内容为每一个层级设置icon的时候，
Ant Design Pro 使用自定义iconfont图标，改变导航栏的图标
weixin_44119268的博客
10-18 7958
Ant Design Pro 使用iconfont上的图标有两种方法: 1、加载在线图标 创建一个项目（图标的前缀一定要设置为：icon-） 创建远程连接 复制代码，找到ant design pro项目中的src下的defaultSettings.js，设置iconfontUrl的路径 在路由配置上使用使用就可以了 2、加载离线图标 加载离线的图标，需要把iconfont上编辑好的图...
Antd Pro实现Icon图标选择器
weixin_47137972的博客
01-02 1128
antd pro实现自定义图标选择器
Antd Design Pro二级菜单不显示icon问题
咕咚在否的博客
04-22 4715
Antd Design Pro二级菜单不显示icon问题 ant pro配置全局layout
ant design pro 修改logo图片名称位置
weixin_41590250的博客
11-05 3394
修改网页title的图片在：public/icons目录下 更换 Ant Design Pro 的 logo 和名称： 位置：/public/favicon.png 只须将制作好的公司logo或者图片，将其替换掉即可。 有小伙伴反映，替换后依然没有起作用。这是有缓存的问题，解决办法：重启浏览器，或者重启一下本地服务器（npm start）即可。 ...
ant-design-vue vue2图标选择器
Tiny2017的博客
10-11 2417
基于vue2和ant-design-vue封装的一个图标选择器 1.效果图 2.代码 iconPicker.vue <template> <div> <a-popover :trigger="trigger" placement="bottomLeft" v-model="visible" > <template slot="title"> <a
ant 后台自定义左侧菜单的图标
a_靖的博客
07-14 2873
AntDesignVue自定义菜单图标
ant design pro, 菜单图标引入antd design自带的图标
09-05
Ant Design Pro 是基于 Ant Design 的一套企业级中后台前端/设计解决方案，提供了丰富的组件和模板。其中，菜单图标引入了 Ant Design 自带的图标集合。 Ant Design 是一套 React UI 组件库，提供了丰富的常用图标，如文件、编辑、删除等。在 Ant Design Pro 中，我们可以通过引入 Ant Design 的图标库来快速使用这些图标。 在使用 Ant Design Pro 的菜单时，我们可以通过配置菜单项的图标属性，来使用 Ant Design 自带的图标。首先，我们需要在组件中引入 `import { menu } from 'antd';`，这样就可以使用 Ant Design 的 Menu 组件。 然后，在菜单配置文件中，通过设置图标属性 `icon`，传入需要使用的 Ant Design 图标的名称即可，例如 `icon: 'FileOutlined'`。 Ant Design Pro 还提供了一些自定义图标的功能，我们可以将自定义图标放置在 `src/assets/icons` 文件夹中，并在菜单配置文件中设置自定义图标的路径。 总之，通过引入 Ant Design 的图标库，Ant Design Pro 提供了丰富的图标选择，使菜单的设计更加灵活多样，满足不同项目的需求。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花开花落的个人博客

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值