Scalable vector graphics (SVG) icons are a far better choice for your app than basic PNG icons. They give a feeling of a professional app due to their high resolution.

Moreover, they can scale easily with the screen size and you can add animations to them.

As a React Native developer, often you will need to integrate them into your mobile app as part of the assets provided by your colleagues from the design team.

In this short article, I will show you how to quickly add custom SVG icons to your Expo app.

Let us get started.

I — Create a new expo app

Bootstrap a new expo project.

expo init customSVG

Choose a bare app JavaScript project template then open the project in your favourite editor.

II — Add the necessary libraries

1 — We need to install two libraries: react-native-svg

expo install react-native-svg

and

react-native-svg-transformer.

yarn add react-native-svg-transformer

2 — In your root project create a new file: metro.config.js

3 — Paste the following config:

const { getDefaultConfig } = require("metro-config"); module.exports = (async () => {

const {

resolver: { sourceExts, assetExts }

} = await getDefaultConfig();

return {

transformer: {

babelTransformerPath: require.resolve("react-native-svg- transformer")

},

resolver: {

assetExts: assetExts.filter(ext => ext !== "svg"),

sourceExts: [...sourceExts, "svg"]

}

};

})();

4 — Add the following to your app.json

{

"expo": {

"packagerOpts": {

"config”: "metro.config.js",

"sourceExts": ["js", "jsx", "svg", "ts", "tsx"]

}

}

}

III — Run the project

1 — Put your SVG file inside the assets folder in your Expo project.

2 — You can now import your SVG file in App.js and render it as a React Native component.

import React from "react";

import { View, StyleSheet } from "react-native";

import CustomIcon from "./assets/yourIcon.svg"; export default class App extends React.Component {

render() {

return (

<View style={styles.container}>

<CustomIcon width={120} height={120} />

</View>

);

}

} const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: "black",

justifyContent: "center",

alignItems: "center",

}

})

3 —Run the project.

expo start --ios // or --android

Custom SVG icon in Expo app.

Et Voila.