当前位置: 首页 > Web前端 > HTML

AntDesignPro自定义svg菜单图标(无iconfont)

时间:2023-03-28 15:09:23 HTML

环境和依赖umi3.5.0场景AntDesignPro的文档介绍了配置菜单图标的方法。需要在routes.ts中设置icon属性,但是只能使用antd的icon或者使用iconFont。如果我想直接使用设计器svg图片作为菜单图标怎么办?本文提供了导入需要使用的svg的解决步骤资产/icons/menu/home.svg';exportconstIconMap={person:IconPerson,home:IconHome,};从“@/components/MenuIcon”编辑app.tsximport{IconMap};importIconfrom'@ant-design/icons';//...exportconstlayout:RunTimeLayoutConfig=({initialState})=>{return{//...menuDataRender:(menuData)=>{returnmenuData.map((item)=>{return{...item,icon:typeofitem.icon==='string'&&item.icon.indexOf('|svg')>-1?():(item.icon),};});},//...};};//...在路由中。在ts设置iconexport默认值[{path:'/home',name:'Home',icon:'home|svg',component:'./personnel-management/index',},{path:'/personnel-management',name:'人事管理',icon:'person|svg',component:'./personnel-management/index',},];Tips要让svg图片的颜色根据菜单状态变化,设计师提供的svg不能写死色