Which is the best approach to insert an vector (svg) graph into a react native application

Question

I need to insert a vector (.svg) image into a react-native app. Could you help me please.

I have no idea how to achieve this, and seems like react-native doen't support svg.

Any help will be appreciated.

Answer 1

There are some tools (https://github.com/seekshiva/react-native-remote-svg and others), however, I tried some these tools without good results, so I decided to create a vector font and that works very well. For that you can convert a set of svg images to font (.ttf) using these techniques. You will really get more customizable options with a font instead an image.

I choosed the IcoMoon to create the font (you also can do it with http://fontello.com/ or any other solution you prefer), after create your font, proced the download, you will get a .zip file contain the selection.json and the icomoon.ttf, copy both files (place the files as showed below) to your RN project. The next step is install react-native-vector-icons, with vector-icons you also can work with free icons fonts as font-awesome and others. GitHub: https://github.com/oblador/react-native-vector-icons

Install the dependencies and link it to ios an android folders with:

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

sample using fontawesome:

import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = (<Icon name="rocket" size={30} color="#900" />)

Put your icons in your app. To use the custom font you created, you have to:

1. Put your .ttf in a ./resources/fonts folder at the base of your project
2. Add this piece of code at the first level of your package.json: "rnpm": { "assets": [ "resources/fonts" ] },
3. In your terminal: react-native link

And to use your custom font in a react native you have to:

import React, { Component } from 'react';
import {Platform, View } from 'react-native';
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from './selection.json';
const Icon = createIconSetFromIcoMoon(icoMoonConfig);
//a constant with your icon with with and color
const home = (<Icon name="home" size={30} color="#f7a805" />);

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
          {home}
      </View>
    );
  }
}