Adding SVG icons to your React Native App

While working on the project we can face different situations that require design implementation. Let’s see what we can do with icons.
There are a few ways to implement an icon to the React Native project:

• to use ReactNative.Image component
• to use ReactNative.View to create pseudo shapes by styling
• to use icon set package, like react-native-vector-icons
• to use svg code

Reasons not to use Image component for icons

For sure we can use the Image component for the icons. But this option is suitable if you have only a few icons. And if it doesn’t matter for you whether their edges don’t look good on some devices. And it really can happen, because each device can render scaling artifacts on your icon.

Here are a few reasons why not to use Image Component:

• It’s a bit uncomfortable to link every icon you add to project
• Image component doesn’t support vector formats. So your damn good icon should have different size variants to avoid scaling artifacts. Like 6 logical density buckets for Android devices
• If you want to change icon color, shape or dimensions, you need to use an image editor and save the image in all sizes suitable to a screen pixel density
• Downsampling and upsampling of your bitmap image can make your app consume more resources than with vector variant

Pseudo shapes with ReactNative.View

If you need simple arrows, video play icon, etc., you can challenge your knowledge of geometry and React Native styles. Divide your icon into simple shapes and draw them by View component with border style and transform magic.

If you don’t feel like a diving dip into geometry, next author did the job for you. In his article, you can find examples and graphic artifacts that can appear in some cases – The Shapes of React Native

But if you have more than a few icons and their shapes are more complicated, try to use vector icons.

Vector icon font

Using Vector Icon Font can be comfortable enough when you have approved design mockups with a big number of icons for the project. It would be good if a designer already combined and generated icons into font. Otherwise, you will need to do that. For this, you can go to IcoMoon’s site, import the icons and generate font. Remember you might have problems with some SVG images.

Also, you can use predefined icon fonts if one from offered options suits your design.
Popular icon font packages for React Native:

• Vector Icons
• React Native Font Awesome

But if you want to add your custom icon to font, it can be a bit complicated, ‘cause you will need some tools to edit font.

Render icons in your react native project as svg code

IMHO the best option is to keep the icons in the code. In this case, you will be able to edit them at any time with your default editor. It’s also comfortable when you work in a big team or with rapidly changing projects. svg code isn’t hard to understand so everyone can easily edit these icons.

React Native has a built-in library that can draw pretty much any shape. On the native side, React Native ART translates paths to Core Graphics on iOS and Canvas on Android. But it has only one class called Path and it can be a bit tricky to convert all your svg icons.

We recommend to use react-native-svg package. It was branched from React Native ART and provides an HTML SVG-like interface.
All you need is to convert svg parameters to kebab-case and write svg tags first letter uppercase, ‘cause now they are react components.

import React from 'react'
import { View } from 'react-native'
import Svg, { 
  Circle, Ellipse, G, Text, TSpan, TextPath, Path, Polygon, Polyline, Line, Rect, Use, Image, Symbol, Defs, LinearGradient, RadialGradient, Stop, ClipPath, Pattern, Mask 
} from 'react-native-svg'

const AlertIcon = () => (
  <View>
    <Svg viewBox="0 0 25 25" width="21" height="21">
      <Path
        class="st0"
        fill="#000" d="M25.04,20C23.73,20,22,18,22,16.83v-5.52c0-4.06-2.94-7.8-6.98-8.89c-0.01,0-0.03-0.01-0.04-0.01 long long path in a far far away galaxy"
      />
    </Svg>
  </View>
)

export {
  AlertIcon
}

If you want to customize your icons dinamically, change React Native styles or svg parameters.
You can pass variables to your svg icon component.

const AlertIcon = ({ style, color = '#494b4c' }) => (
  <View style={style}>
    <Svg viewBox="0 0 25 25" width="21" height="21">
      <Path
        class="st0"
        fill={color} d="M25.04,20C23.73,20,22,18,22,16.83v-5.52c0-4.06-2.94-7.8-6.98-8.89c-0.01,0-0.03-0.01-0.04-0.01 long long path"
      />
    </Svg>
  </View>
)

As you see, there are enough options to implement icons into your React Native project. You can choose a faster and easier way or more complicated but easily maintainable one.