Integrating React Native Vector Icons in Your Project

.

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:

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

};

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.