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.
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.