[反応] --- iconfontを使用する方法のプロジェクトを反応させる反応iconfont使用します

[リアクト] --- iconfontを使用する方法のプロジェクトを反応させます

 転載： https://www.cnblogs.com/nanianqiming/p/11273603.html   路地路地

注意：

写真は、ページ上のフォントを表示するが、直接、フォントのエンコーディングを表示することができません

「＆＃のxe655;」には「\ ue655」に変更されたフォントの背後にある理由は、Unicodeは、限り、単語の文字列を渡したい、4ビットが符号化され、符号化されています

まず、ルーティング設定

輸出のconst TabBarRouter = [ 
    { 
        パス： "/ホーム"、
        アイコン： "\のue628"、
        名称： "首页"、
        メタ：{ 
            フラグ：真
        }、
        コンポーネント：ホーム
    }、
    { 
        パス： "/見つける"、
        アイコン：」 \ ue663" 、
        名称： "发现"、
        メタ：{ 
            フラグ：真
        }、
        成分：検索
    }、
    { 
        パス"/注文"、
        名称： "订单" 
        アイコン： "\のue737"、
        メタ：{ 
            フラグ：真
        }、
        成分：オーダー
    }、
    {
        パス"/鉱山"、
        名称： "我の的" 
        アイコン： "\のue617"、
        メタ：{ 
            フラグ：真
        }、
        成分：マイン
    } 
]

 

二、タブバートラバーサル

<UL> 
                    { 
                        TabBarRouter.map（（項目、指数）=>（
                            <LIキー= {索引}> 
                                <NavLinkへ= {item.path}> 
                                    <私は= "iconfontを"クラス名> {item.icon} </ I > 
                                    <スパン> {item.name} </スパン> 
                                </ NavLink> 
                            </ LI> 
                        ））
                    } 

                </ UL>

 

 

まず、ルーティング設定

輸出のconst TabBarRouter = [ 
    { 
        パス： "/ホーム"、
        アイコン： "\のue628"、
        名称： "首页"、
        メタ：{ 
            フラグ：真
        }、
        コンポーネント：ホーム
    }、
    { 
        パス： "/見つける"、
        アイコン：」 \ ue663" 、
        名称： "发现"、
        メタ：{ 
            フラグ：真
        }、
        成分：検索
    }、
    { 
        パス"/注文"、
        名称： "订单" 
        アイコン： "\のue737"、
        メタ：{ 
            フラグ：真
        }、
        コンポーネント：オーダー
    }、
    {
        パス"/鉱山"、
        名称： "我の的" 
        アイコン： "\のue617"、
        メタ：{ 
            フラグ：真
        }、
        成分：マイン
    } 
]

 

二、タブバートラバーサル

<UL> 
                    { 
                        TabBarRouter.map（（項目、指数）=>（
                            <LIキー= {索引}> 
                                <NavLinkへ= {item.path}> 
                                    <私は= "iconfontを"クラス名> {item.icon} </ I > 
                                    <スパン> {item.name} </スパン> 
                                </ NavLink> 
                            </ LI> 
                        ））
                    } 

                </ UL>