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

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

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

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

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...
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に変更が可能です。

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

コメント