一、路由配置

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的更多相关文章

  1. Immutable.js 以及在 react+redux 项目中的实践

    来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...

  2. 在React旧项目中安装并使用TypeScript的实践

    前言 本篇文章默认您大概了解什么是TypeScript,主要讲解如何在React旧项目中安装并使用TypeScript. 写这个的目的主要是网上关于TypeScript这块的讲解虽然很多,但都是一些语 ...

  3. vue项目中使用阿里iconfont图标

    在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...

  4. Vue、Element-ui项目中如何使用Iconfont(阿里图标库)

    我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 下面是vue.element-ui项目,如何使用阿里iconfont图标库的方法. 准备工作 1. 先注册,再登录.找 ...

  5. 组装者模式在React Native项目中的一个实战案例

    前言 在实际的开发中,如果遇到多个组件有一些共性,我们可以提取一个BaseItem出来,然后在多个组件中进行复用,一种方式是通过继承的方式,而今天我们要说的是另一种方式--组装者模式. 什么是组装者模 ...

  6. react 调用项目中的 .html 文件

    (1)将 html 文件 放于 public 文件夹下 (2)window.open('about:blank').location.href="http://localhost:3000/ ...

  7. 在项目中在线使用Iconfont图标

    Iconfont真的很强大,图标数量惊人,基本任意的关键词都能搜索到你想要的结果.而且是国产的,网速会比较快,还可以改变图标颜色. 它提供svg.png.ai三种格式下载,之前我一直都是乖乖的一个个下 ...

  8. React Native(ios)项目中logo,启动屏设置

    由于logo和启动屏尺寸多,react native(ios)中没有命令可以自动生成各种的尺寸,所以可以使用以下办法:在ionic项目中生成(使用命令:ionic resources)后,再粘贴到re ...

  9. 如何在非 React 项目中使用 Redux

    本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...

随机推荐

  1. upc组队赛15 Supreme Number【打表】

    Supreme Number 题目链接 题目描述 A prime number (or a prime) is a natural number greater than 1 that cannot ...

  2. 手机网页制作的认识(有关meta标签)(转)

    仅用来记录学习: 链接地址:https://blog.csdn.net/ye1992/article/details/22714621

  3. selenium,webdriver 执行js语句 对象是百度

    代码要多敲 注释要清晰 最后的两种方法,没有实现我想要的结果 有知道的朋友,给我留言吧 #执行js语句 from selenium import webdriver import time #生成浏览 ...

  4. 用vim写go代码——vim-go插件

    GoImport:导入包 GoImport!:导入远程包 GoImportAs: 导入包并且重命名

  5. 数组归一 reduce (数组归一) reduceRight(从右至左)

    var addTwoNumbers = function(l1, l2) { var e = l1 .reverse() .map((v, index, array) => v * Math.p ...

  6. 2018-2-13-win10-uwp-圆角按钮

    title author date CreateTime categories win10 uwp 圆角按钮 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17: ...

  7. linux c 链接详解4-共享库

    4. 共享库 4.1. 编译.链接.运行 组成共享库的目标文件和一般的目标文件有所不同,在编译时要加-fPIC选项,例如: $ gcc -c -fPIC stack/stack.c stack/pus ...

  8. Codeforces 354B 博弈, DP,记忆化搜索

    题意:现在有一个字符矩阵,从左上角出发,每个人交替选择一个字符.如果最后字符a数目大于字符b,那么第一个人获胜,否则b获胜,否则平均.现在双方都不放水,问最后结果是什么? 思路:这题需要注意,选择的字 ...

  9. 从Flask-Script迁移到Flask-Cli

    Abstrct flask从0.11版本开始引入了click提供命令行支持,在此之前我们通常会引入Flask-Script来提供. 在<Flask web开发>这本书编写时flask0.1 ...

  10. Caused by: java.lang.NoClassDefFoundError: javax/validation/ParameterNameProvider

    问题现象:今天部署代码的时候发现,在beta环境可以正常部署,但是到了test环境就一直不成功,我以为是环境问题,就重新部署,但是没效,看了看日志发现问题是:Caused by: java.lang. ...