Use SVGs (2024)

Learn how to create and use SVGs in an Expo project.

SVGs (Scalable Vector Graphics) are a great way to present icons and other visual elements in a flexible, crisp, and performant way. Using SVGs on the web is straightforward since we can copy an SVG and place it inline in an HTML file. This works because browsers understand how to parse and present SVGs. Expo does not understand how to parse and present SVG out of the box on Android and iOS, so we'll need to use a React Native package and an SVG converter to do so.

Let's go over the whole process of creating an SVG to presenting it in an Expo project.

Exporting an SVG

Once we have a vector created inside a design program, like Figma, Illustrator, or Sketch, find the "export" menu and specify "SVG" as the export type. This will create an SVG file we can view in a code editor. Alternatively, these programs often allow right-clicking on an element, then copying it as an SVG.

Converting SVG files using a Babel transformer

React Native SVG transformer allows compile-time transformation to make SVG files compatible with React.

Follow the installation steps to configure your Expo project to use this workflow. After your project is properly configured, you'll be able to use your local SVG files like this:

import Logo from './assets/logo.svg';<Logo width={120} height={40} />;

Converting individual SVG files for React Native

Alternatively, React-SVGR is a great tool to convert individual SVG files. It takes an SVG as input then can transform it into another format, including a format that works with React.

Paste the SVG contents from the exported SVG file into React-SVGR and make sure the "native" checkbox is ticked. It will provide output that we can copy and paste into our project.

To automate this process, React-SVGR also provides a CLI that could allow us to put regular SVGs in our project, then run a script that would convert them into React components automatically. If you have many icons, or a team of developers working on your project, it's definitely worth the time to set up process like this.

Including the SVG in our project

Once we have a compatible SVG, we'll need to add react-native-svg to our project. We can do so with:

Then we can add code like the following to our project:

You can learn more about SVG with our API Reference document on SVG.