React Native: Vector Icons – FontAwesome and others

You want some nice icons in your app, don’t you? In my laziness I tried using emojis instead, but it turned out to be sub-par.

So I conceded and installed an icon package called

React Native Vector Icons

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

How this works

This package provides fonts and some wrappers. Since SVG is still not working 100% on RN, introducing vector icons via font seems like a reasonable approach. In mobile apps you want to bundle the font with the app itself.

IOS

Theoretically, you should be able to rnpm link. Unfortunately, that didn’t work for me, so I had to install font manually:

  • Drag “Fonts” folder from node_modules/react-native-vector-icons to your project
  • You have to add fonts in info.plist This is how I added FontAwesome only:

UIAppFonts : Fonts/FontAwesome.ttf

ANDROID

In android/app/build.gradle

project.ext.vectoricons = [
    iconFontNames: [ 'FontAwesome.ttf' ] // Name of the font files you want to copy
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

In android/settings.gradle :

include ':react-native-vector-icons'

project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

Using

Now you want to plaster icons all over your application, don’t you? I do too!

If you are using Font Awesome like me, you would go to http://fontawesome.io/icons/ and pick your icon. You need the name without “fa-” at the beginning, and then you drop icon in your project like so:

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

WEB

Because my project is isomorphic, this caused some problems in the web version. react-native-web is not yet compatible with react-native-vector-icons. To make the project even compile on the web, I made 3 files that abstracted the icon enough:

icon.web.js

import React from 'react';
import { Text } from 'react-native';
export default Text;

index.android.js and index.ios.js

import Icon from 'react-native-vector-icons/FontAwesome';
export default Icon;

Because isomorphism works in react native by picking specific files, my project now builds under all 3 environments. Granted, I would prefer it to build for web with working icons, which it does not do currently, but thats a battle for another day.

React Native Isomorphic app over the weekend

This article is part of my “React Native Isomorphic app over the weekend” series. It shares the problems I encountered during development of TeamParrot and Headstart Journal.

One thought on “React Native: Vector Icons – FontAwesome and others

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s