【react】---react项目中如何使用iconfont
一、路由配置
export const TabBarRouter = [
{
path:"/home",
icon:"\ue628",
name:"首页",
meta:{
flag:true
},
component:Home
},
{
path:"/find",
icon:"\ue663",
name:"发现",
meta:{
flag:true
},
component:Find
},
{
path:"/order",
name:"订单",
icon:"\ue737",
meta:{
flag:true
},
component:Order
},
{
path:"/mine",
name:"我的",
icon:"\ue617",
meta:{
flag:true
},
component:Mine
}
]
二、Tabbar遍历
<ul>
{
TabBarRouter.map((item,index) => (
<li key={index}>
<NavLink to={item.path}>
<i className="iconfont">{item.icon}</i>
<span>{item.name}</span>
</NavLink>
</li>
))
} </ul>
注意:
页面上不能显示字体图片了,而是直接显示字体编码
原因是字体编码后面四位是Unicode编码,想使用字符串来传递的话,只要将 "" 改为 “\ue655” 即可
【react】---react项目中如何使用iconfont的更多相关文章
- Immutable.js 以及在 react+redux 项目中的实践
来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...
- 在React旧项目中安装并使用TypeScript的实践
前言 本篇文章默认您大概了解什么是TypeScript,主要讲解如何在React旧项目中安装并使用TypeScript. 写这个的目的主要是网上关于TypeScript这块的讲解虽然很多,但都是一些语 ...
- vue项目中使用阿里iconfont图标
在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...
- Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 下面是vue.element-ui项目,如何使用阿里iconfont图标库的方法. 准备工作 1. 先注册,再登录.找 ...
- 组装者模式在React Native项目中的一个实战案例
前言 在实际的开发中,如果遇到多个组件有一些共性,我们可以提取一个BaseItem出来,然后在多个组件中进行复用,一种方式是通过继承的方式,而今天我们要说的是另一种方式--组装者模式. 什么是组装者模 ...
- react 调用项目中的 .html 文件
(1)将 html 文件 放于 public 文件夹下 (2)window.open('about:blank').location.href="http://localhost:3000/ ...
- 在项目中在线使用Iconfont图标
Iconfont真的很强大,图标数量惊人,基本任意的关键词都能搜索到你想要的结果.而且是国产的,网速会比较快,还可以改变图标颜色. 它提供svg.png.ai三种格式下载,之前我一直都是乖乖的一个个下 ...
- React Native(ios)项目中logo,启动屏设置
由于logo和启动屏尺寸多,react native(ios)中没有命令可以自动生成各种的尺寸,所以可以使用以下办法:在ionic项目中生成(使用命令:ionic resources)后,再粘贴到re ...
- 如何在非 React 项目中使用 Redux
本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...
随机推荐
- LeetCode 102. Binary Tree Level Order Traversal 动态演示
按层遍历树,要用到queue class Solution { public: vector<vector<int>> levelOrder(TreeNode* root) { ...
- js比较日期时间的大小
var myDate = new Date(); var timed = myDate.toLocaleDateString(); var oDate1 = new Date(item.express ...
- 属性选择器 [attribute^=value] [attribute~=value] [attribute|=value] [attribute*=value]
这是css属性选择器的一种:[attribute^=value] ,用来匹配属性值以指定值开头的每个元素.例如: [class^="test"] { background:#fff ...
- Python for Eclipse插件Pydev安装后eclipse里面看不到
反复安装几次在eclipse里面都找不到,崩溃了,有的说是pydev版本不对,应该和python版本一致,都是扯淡,去pydev官网看了下requirement原来是需要Java1.7+以上,安装1. ...
- python新手上车001
python新手上车001 一般建议: 1.下载:从https://www.python.org/downloads/windows/ python官网进行下载建议就从3.7.2开始吧(我从这个版本 ...
- HDU 3571 N-dimensional Sphere( 高斯消元+ 同余 )
N-dimensional Sphere Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Oth ...
- shell中#*,##*,#*,##*,% *,%% *的含义及用法
介绍下Shell中的${}.##和%%使用范例,本文给出了不同情况下得到的结果.假设定义了一个变量为:代码如下:file=/dir1/dir2/dir3/my.file.txt可以用${ }分别替换得 ...
- ftp搭建记录
1.安装vsftpd的rpm包 rpm -ivh vsftpd-2.0.5-16.el5_4.1.i386.rpm 使用YUM命令安装 yum install vsftpd -y. 2.ftp命令 s ...
- RbMQ 简介
Broker:简单来说就是消息队列服务器实体. Exchange:消息交换机,它指定消息按什么规则,路由到哪个队列. Queue:消息队列载体,每个消息都会被投入到一个或多个队列. Binding:绑 ...
- GIT 的常见用法
git init 新建代码库 git clone新建项目 git branch 查看分支 git config 显示配置 git config -e 显示配置文件 git config user.na ...