Recently I have had to implement a very unique icon set in a React Native app and wired it up with dark mode and colour themes. It got me thinking if fellow developers would be interested in my way of getting around this.
Using a custom icon font is the way to go in my opinion for many reasons.
Why a font?
It is equally possible to use pngs or svgs as icons in a mobile app. Why would we want to go down the hassle of creating an all new font just to hold our icons? Both png and svg formats have their limitations.
- PNG: even though it supports alpha channel (transparency), it also comes with its own colours. Png icons also need to be stored at a rather large resolution to be crisp on larger pixel densities. Plus your icons need to be stored as individual files and imported individually.
- SVG: at least svg-s are vector based, so no probs with resolution, however the other 2 points on png-s also apply to the svg format as well.
When using a custom font, it is no different than using regular text.
You can apply size and colour attributes while your icon characters remain crisp no matter the size.
What we’ll be doing
- Creating the font using individual svg icons
- Creating a blank React Native project
- Exporting the font and copying it in our project
- Installing a few packages
- Implementing the font and using the icons
Let’s dive in
Get your icons ready
You may create your own icon set or get someone to do it for you. For simplicity, I have picked an icon set on Flaticon and saved 5 icons at random. Make sure that you save them as SVG.
Import the icons and create the font
If you haven’t used icomoon.io before, then no worry. It is incredibly simple! You simply create a project, name it and start dragging icons into it. It takes care of the mapping and all. Once you are done, simply export it.
It downloads a zip file. We are only interested in the .ttf file as it is supported by all platforms. This is not true to all other formats, so be careful.
Let’s create the project
For simplicity, we’ll be using expo for this example. If you have either ejected your project or not using expo at all, most of the content in this article still applies to you, however you need to take a few extra steps to link your fonts up to your application.
These extra steps are nicely summarised in this article, so I see no reason of duplicating its content.
It is also assumed that you have your react native dev environment setup including the expo cli.
so let’s create the project using the following command:
expo init [YourProjectName]
Once you run the command, you should see something similar to this:
Run your blank project to make sure it works
To verify that the project was successfully created, run the
npm start command and run the project in simulators and/or real devices.
This step is not essential, but for the sake of completeness, this is the best time to set up your github repository to version control your project.
- Create a
.gitignorefile and add
- Commit and push
Install some packages
To make it work that way I did, you’ll need a few packages.
You may notice that I have used styled components for this demonstration. I am a big fan of styled components and I’d highly recommend you using it as well.
npm i styled-components
npm i expo-app-loading
npm i expo-font
Copy the icon font into you project
React Native does not have a proprietary folder structure, so you can build it the way you like. There are standards however. The application code as well as config and assets usually reside under the src directory.
Use the font
I’ll include the full code to use the font first and then explain it in parts:
The top section is probably obvious where we import the required packages.
Let’s focus on the icons object
On the ‘generate font’ tab in icomoon.io, you’ll see your icons listed. When you hover over each of them, you’ll see the “Get Code” link appear.
Click on each of them and copy the character into your project.
The best place for them is an object that holds your icons. It may be placed in a separate file once the project grows, but for our purposes it is perfectly fine in App.js like so:
The next thing to do is, to load the font file. Expo has its way of doing it, so please refer to the official documentation on using custom fonts in expo.
In short, the font file is loaded asynchronously, so you can only show the actual content once it is loaded.
Add some styled component magic
As I have mentioned earlier, I like styled components very much. Just look at how easy on the eye the below code is. Isn’t it beautiful?
Display the content
Once the font is loaded, the packages are included and the styled components are in place, the only thing left to do is to display the content by simply returning it.
The end result should look like this.
I hope you have enjoyed this tutorial on how to create and use your very own custom icon font in your React Native application. It was certainly lots of fun creating it :)
Find the github repository of the project at https://github.com/rolandtreiber/rn-custom-icon-font-tutorial
If you have any questions, please feel free to comment or reach out. You are more than welcome to check my website on http://thecaringdeveloper.com or drop me an email.
Have a nice day!