react native icon などで検索すると出てくる react-native-vector-icon というプラグインがありますが、通常利用するには結構面倒な手順が必要です。(xcode側に登録するとか、、)
ただ、expoを利用していればとても簡単に利用できます。ありがたいです。
今回はその方法を忘備録として残します。
方法
npx create-expo-app で開発をスタートしている場合は特に何かインストールの必要はありません。
※もし --template blank などオプションを設定してスタートした場合は別かもしれません。@expo/vector-iconsが必要なので、インストールしてください。
利用したいアイコンを探す
上記サイトにvector-iconsで利用できるiconの一覧があります。
利用したいものを選びます。今回は MaterialIcons の insights を利用するとします。
利用したいファイルに記載
あとは、利用箇所で上記アイコンを記載すれば完了です。
まず、ファイルにimportを記載します。
// 利用するiconがMaterialIconsにある場合
// 違う場合はそちらを記載。(@expo/vector-icons/AntDesignなど)
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
そして、コンポーネントに記載すれば利用できます。
<MaterialIcons
name={'insights'}
color={color}
size={24}
/>
※tabメニュー内で利用した例
vector-iconsを利用する方法を検索すると非常に面倒な作業が必要そうで割と萎え気味でしたが、expoを利用していると色々用意していてくれるので本当に助かります。
参考になれば幸いです。
参考