Antd 导航菜单使用iconfont

在很多项目开发过程中，Iconfont的使用一般不是使用原始库，在不使用原始库过程中我们就需要另辟蹊径，我这里举例的是iconfont库

废话不多说直接上代码和截图

antd给过的导航菜单默认使用了 Icon 图标库

import { Menu, Button } from 'antd';
import {AppstoreOutlined,MenuUnfoldOutlined,MenuFoldOutlined,PieChartOutlined,DesktopOutlined,ContainerOutlined,MailOutlined,
} from '@ant-design/icons';const { SubMenu } = Menu;class App extends React.Component {state = {collapsed: false,};toggleCollapsed = () => {this.setState({collapsed: !this.state.collapsed,});};render() {return (<div style={{ width: 256 }}><Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}</Button><MenudefaultSelectedKeys={['1']}defaultOpenKeys={['sub1']}mode="inline"theme="dark"inlineCollapsed={this.state.collapsed}><Menu.Item key="1" icon={<PieChartOutlined />}>Option 1</Menu.Item><Menu.Item key="2" icon={<DesktopOutlined />}>Option 2</Menu.Item><Menu.Item key="3" icon={<ContainerOutlined />}>Option 3</Menu.Item><SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One"><Menu.Item key="5">Option 5</Menu.Item><Menu.Item key="6">Option 6</Menu.Item><Menu.Item key="7">Option 7</Menu.Item><Menu.Item key="8">Option 8</Menu.Item></SubMenu><SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two"><Menu.Item key="9">Option 9</Menu.Item><Menu.Item key="10">Option 10</Menu.Item><SubMenu key="sub3" title="Submenu"><Menu.Item key="11">Option 11</Menu.Item><Menu.Item key="12">Option 12</Menu.Item></SubMenu></SubMenu></Menu></div>);}
}ReactDOM.render(<App />, mountNode);

以上为 antd 原始代码

如果使用iconfont库，我们需要将

import { AppstoreOutlined, MenuUnfoldOutlined, MenuFoldOutlined, PieChartOutlined, DesktopOutlined, ContainerOutlined, MailOutlined, } from '@ant-design/icons';

<PieChartOutlined /> 等修改为

作为一级菜单Menu.Item是完全可以直接使用的，如果我们使用的 SubMenu 有二级菜单的导航就会出现问题。

所以在SubMenu中使用iconfont 代码如下

<SubMenu key={String(i)} icon={<span className="anticon anticon-appstore"><i className={"iconfont xxxx"} /></span>} title={v.name}><Menu.Item key="5">Option 5</Menu.Item><Menu.Item key="6">Option 6</Menu.Item><Menu.Item key="7">Option 7</Menu.Item><Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>

需要加一个标签包着iconfont标签，并且需要加className="anticon anticon-appstore"

这是一次尝试中遇到的小问题记录。

Antd 导航菜单使用iconfont相关推荐

从Antd 源码到自我实现之 Menu 导航菜单
Antd Menu 简述 Menu 为页面和功能提供导航的菜单列表. 导航菜单是一个网站的灵魂,用户依赖导航在各个页面中进行跳转.一般分为顶部导航和侧边导航,顶部导航提供全局性的类目和功能,侧边导航提 ...
vue项目中引入阿里 iconfont 图标动态渲染导航菜单图标
vue + element 后台项目,项目中都是用的 element-ui 的图标但是导航菜单是通过后台数据渲染的,所以在阿里图标库找了图标给后台,再渲染步骤一: 在图标库找到想要的图标,加入购物 ...
bootstrap 导航菜单折叠位置_下拉菜单的讲究
下拉菜单是前端的常用组件之一,几乎所有前端组件库都提供这一组件.不知道大家有没有思考过如何实现一个下拉菜单,方法要尽量简单.我曾经用纯css实现过一个下拉菜单,思路就是利用overflow的属性,非常 ...
ant-design-vue导航菜单a-menu的详细使用
ant-design-vue导航菜单a-menu的详细使用一.效果一.关键的API 二.注意事项三.代码此文章包含了递归生成三级菜单,刷新状态保留,只展开一个父级菜单等常见问题. 一.效果可 ...
微信小程序实现自定义导航菜单搜索栏
先附上效果图,要达到的效果就是如图所示,把原型的导航菜单去掉,换成对应的搜索栏. 其实还是做法还是比较简单,首先讲一下实现的原理(原理明白实现起来就容易了): 1.先隐藏微信小程序自带的导航菜单: ...
导航条——收缩式导航菜单
1.概述在网站中不仅可以设置导航条,而且还可以设置导航菜单.由于菜单内容比较多,同一页面显示比较杂乱,所以很多的设计者都采用了收缩式的菜单形式. 2.技术要点本实例主要是应用JavaScript控 ...
基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: <ul class="ce& ...
一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览源码下载实现的代码. ...
一款基jquery超炫的动画导航菜单
今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览 ...

Antd 导航菜单使用iconfont

Antd 导航菜单使用iconfont相关推荐

最新文章

热门文章