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 a Expo project.
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.
Now, it's time to convert our SVG to be compatible with React. React-SVGR
is a great tool to accomplish this. 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.
Once we have a compatible SVG, we'll need to add react-native-svg
to our project. We can do so with:
expo install react-native-svg
Then we can add code like the following to our project: