react 使用 iconfont

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

 轉載 ： http://www.javashuo.com/article/p-qcwxodse-em.html  Alley巷子

注意：

頁面上不能顯示字體圖片了，而是直接顯示字體編碼

緣由是字體編碼後面四位是Unicode編碼，想使用字符串來傳遞的話,只要將 "" 改成 「\ue655」 便可

1、路由配置

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
    }
]

 

2、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>