【react-onsenui】iphoneでreact-onsenuiのアイコンが表示されない時に試したこと

2020-12-02 React

react-onsenUIのIconコンポーネントをを使っていてiphoneでの表示が芳しくなかったので原因を究明することに。

従来のreact-onsenUIのIconの基本的な実装は以下の通り。

</pre>
<Icon size={25} style={{color: "#FFB000"}} icon={{material: 'md-minus-circle'}} />
<pre>

ここでは例としてマイナスボタンを挙げています。androidの場合は-ボタンを丸で囲ったアイコンを

表示させられるのですが、冒頭でも伝えた通りiphoneでは上記のやり方では正確に描画することができません。

以下解決方法↓

公式サイトでないCodePenを参考にしましたが、どうやらdefaultプロパティにiphoneで表示したいiconを

設定することでこれを解消できるそう。試しに実装してみると綺麗に表示させることができました。

という訳でiphone・android両対応させたい時は以下のプロパティを実装すること。

</pre>
icon={{default: 'ion-ios-remove-circle', material: 'md-minus-circle'}}
<pre>

iphone対応のアイコンはこちらで探すことができます↓