How to Add Custom Icon Fonts in React Native Using Alibaba Iconfont

Setting Custom Font Files in React Native

Today we discuss how to load icons in the app via font files.

First, we recommend the Alibaba Iconfont library, which offers a massive collection of vector icons that can be downloaded individually or packaged after registering an account.

A. About the <Text> component

You can specify the font file displayed by <Text> using the fontFamily property; details follow.

B. Code

C. Result

Using font files to load icons.

Key Points

A. Choose icons from the Alibaba Iconfont library and download the package.

B. Downloaded file is typically iconfont.ttf, the required font file.

C. Create folder assets/fonts/ in the project root and place iconfont.ttf there.

1. iOS

Drag the fonts folder into the iOS project directory.

Also add fonts/iconfont.ttf to the “Fonts provided by application” array in Info.plist. After this, you can use the fontFamily iconfont in the RN project.

2. Android

Creating assets/fonts in the project root ensures consistency; Android requires the font file to be placed in [project root]/android/app/src/main/assets/fonts/. Copy the assets folder to android/app/src/main (can be automated with a script).

3. Usage

The effect matches the initial illustration.

4. Drawbacks

The Unicode codes of the icons (e.g.,    ) do not directly correspond to the displayed icons.