With Fontello/Icomoon and react-native-vector-icons

With this article you will be able to add and use handmade icons inside your React Native application in no time.

I- Create your icon(s)

With a vector editing tool (like Illustrator), create your custom icon.

Then export it as a normal SVG but make sure you export each icon with the same squared art-board size.

II- Upload your SVG in Fontello or Icomoon

Drag and drop your new SVG in Fontello or Icomoon: http://fontello.com/ or https://icomoon.io/app

This step can be tricky, the SVG your created might get badly converted and have shape or color fill issues. For some help you can go to the Fontello Wiki : https://github.com/fontello/fontello/wiki/Help.

If you like the result, select your new icon(s) and download the webfont from the webtools. You will receive a ziped file including your new font ++code>.ttf++/code> and a ++code>config.json++/code> (Fontello) or a ++code>selection.json++/code> (IcoMoon) file. Those config files already include the mapping between the characters (icons) of your font and how your code can find and use them.

III- Install react-native-vector-icons in your RN project

Install react-native-vector-icons. This library is a must-have for using classical ready to use icons or adding custom ones: https://github.com/oblador/react-native-vector-icons.

++pre>npm install react-native-vector-icons --save
react-native link++/pre>

You can see if it worked by importing an already packaged font-awesome icon in your app:

• In your code:

++pre>import Icon from 'react-native-vector-icons/FontAwesome';

...

export default () => <Icon name="rocket" size={80} color="#bf1313" />;++/pre>

• The result:

IV- Put your icons in your app

It's time to use the custom font we created earlier. You have two solutions to add your font to Android and iOS:

A- With React Native link

1. Put your ++code class="markup--code markup--li-code">.ttf++/code> in a ++code class="markup--code markup--li-code">./resources/fonts++/code> folder at the base of your project

2. Add this piece of code at the first level of your ++code class="markup--code markup--li-code">package.json++/code> :

++code class="markup--code markup--p-code">"rnpm": { "assets": [ "resources/fonts" ] },++/code>

3. In your terminal: ++code class="markup--code markup--p-code">react-native link++/code>

B- By hand

1. iOS:
2. Copy you++code>.ttf++/code> inside the ++code>./ios++/code> folder of your RN project.
3. Add the font to your project in xCode (by drag and drop in ++code>./Resources++/code>)

1.   
2. Make sure the font is in Copy Bundle Resources: 

1. Android: Copy your ++code>.ttf++/code> inside the ++code>./android/app/src/main/assets/fonts++/code> folder of your RN project.

And finally

1. Add the ++code>config.json++/code> or ++code>selection.json++/code> in your project (here simply in the ++code>./src++/code>)
2. Link the config to react-native-vector-icons.
3. In your code:

++pre>import { createIconSetFromFontello } from 'react-native-vector-icons';
import fontelloConfig from './config.json';
const Icon = createIconSetFromFontello(fontelloConfig);

...

export default () =>  <Icon name="toad" size={80} color="#bf1313" />;++/pre>

• The result:

Here you go! You now know how to important any custom icons in your applications. Please comment and ask questions if needed.