Custom and asset integrate methods for svg icons in react-native

Bhavesh Jariwala -

In the previous article, we had learned about how to use the SVG icon in react-native. How to generate font files by combining all the SVG icons in a single file using icomoon. How to integrate that file in a react-native project in order to use those custom icons. Also, learn a few things about how to use react-native-vector-icons.

Within this article, I will explain how to integrate custom generated font file(Don't know how to generate custom font file please read this) in react-native using a custom method. Also, mention about a new method to integrate font file within react native project easily without fear of breaking a react-native project. Believe me, it's better than linking and custom methods.

Custom method to integrate font files

In this section, I will explain how to integrate font files into the react-native project manually. It takes more time than a linking method.

Why we need a custom method to integrate font file

Integrate font using the react-native link method is good at the initial stage of the project, where you don't have more third-party libraries that need linking to work. So when we need to integrate font at a later stage of the project, then using a react-native link can be riskier. Because the react-native link will try to link all the modules in your project which need to link with the react-native project in order to work, but what if everything is linked and you run react-native link again. Sometimes it re-links modules and our react-native stops working.



And when react-native link break my project: (ps: giphy)  

The best way to integrate font, in that case, is we integrate it manually. Manual integration of font file is straightforward within the Android platform but the IOS platform needs few more steps than the Android.

I am using the code from my previous blog. It already contains code for displaying a custom SVG font icon. In case you want to see the code, you can find it here. Every technical thing below these points based on that code.

1. Android Custom font integration

You need to add font file to android/app/src/main/assets/fonts. Here you will find other font files as well which can be linked through other libraries (If you don't see assets folder then you can create assets folder and inside that create fonts folder where you will keep all your fonts at one place). You can copy your font file to a path or just drag and drop to the path. In this case, my file name is icomoon.ttf. In the screenshot, You can see in the screenshot which shows the folder structure where you need to paste .ttf file.

You can see a difference in the below image which shows how icons looks before and after integrating font.

Sample Caption

2. IOS custom font integration

For custom integration, you need Xcode which means you need to work on mac os. open your project in Xcode by double-clicking on .xcodeproj file which you can find under project folder/ios/*.xcodeproj file.

If you had pod install in the project then you need to open *.xcworkspace file, not the *.xcodeproj. You will find .xcworkspace file at the same path.

It will look like below-attached screenshot after opening in Xcode.

  • You can see the  Resources folder on the left side panel. We will add a font file here. If there is no Resources folder then create it. Now right click on resources folder and you will find an option Add Files to your project name. Click on that option.
  • You will see a window which will allow picking your file. Make sure copy items if needed checkbox should be selected and make sure your project checkbox selected under target Add to target. Click on add button.
  • After adding icon please make sure .ttf file should be selected under Resources'folder in the left panel and in the right panel your project checkbox should be selected under Target Membership.
  • Now click on the project icon which will show you various menu for the project in the middle part of the screen. You need to click on the  Build Phases tab. Which will further show you build phases options. Here you need to add the .ttf file under Copy Bundle Resources. You can see a + button at the end of the list. Click on that in order to add the font under Bundle Resources.
  • + icon will open window which shows project structure, under that, you need to select the .ttf file which is under Resources folder. Select the .ttf file and click on the add button which will add the .ttf file in project bundle resources. If you don't perform these steps then ios will show an error regarding font file not found.
  • After adding font it should look like:
  • Now next step is to add icon file name in project info.plist file. For that click on the project folder in the left panel. Under that folder, you will find info.plist file. Click on info.plist file it will show plist file option in the center part of Xcode. Here you need to add the .ttf filename under Fonts provided by application. Click on the plus button and it will create new blank entry at the end of other font files, Add your font name there. And that's it you had added your font name in info.plist file.
  • Here we are done with custom integration of font file. From here if you run your application those fonts should be a usable inside app. You can see the difference between before font file and after font file integration.
Finally here is the end of custom integration for android and ios. we will see another way to integrate font in a react-native app using single command.

The more easy way and a single command to link fonts.

It is a single command and it will do rest for both the platform android and ios. It is easy to link and relink asset using that command. To do that we need to install one node module in our react-native project that is react-native-asset.

1. Installation

npm install -g react-native-asset 
          or yarn 
yarn global add react-native-asset

2. How to use it

  • Create assets/fonts folder at the root level of your react-native mobile app.
  • Put your .ttf file in the fonts folder.
  • Next, we need to tell React Native where our custom fonts are located. We do this by adding rnpm to package.json (will be at app root level) providing the path to the font files:
"rnpm": {
    "assets": [
	"./assets/fonts/"
    ]
}
  • Now just run 'react-native-asset' command and see the magic. It will show the message on the command line that linking ttf assets to platforms
  • The react-native-asset command will generate a few files which I had highlighted in below screenshot.
  • react-native-asset writes link-assets-manifest.json to the root of android and ios folders to keep track of the files which it added, for later removing it for you if missing from your assets!

3. How to remove linked font or update it

  • If you want to remove the linked font then remove the font file from your react-native project  project/assets/fonts and then run react-native-asset.It will remove the file and its references from the android and ios platform, it will also update the content of  link-assets-manifest.json.
  • You will see the message on the command line like:
  • It will remove the linked file. You can see in below screenshot.
  • For updating font also you need to do two things:


1. Remove the font file from project/assets/fonts and then run react-native-asset. It will remove linked fonts.

2. Now put updated font file in project/assets/fonts and then run react-native-asset. And you are done with updating your fonts in the react-native project.


After using all three methods

1. react-native link (from previous article)

2. Custom integration

3. Using react-native-asset

I feel like react-native-asset is a better and cleaner way to in integrate font in react-native. It also helps to link assets like mp3 file etc..

After using react-native-asset,  my reaction was: : (ps: giphy)

You can find code sample here

That's it, guys. If you have any question you can ask me in the comment section. Thanks for reading my article.