DEV Community

Ajmal Hasan
Ajmal Hasan

Posted on

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)