Integrate react-native-vector-icons in the React Native project

When using React Native to develop mobile apps, you often encounter the development needs of vector graphics and custom fonts. Using vector graphics can effectively reduce the size of the package. In React Native development, you can use react-native-vector-icons to meet development needs.

1. Installation

Like other third-party libraries, react-native-vector-icons needs to be installed before using third-party libraries.

npm install --save react-native-vector-icons

Then, use the link command to add a link to the native library.

react-native link react-native-vector-icons

2. Native configuration

2.1 iOS configuration

First, execute the pod install command in the ios directory of RN to install the dependent packages.

cd ios && pod install

Then, create a new font group named Fonts in the Xcode project, and copy the required fonts ./node_modules/react-native-vector-icons/Fonts


Open Xcode and use source code mode to edit the info.plist file, as shown in the figure below.

Then, add the font configuration, as shown below.

<key>UIAppFonts</key>
  <array>
    <string>AntDesign.ttf</string>
    <string>Entypo.ttf</string>
    <string>EvilIcons.ttf</string>
    <string>Feather.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>FontAwesome5_Brands.ttf</string>
    ...
  </array>

Use Xcode to compile the iOS project. If there are no errors, the configuration is complete.

2.2 Android configuration

Like iOS, Android native end also requires some configuration before it can be used normally. First, node-modeles\react-native-vector-icons\Fonts copy the file to the project directory andriod\app\src\main\assets\fonts directory.

Then, open the andriod/app/build.gradle file and add the following code.

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Recompile the Android project. If there are no errors, the configuration is complete.

2.3 Examples of use

After the native configuration is completed, it can be used directly, as shown below.

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

<Icon name="rocket" size={30} color="#900" />

Reference: react-native-vector-icons