【React Native】Expoのvector-iconsを使ってiconを表示する方法

2022.03.272022.01.09

expoでのicon使用方法についてまとめました。

React Nativeでiconを使用する場合、expoのpackageに含まれているvector-iconsが便利！

使用方法についてはこちらのドキュメントがあります。

Learn how to use various types of icons in your Expo app, including vector icons, custom icon fonts, icon images, and icon buttons.

install方法

install前に最新versionの確認

$ npm show @expo/vector-icons

@expo/vector-icons@12.0.5 | MIT | deps: 6 | versions: 47
Built-in support for popular icon fonts and the tooling to create your own Icon components from your font and glyph map. This is a wrapper around react-native-vector-icons to make it compatible with Expo.
Redirecting...
expo.github.io

keywords: expo

dist
.tarball: https://registry.npmjs.org/@expo/vector-icons/-/vector-icons-12.0.5.tgz
.shasum: bc508ad05fb7e9a3e008704977cfec6c18aa7728
.integrity: sha512-zWvHBmkpbi1KrPma6Y+r/bsGI6MjbM1MBSe6W9A4uYMLhNI5NR4JtTnqxhf7g1XdpaDtBdv5aOWKEx4d5rxnhg==
.unpackedSize: 3.6 MB

dependencies:
lodash.frompairs: ^4.0.1 lodash.isstring: ^4.0.1  lodash.pick: ^4.4.0      
lodash.isequal: ^4.5.0   lodash.omit: ^4.5.0      lodash.template: ^4.5.0  

maintainers:
- kgc00 <kirbygc00@gmail.com>
- fiber-god <datwheat@gmail.com>
- ide <ide+npm@jameside.com>
- brentvatne <brentvatne@gmail.com>
- ccheever <ccheever@gmail.com>
- evanbacon <baconbrix@gmail.com>
- quinlanj <quinlanjung@gmail.com>
- esamelson <eric@expo.io>
- expoadmin <support@expo.io>
- charliecruzan <charliecruzan@gmail.com>
- tsapeta <npm@tsapeta.com>
- dsokal <dominiksokal@gmail.com>
- tcdavis <tc@expo.io>
- exponent <exponent.team@gmail.com>
- wschurman <wschurman@gmail.com>
- bbarthec <bartlomiejbukowski.b@gmail.com>
- jkhales <jonathan@expo.io>
- wkozyra <wojciech.kozyra@swmansion.com>
- bycedric <me@bycedric.com>
- lukmccall <kosmatylukasz@gmail.com>
- jonsamp <sampjon@gmail.com>
- princefleaswallow <mhampton@hey.com>
- andyboythekid <andydevs123@gmail.com>
- kudochien <ckchien@gmail.com>

dist-tags:
latest: 12.0.5  next: 12.0.3

最新versionは12.0.5であることが確認できたので、こちらのversionを指定してinstallします。

$ npm install @expo/vector-icons@12.0.5

installができたので、こちらのicon一覧より選択します。

@expo/vector-icons directory

使い方

search boxで欲しいiconを検索

選択すると以下のような画面が表示されるので、

1をimport部に、2をiconを表示したい部分に貼り付けるだけ！

あとは、defaultで入っているsizeとcolorを変更すれば、お好みのstyleに変更が可能です。

以上、読んでいただきありがとうございました。