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编码,想使用字符串来传递的话,只要将 "&#xe655;" 改为 “\ue655” 即可

以上是关于react---react项目中如何使用iconfont的主要内容,如果未能解决你的问题,请参考以下文章

深入浅出TypeScript- 在React项目中使用TypeScript

如何在 React / React Native 中使用 Emscripten 编译的 JavaScript

利用 React/Redux/React-Router 4/webpack 开发大型 web 项目时如何按需加载

基于react+如何搭建一个完整的前端框架

react项目开发---小知识总结

[react] React如何进行代码拆分?拆分的原则是什么?