0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

react-native-vector-icons を ios で利用する

Posted at

react native icon などで検索すると出てくる react-native-vector-icon というプラグインがありますが、通常利用するには結構面倒な手順が必要です。(xcode側に登録するとか、、)
ただ、expoを利用していればとても簡単に利用できます。ありがたいです。

今回はその方法を忘備録として残します。

方法

npx create-expo-app で開発をスタートしている場合は特に何かインストールの必要はありません。
※もし --template blank などオプションを設定してスタートした場合は別かもしれません。@expo/vector-iconsが必要なので、インストールしてください。

利用したいアイコンを探す

上記サイトにvector-iconsで利用できるiconの一覧があります。
利用したいものを選びます。今回は MaterialIcons の insights を利用するとします。

image.png

利用したいファイルに記載

あとは、利用箇所で上記アイコンを記載すれば完了です。
まず、ファイルにimportを記載します。

// 利用するiconがMaterialIconsにある場合
// 違う場合はそちらを記載。(@expo/vector-icons/AntDesignなど)
import MaterialIcons from '@expo/vector-icons/MaterialIcons';

そして、コンポーネントに記載すれば利用できます。

<MaterialIcons
  name={'insights'}
  color={color}
  size={24}
/>

※tabメニュー内で利用した例

image.png

vector-iconsを利用する方法を検索すると非常に面倒な作業が必要そうで割と萎え気味でしたが、expoを利用していると色々用意していてくれるので本当に助かります。

参考になれば幸いです。

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?