React native icons

First things first,

  • the maintainer of react-native-iconshimself points to the newer & maintained react-native-vector-icons
  • Apparently as of now the rnpm project has been merged into react-native.

In other words, your life can be as easy as typing

react-native install react-native-vector-icons
react-native link react-native-vector-icons

And you may be good to go*)

*) at least it worked on my machine


Did you import file node_modules/react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit/ionicons.ttf to your project?


Steps to install and usage Ionicons, FontAwesome and Entypo font Icons in react-native.

First you need to install using following command.

react-native install react-native-vector-icons

Then Required to Link:

react-native link react-native-vector-icons

Import font package files to your page:

import Ionicons from 'react-native-vector-icons/Ionicons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Entypo from 'react-native-vector-icons/Entypo';

Usage Example:

<View>
    <Text>Ionicons Icons</Text>
    <Icon name='md-bicycle' />

    <Text>FontAwesome Icons</Text>
    <FontAwesome name='trophy' />

    <Text>Entypo Icons</Text>
    <Entypo name='aircraft' />
</View>

If you want to see list of available icons, you can look in this directory:

Ionicons:

\node_modules\react-native-vector-icons\glyphmaps\Ionicons.json

FontAwesome:

\node_modules\react-native-vector-icons\glyphmaps\FontAwesome.json

Entypo:

\node_modules\react-native-vector-icons\glyphmaps\Entypo.json 

Giving you my apps screenshot.

enter image description here

Tags:

React Native