Photo by Max Nelson on Unsplash

React Native Library: Custom Icon

Hello, here is how to create and use the custom icon as our own font.

React Native Custom Icon is a library which makes easier to use your own fonts as custom icons. It uses react-native-vector-icons library as peer dependency. I suggest that to use Icomoon to create your own icons as .ttf font format.

WrathChaos/react-native-custom-icon

React Native Custom Icon

Installation

npm i react-native-custom-icon

Also, do not need to forget to install peer dependency:

npm i react-native-vector-icons

Linking:

react-native link react-native-vector-icons

Generating icomoon.ttf and selection.json files

We will convert our SVG icons to .ttf font format and make them usable with the selection.json file. Here is the where Icomoon shines. https://icomoon.io/

https://icomoon.io/

Click the top right IcoMoon App button. You will see an example set, simply drag & drop your svg files through that set and your svg icons will have appeared something like that below:

Icomoon

Generate Font

Now, select which icons would you like to use and click bottom right button (Generate Font). Now, You can see all your svg files and their name(important).

Download button to generate fonts

Downloaded Files:

Downloaded files should look like this:

Downloaded Files

We need “selection.json” and “icomoon.ttf” files. These files which we will play with. We need to put these files into our project. I suggest that put these files into assets folder. It could be something like this:

Icomoon files in assets folder

Code Time

We will use react-native-custom-icon lib and we only need to implement 2 things to use our own custom icons. First import the selection.json file as IcomoonConfig

import IcomoonConfig from “./assets/icomoon/selection.json”;

Then,

<MyIcon
  name=”medium-logo”
  color=”purple”
  size={45}
  config={IcomoonConfig} 
/>

That’s it for the code part :) Simple right?

Props

name: Remember the name while we’re generating font part. These names will be used for this

color: You can pick any colour from hex, rgba or just a normal name.

size: Change the size of the icon, it should be number.

config: IMPORTANT! It must implement it for each MyIcon. You can wrap MyIcon and generate your own icon component to avoid to implement each MyIcon component.

iOS Implementation (Must Done)

We need to open our project on XCode.

Info.plist

Simply open the Info.plist file. There should be ‘Fonts provided by application’ if you cannot find this property. You missed the linking part. Please just run the command:

react-native link react-native-vector-icons

It should be 15 items which are provided by the vector-icons library. Just click the + button and add your .ttf file just like the below:

Info.plist

Build Phases → Copy Bundle Resources:

Select the target project and go to the Build Phases part. Now, we will add our icomoon.ttf file into the resources.

Build Phases → Copy Bundle Resources

Click the + icon and below image will be shown. We need to select “Add Other…” button. Now, locate your icomoon.ttf file on the assets or wherever you locate it.

Click Add Other… button

Run and Go!

Now, let’s try the application with a command:

react-native run-ios

It should be worked! If you still have an error, please try to check steps or write a comment and we will see what is wrong :)

Android Implementation (Must DO)

Fortunately, the Android part is much easier :) However, we have to open Android Studio :( Sorry to hear that from me…

Open the project on Android Studio. While it is opening, let’s run a command :)

Go to your root project on your terminal and run the command:

cd android && react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

Let’s dive into the command a bit. Simply goes to the android folder and generate the assets folder. Linking could not do that for some reason so we need to do that manually.

I hope that Android Studio is open and indexed the project. Go to the assets folder into Android Studio and drag & drop the icomoon.ttf file into assets folder.

Assets folder after running the command

Run and Go!

Now, let’s try the application with a command:

react-native run-android

It should be worked! If you still have an error, please try to check steps or write a comment and we will see what is wrong :)

This is it :) You can use your own svg files as custom icon.

If you have any question, ask me :)

Have fun!

WrathChaos/react-native-custom-icon