Integrating React Native Vector Icons in Your Project

react-native-vector-icons is a powerful library that lets you incorporate a variety of icons into your React Native app, boosting design and user experience. You can select icons from popular sets like FontAwesome, Material Icons, Ionicons, and many more. Explore available icons here.

Step 1: Install the Library

To install react-native-vector-icons, use npm or Yarn:

npm install react-native-vector-icons

or

yarn add react-native-vector-icons

Available Icon Sets

With react-native-vector-icons, you have access to many icon libraries, including:

• 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 in the icon gallery.

Step 2: Configure Fonts

Android Setup

In android/app/build.gradle, specify the fonts to include in react:

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

iOS Setup

In Info.plist, add the fonts under UIAppFonts:

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

Additionally, configure react-native.config.js to prevent automatic linking on iOS and add custom assets:

// react-native.config.js
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  dependencies: {
    'react-native-vector-icons': {
      platforms: {
        ios: null, // Disable auto-linking for iOS to avoid font duplication issues
      },
    },
  },
  // assets: ['./src/assets/fonts/'], // Custom font path
};

Finally, Run in terminal:

npx react-native-asset

Step 3: Use Icons in Your Components

Now, you can import and use icons in your app:

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

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

Replace MaterialCommunityIcons with any other icon set as per your requirements.

Conclusion

Integrating react-native-vector-icons provides you with a vast range of icon options, enhancing your app’s look and feel. With minimal setup in build.gradle, Info.plist, and react-native.config.js, you’re ready to incorporate high-quality icons into your React Native project.