- アイコンを使ってみたい
- アイコンの表示のさせ方が分からない
という方向けの記事となっています。
この記事を読むことで、このようにアイコンを表示できるようになります。
1. 概要
本記事で紹介するreact-native-vector-iconsは、ReactNativeでアイコンを使いたい時に使用するライブラリです。探しているアイコンが必ずあると言っていいほど、種類も多くおすすめのライブラリとなっています。
以下にアイコン一覧のリンクを貼っておきます。
react-native-vector-icons
2. インストール方法
下記のコマンドを実行してreact-native-vector-iconsをインストールします。
|
1 |
$ npm install --save react-native-vector-icons |
3. 使い方
3.1 import
下記のように使用したいアイコンの種類をインポートします。
複数の種類のアイコンを使いたい時は、別々に宣言してあげれば、OKです。
以下は、MaterialCommunityIconsとFeatherを使用する時の例です。
|
1 2 |
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import Icon2 from 'react-native-vector-icons/Feather'; |
3.2 サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
import React from 'react'; import { StyleSheet, View} from 'react-native'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import Icon2 from 'react-native-vector-icons/Feather'; export default class App extends React.Component { constructor(props) { super(props); this.state = { } } render() { return ( <View style={styles.container}> <Icon name='heart-multiple-outline' color='pink' size={100} style={styles.icon} /> <Icon name='space-invaders' color='lime' size={100} style={styles.icon} /> <Icon2 name='twitter' color='lightskyblue' size={100} style={styles.icon} /> <Icon2 name='star' color='yellow' size={100} style={styles.icon} /> <Icon2 name='alert-circle' color='red' size={100} onPress={() => console.log('イベントも設定可能')} style={styles.icon} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, marginTop: 100 }, icon: { alignSelf: "center", marginTop: 30, } }); |
3.3 プロパティ
アイコンを使うときに主に設定するプロパティです。
| name | 使用したいアイコンの名前を設定。importした種類のアイコンが使えます。 サンプルコードでは、MaterialCommunityIconsかFeatherのアイコンが使うことができます。 |
| color | アイコンの色 |
| size | アイコンのサイズ |
| onPress | アイコンをクリックした時のイベント |
4. アイコンの種類
数多くの種類のアイコンがありますが、私個人がよく使うのは、MaterialCommunityIconsをよく使いますね。デザインも好きですし、使いたいと思ったアイコンも高確率であるので、おすすめです。
◯アイコン種類一覧- AntDesign
- Entypo
- EvilIcons
- Feather
- FontAwesome
- FontAwesome 5
- FontAwesome5Brands
- Fontisto
- Foundation
- Ionicons
- MaterialCommunityIcons
- MaterialIcons
- SimpleLineIcons
- Octicons
- Zocial
