React Native: How To Use SVGs

Summary: How to add support for and use SVGs in React Native projects using react-native-svg and react-native-svg-transformer, including Jest setup.

Photo by George Pagan III on Unsplash

The Trend

Scalable vector graphics are increasingly being used on more mobile apps and websites. These have some advantages over bitmap image formats like png and jpg for several reasons:

• Smaller file size
• Scales to any size without a loss of quality
• Looks great on retina displays (no @2x, @3x assets necessary)
• Easily customizable with CSS, and can be animated

Installation and Configuration

First, install the react-native-svg and react-native-svg-transformer packages to your project with the package manager of your choice: yarn add react-native-svg react-native-svg-transformer .

Next, update your metro-config.js bundler configuration file. Use the below configuration file as a guide to update yours: