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に変更が可能です。
以上、読んでいただきありがとうございました。
コメント