Use iconfont react [react] --- react projects how to use iconfont

[React] --- react projects how to use iconfont

 Reprinted: https://www.cnblogs.com/nanianqiming/p/11273603.html   Alley alley

note:

Pictures can not display fonts on the page, but directly display font encoding

The reason behind the font is Unicode encoded four bits are encoded, want to pass a string of words, as long as the "& # xe655;" was changed to "\ ue655" to

First, routing configuration

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

 

Two, Tabbar traversal

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

 

 

First, routing configuration

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

 

Two, Tabbar traversal

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