Using react-native-vector-icons in React Native

react-native-vector-icons is a library that lets you integrate a variety of icons into your React Native app, improving design and user experience. It supports popular icon sets like FontAwesome, Material Icons, and Ionicons. Explore available icons here.

Step 1: Install the Library

Install via npm or Yarn:

npm install react-native-vector-icons

or

yarn add react-native-vector-icons

Available Icon Sets

Icon libraries available include:

• AntDesign (298 icons)
• Entypo (411 icons)
• EvilIcons (70 icons)
• Feather (286 icons)
• FontAwesome 5 (1,598 free icons)
• Ionicons (1,338 icons)
• MaterialIcons (2,189 icons)
• MaterialCommunityIcons (6,596 icons)

Explore other sets here.

Step 2: Configure Fonts

Android Setup

In android/app/build.gradle, add the fonts:

react {
  project.ext.vectoricons = [
      iconFontNames: ['MaterialCommunityIcons.ttf', 'FontAwesome.ttf', 'AntDesign.ttf']
  ]
  apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
}

iOS Setup

In Info.plist, add the fonts:

<key>UIAppFonts</key>
<array>
    <string>MaterialCommunityIcons.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>AntDesign.ttf</string>
</array>

Also, in react-native.config.js, disable iOS auto-linking:

module.exports = {
  'react-native-vector-icons': {
    platforms: {
      ios: null,
    },
  },
};

Run the command:

npx react-native-asset

Step 3: Use Icons in Your Components

Import and use icons like this:

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

const MyComponent = () => (
  <Icon name="home" size={30} color="#900" />
);

You can replace MaterialCommunityIcons with other icon sets as needed.

Conclusion

By integrating react-native-vector-icons, you can enhance your app with a wide range of high-quality icons. The setup process is simple and involves configuring a few files for Android and iOS.