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.