質問: ``` this.setState(index)} onPostChange={() => console.log('postChange')} onReactive={() => console.log('postChange')} position='bottom' index={this.state.index} renderTabs={(activeIndex, tabbar) => [ { content: , tab: }, { content: , tab: }] } /> ``` 上の `tab: ` の行の `icon=` に react-fontawesome のアイコン `` を渡したいのですが、方法がわかりません。 ご存知の方はお教え願えませんでしょうか? 環境 -- node 10.15.0 npm 6.6.0 react 16.7.0 onsenui 2.10.6 react-onsenui 1.11.2 "@fortawesome/fontawesome-svg-core": "^1.2.12", "@fortawesome/free-solid-svg-icons": "^5.6.3", "@fortawesome/react-fontawesome": "^0.1.4",
回答: こんにちは ドキュメントを調べてみると、有効なアイコンの説明 に、以下が書かれています。 > > **Available icons** > > There are three kinds of icons available in Onsen UI: > > > ・Font Awesome > > ・Material Icons > > ・Ionicons > > > The icon attribute is prefixed with fa- for Font Awesome, md- for Material Icons and ion- for Ionicons. > > > なので、おそらく `"md-home"` を `"fa-home"` に修正するだけでいけるのでは?と予想しました。 そこで、昨年末のご質問で、私が回答のために作ったサンプルコードに、以下の修正をしてみました。 * jun68ykt/q166449: Font Awesomeに変更 上記の修正をするだけで、`react-fontawesome` 等の追加インストールをしなくても、以下のように fa-home が表示されるのを確認できました。 !イメージ説明 以上、参考になれば幸いです。 ### 追記 **すみません** ご質問にある、 > > バンドルサイズを削減するため、アイコンパックを除去した onsenui-core.min.js をインポート > > > を見落としていました m(_ _)m となると、 `` に、ご自身で、たとえば `iconComponent` といったpropsを追加して、 ``` } /> ``` のようなことが出来るように Tab のソースを修正することになるのでは?と思います。 そうなると、OnsenUIのissues のほうで相談してみるほうが、コミッターないしそれに近しい人から早くて確実な回答をもらえそうです。 以上、あまり役に立たなそうな回答になってしまいましたが、参考になれば幸いです。