Building a home-made Icon Font in React Native

Photo by Harpal Singh on Unsplash

Dealing with icons in React Native can be a problematic task, especially if you want to use your own icons. In this post, I’m going to share my experience and learnings when I had to implement an icon system to React Native.

The problematic 😞

If you come from a web background, you may have your icons as svg files and render them directly into the DOM. This is perfect because browsers are prepared for that.

Sadly, this is not the same for React Native. First of all, you can’t render an SVG directly as a component, you need to use a library for that. The most popular and used is react-native-svg.

This solution was working it’s not the use case that was meant to be used, this library has known performance issues when the application needs to render several svg, and in this case, icons are heavily used. In case you want to read more I recommend this post:

Subtle Use of SVG in React Native

The solution: Icon Font 👍

This method consists of creating a font where all the characters will be icons and in order to show the icon you need to write the respective character inside a Text with the custom font.

One of the best extensions for fonts is .ttf due to it has great compatibility with the different operative systems and platforms. This is how the font looks when we inspect it.

In order to render Icons using a custom icon fonts for React native, I suggest using react-native-icons which can create an Icon component that accepts the name of the icon to render inside our font. Besides that, it also comes with many of the most popular icon collection like FontAwesome, MaterialIcons, etc.

Talking about the performance of this approach, this is one of the fastest methods out there. Because each icon here it’s a just a Text component of React Native with a special character inside.

But in order to follow this approach you need to have two different types of files:

• The font itself with the icons. I recommend using the .ttf extension for font because it’s the most compatible between different platforms.
• The glyph map of the font. This is a JSON file that contains a flat map where the key is the name of the icon and the value is his character inside the font.

One more thing about this method, you need to load the font inside your application in order to see the Icon. Otherwise, you only will see a Text Component with a special character inside.

I leave you with a short snippet of how to create the Icon component from the custom-font and then render it inside your App.

import React from 'react’;
import customFontGlyph from '../../assets/font/custom-font-icon.json’;
import { createIconSet } from 'react-native-vector-icons’;
const Icon =  createIconSet(customFontGlyph, 'custom-font-icon’, 'custom-font-icon.ttf’);
const App = () => <Icon name=”icon-name” />;

Building a custom font - 3rd party services

There are excellent free services on the internet that allow you to create a font with its glyph map too, some examples are Fontello or IcoMoon. Also, they take care of a lot of technical issues, like the dimension of the icons, clipping, and many more things that a developer shouldn’t worry about.

The process to generate the font is quite easy in any of them, just upload your icons into the platform and click Export. As a result, you will download a zip file that contains the font in several formats and with a config.json (which is the glyph map)

Uploading an icon into Fontello

This method works really good for small or medium application with not many people involved, but when you are working with large teams where there a specific design team involved these services are quite hard to maintain. Mainly because you need to manually upload them to the platform and then everybody should download the latest set of icons. At the same time, these services offer a monthly payment subscription which will allow you to automatize the whole process.

Building a custom font — in house 🏠

With this approach, you just need to have your icons store inside your project and via script generate the font along with the glyph map.

This approach has several advantages regarding the previous one:

• Adding new icons is super easy, just add an SVG to the project.
• Easy to CI.
• No dependencies on any other service, full control of the whole project.
• It’s free!

O

I made a Github repository where I built the same POC, so in case you want to skip all the explanation and jump directly into a real demo you can check it out! Also, I left in the README.md some comments about how to run it.

EmaSuriano/custom-icons-react-native

The first step is to generate an empty project. In order to keep the setup simple, I suggest using Expo. In case you’ve never worked with Expo, please follow the Installation Guide. Run the following command in your terminal:

$ expo init

Select the type of project blank and pick the name you want for your project. Then the CLI will start to install all the dependencies for the project. After that, you need to install two more dependencies that are going to be used later.

$ yarn add icon-font-generator react-native-vector-icons

The next step is choosing the icons to play with. I picked a collection of Landmarks and Monuments from FlatIcon.

Landmark and Monuments Collection

Once you download the pack, create a folder of icons inside assets and move there all the SVG icons.

let’s create a file called create-icon.js inside the root of the project, this file will read all the icons inside the assets folder and perform the following actions:

• Create the font file with all the icons.
• Create a glyph map for the font. By default, the original file comes with the values in Hexa, and in order to use it inside React Native, you should convert them to decimal.
• Create an index.js with the list of icons as components.

Create icon.js file

Then you can execute the command by running:

$ node create-icon

As a result, you will notice a very long file inside src/Icon with all the icons as React Component.

Icon components generated

Every icon is rendering a component called Icon with a fixed name prop, which is the key of the icon inside the glyph map and also spreading all the props, in case we want to customize the component.

So the last step is to create the Icon component, to do that place it in the same folder as the index.js file. This component is the one that links the font with the glyph map and returns a React component which accepts them name as the key of the icon inside the glyph map.

And that should be all! In case you want to preview all the icons you have generated you can replace the code in App.js in order to build a Gallery with all the Icons exported inside index.js .

Now you can start Expo and you should be able to see something similar to this preview.

Last words 👋

I struggle a lot when I had to deal with Icons, and I really hope this tutorial has helped you to deal with custom Icons to React Native.

One more thing before you leave, I decided to start a newsletter so in case you want to hear about what I’m posting please consider following it! No SPAM, no hiring, no application marketing, just tech posts 👌

EmaSuriano Newsletter