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対応のアイコンはこちらで探すことができます↓
https://seantheme.com/color-admin/admin/html/ui_ionicons.html
