DEV Community

Ajmal Hasan
Ajmal Hasan

Posted on

1 1

Using react-native-vector-icons in React Native

#react #reactnative #javascript

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
Enter fullscreen mode Exit fullscreen mode

or

yarn add react-native-vector-icons
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

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

Run the command:

npx react-native-asset
Enter fullscreen mode Exit fullscreen mode

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" />
);
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)