码迷,mamicode.com
首页 > 其他好文 > 详细

【react】---react项目中如何使用iconfont

时间:2019-07-31 00:51:17      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:--   pat   link   index   react   size   字体   遍历   font   

一、路由配置

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

标签:--   pat   link   index   react   size   字体   遍历   font   

原文地址:https://www.cnblogs.com/nanianqiming/p/11273603.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!