Using Custom Icons Font Type with ‘react-native-elements’ Icon Component

React Native Elements uses react-native-vector-icons for making icon usage in components without having to re-implement Icon component.

Here’s how we’ve been using Icon component from react-native-elements:

import { Icon } from 'react-native-elements'

<Icon
  name='heartbeat'
  type='font-awesome' />

Pretty neat right?

Icons take the name of a material icon as a prop. However, react-native-elements allows us to override Material icons with one of the following: material-community, font-awesome, octicon, ionicon, foundation, evilicon, simple-line-icon, zocial, or entypo by providing a type prop.

But, there might be cases when we’d want to use our own custom icons. Let’s see how we can achieve that.

Create/Download Icons

We may either create our own custom icons using software such as Adobe Illustrator or we may simply download icons (in SVG format) from websites such as Flaticon.

Create Icons Font

After we have all the SVG files we can upload them to these sites:
http://fontello.com/ or https://icomoon.io/app. These services help us create our own pack of icon fonts.

For this tutorial, we’ll be using Icomoon.

Click on the “Import Icons” button to upload all the icons (SVGs).

You may edit Icon Set metadata such as name, url, designer, license etc.

Select all the icons that you want to include into your icons font package. Click on ‘Generate Font’ after you are done.

You’d want to go to ‘Preferences’ and provide a name to your font and specify a class prefix. You may also play around with other configuration options such as CSS Selector, Font Metrics, Metadata, Version, etc. For now, we’ll just specify the font name. We’ll name our font as “myfont“.

After that, hit the ‘Download’ button and you’ll receive a zipped file including a .ttf file and selection.json file.

Install react-native-vector-icons

At this point, I presume that you already have react-native-vector-icons installed in your React-Native project. If not, go ahead and install it.

npm install react-native-vector-icons --save

Configure Project

Create ./resources/fonts folder in the root of your project
Extract download zip file and copy .ttf file into ./resources/fonts folder
Add
“rnpm“: { “assets”: [ “resources/fonts” ] }
at the first level of your package.json
Copy selection.json file to the root of your project
In terminal run
react-native link react-native-vector-icons
NOTE: I personally prefer adding fonts manually to android and ios rather than utilizing react-native link. I was facing a lot of compile and dependencies issues while using the react-native link. If you want to go with the manual installation, follow these steps:

Android: Copy your .ttf into the ./android/app/src/main/assets/fontsfolder of your RN project.

IOS: Copy your .ttf inside the ./ios folder of your React Native project. Add the font to your project in xCode (by drag and drop in ./Resources). Make sure the font is in Copy Bundle Resources.

Finally

Create a class CustomIcon.js at the root of your project and copy the following code into it:

import { createIconSetFromIcoMoon } from "react-native-vector-icons";
import icoMoonConfig from "./selection.json";

const Icon = createIconSetFromIcoMoon(icoMoonConfig);

export default Icon;

In your App.js or the main React component class, register your custo Icon Type to react-native-elements:

import { registerCustomIconType } from "react-native-elements";
import Icon from "./CustomIcon";

export default class MyApp extends React.Component {
  constructor(props) {
    super(props);

    registerCustomIconType("auralle", Icon);
  }

  ...
}

And that’s it you can start using your very own icon font type with react-native-elements. You can pass in your font type and icon name just like you’d have passed in any other icon font from standard libraries such as font-awesome.

import { Icon } from "react-native-elements";

<Icon name="add" type="myfont" />

If you don’t want to use react-native-elements Icon component you can also use your icon independently. Just import the custom icon component and use it as follows:

import Icon from '../path/to/CustomIcon.js';

<Icon name="add" />

Let me know how it goes with you guys. Happy Coding 🙂

References

android ios javascript react-native

Sagun Pandey