How to use React Native vector icons?

Step 1: Install react-native-element:

npm install react-native-elements --save

Steps 2: Install react-native-vector-icons Install from npm

npm install react-native-vector-icons --save

Link it

react-native link react-native-vector-icons

After that you can use it in your page by: Step 1:

import { Icon } from 'react-native-elements';

Step 2:

<Icon name="md-beer" type="ionicon" color="#887700" />

Here is full UPDATED answer, just follow these steps :-

1. npm install react-native-vector-icons --save 2. react-native link 3. react-native link react-native-vector-icons 4. import Icon using one of these ( as per your requirement )

   **MaterialCommunityIcons**

    import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
   **Ionicons**

    import Icon from 'react-native-vector-icons/Ionicons';

   **FontAwesome5**

    import Icon from 'react-native-vector-icons/FontAwesome5';

5. Uses (JSX)

     <Icon size={24} color="white" name="movie" />

First, make sure you're saving the dependency in your project by doing:

npm install react-native-vector-icons --save. Including the --save is necessary, otherwise react-native link won't be able to locate the module.

see attached screenshot

Before you can use them in your iOS or Android project, you also have to link the native modules. The quick way to do this is by using the following command:

react-native link react-native-vector-icons

If for any reason you have problems using react-native link to link the native modules, the react-native-vector-icons README also provides detailed instructions for linking them manually on Android and iOS, and integrating the library on the web as well.

Tags:

React Native