标签：name component iconfont react flag meta 使用 path icon

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

 转载 ：https://www.cnblogs.com/nanianqiming/p/11273603.html  Alley巷子

注意：

页面上不能显示字体图片了，而是直接显示字体编码

原因是字体编码后面四位是Unicode编码，想使用字符串来传递的话,只要将 "" 改为 “\ue655” 即可

一、路由配置

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>

   

标签：name,component,iconfont,react,flag,meta,使用,path,icon
来源： https://www.cnblogs.com/xiaoniaohhl/p/11301692.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。