react---react项目中如何使用iconfont
Posted nanianqiming
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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的主要内容,如果未能解决你的问题,请参考以下文章
深入浅出TypeScript- 在React项目中使用TypeScript
如何在 React / React Native 中使用 Emscripten 编译的 JavaScript