欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

浅谈Ant Design Pro 菜单自定义 icon

程序员文章站 2022-03-24 08:59:48
ant design pro 官方文档说明 在菜单中使用自定义的 icon由于 umi 的限制,在 router.config.js 是不能直接只是用组件的,pro 中暂时支持 使用 本身的 icon...

ant design pro 官方文档说明 在菜单中使用自定义的 icon

由于 umi 的限制,在 router.config.js 是不能直接只是用组件的,pro 中暂时支持 使用 本身的 icon type,和传入一个 img 的 url。只需要直接在 icon 属性上配置即可,如果是个 url,pro 会自动处理为一个 img 标签。

如果这样还不能满足需求,可以自定义 geticon 方法。

如果你想使用 iconfont 的图标,你可以使用ant.desgin的自定义图标.

1. geticon方法

这个geticon 来自于 antd pro 源代码 geticon 很全面,既可以用 icon(使用antd 提供的icon),又可以用 iconfont(使用仓库的icon),还可以用静态资源文件(<img src={....} /> 转换成 icon);

实际项目中很多时候是需要替换成公司设计师设计的icon,因此我将他做了个简单的转换

注意:img width height 设置为 1em ,让它自适应parent组件的大小,实现菜单打开/关闭时,图片的缩放,如果给具体数值则没有缩放效果!!!

2. 使用ant.desgin的自定义图标(使用 svg).

利用 icon 组件封装一个可复用的自定义图标。可以通过 component 属性传入一个组件来渲染最终的图标,以满足特定的需求。

代码来自于

补充知识:ant design pro of vue 项目中路由菜单icon 修改或新增

在 config / router.config.js 中修改,直接从 取,只要 icon 组件的 type 值即可。

如:

<a-icon type="user" />

浅谈Ant Design Pro 菜单自定义 icon

以上这篇ant design pro 菜单自定义 icon就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。