react项目Menu菜单栏、iconfont图标引用

1、操作步骤

阿里矢量图标网站
将图标加入购物车
添加至项目
选择Symbol方式引入，复制代码

2、react 引用 iconFont

import { createFromIconfontCN } from '@ant-design/icons';const IconFont = createFromIconfontCN({scriptUrl: ['//at.alicdn.com/t/font_2196242_dq7mz11miut.js', // icon-home  icon-gouwucheman],
});

<IconFont type="icon-home" />
<IconFont type={item.icon} />

3、引用 Menu

import { Menu } from 'antd';
import menuList from './menu'
const { SubMenu } = Menu;

class Slider extends React.Component {render() {return (<HashRouter><Menu theme="dark" defaultOpenKeys={['home']} defaultSelectedKeys={['home']} mode="inline">{menuList.map((item)=>{if(item.subs){return (<SubMenu key={item.index} title={item.name} icon={<IconFont type={item.icon} />}>{item.subs.map((subItem) => {return (<Menu.Item key={subItem.index}><Link to={subItem.path}>{subItem.name}</Link></Menu.Item>)})}</SubMenu>)}else{return (<Menu.Item key={item.index} icon={<IconFont type={item.icon} />}><Link to={item.path}>{item.name}</Link></Menu.Item>)}})}</Menu></HashRouter>);}
}export default Slider;

4、menu.js文件

const menuList =  [{path: '/home',name: '首页',index: 'home',icon: 'icon-home'},{path: '/order_mag',name: '订单管理',index: 'order_mag',icon: 'icon-gouwucheman',subs: [{path: '/promotion',name: '股东活动订单',index: 'promotion',},{path: '/couponOrder',name: '优惠券订单',index: 'couponOrder',}]}
]export default menuList;

5、router/index.js

import React from 'react'
import {Switch, Route, HashRouter} from 'react-router-dom'import App from '../App'
import Login from '../views/login'class MRoute extends React.Component {render (){return(<HashRouter><Switch><Route path="/login" component={ Login } /><App /></Switch></HashRouter>)}
}export default MRoute;

react项目Menu菜单栏、iconfont图标引用相关推荐

vue项目引入彩色iconfont图标
做项目的时候经常会使用到iconfont图标库,在项目开始的时候提前想好需要什么图标,最好是多下载几个可替换的同类型图标,宁滥勿缺(别问,问就是得到了教训),无色的还是彩色的,这点很重要. 首先了解一 ...
Webpack项目中引入IconFont图标
本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标. IconFont官网:https://www.iconfont.cn/ 1.打开IconFont官网并登陆自己的账户. ...
在项目中使用iconfont图标(在线使用)
1.进入到阿里巴巴矢量图官网(https://www.iconfont.cn)搜索你想要的图标并加入项目中,如下图我的项目,项目名highway,已经添加了三个图标. 2.点击Font class 复 ...
uniapp项目中引入iconfont图标
在项目中,难免出现图标不满足我们需求的情况,我们可以去阿里图标库(iconfont-阿里巴巴矢量图标库)选择我们满意的图标. 最近在做uniapp的项目,记录一下引入iconfont的步骤 1.去官网 ...
项目新添加iconfont图标
在iconfont添加你想要的图标到购物车 2.下载至本地 3. 打开下好的文件夹里面找到iconfont.css和iconfont.js文件分别将以下标红内容复制到原有项目的iconfont. ...
vue3项目中如何使用iconfont图标？体积太大？看这篇文章就够了！
正文工具链接: iconfont图标一键下载浏览器插件(2000+图标一秒下载打包) 示例链接: iconfont在vue3中按需使用和编译打包示例说明在vue3项目中使用iconfont图标是 ...
微信小程序如何正确引入iconfont图标
最近在微信小程序踩坑啦,开始愉快了像web项目一样引入iconfont图标,结果发现: 然后?? 对,这个讨厌的小方块,显示失败啦最好一番百度后,成功解决啦,哈哈哈因为,小程序必须先转为base6 ...
vue项目中使用阿里iconfont图标(下载并在本地引用)
vue项目中使用阿里iconfont图标(下载并在本地引用) step1 step2 step3 在scr/asstets/css目录下新建icons文件夹,把图中所需要的四个文件放进去即可记得在m ...
iconfont图标_在React-Native项目中轻松使用iconfont自定义图标
在开发React-Native项目的时候,为了解决图标等一系列问题,往往需要从iconfont中引入图标.为了达到这个目的,网上教程大多都需要额外安装react-native-vector-icons ...

react项目Menu菜单栏、iconfont图标引用

1、操作步骤

2、react 引用 iconFont

3、引用 Menu

4、menu.js文件

5、router/index.js

react项目Menu菜单栏、iconfont图标引用相关推荐

最新文章

热门文章