React Native doesn’t directly support rendering SVG. As developers, our life can’t move forward without SVGs. So, we need to depend on libraries like react-native vector icons to render icons – but we’re restricted to using only the icons provided by those libraries.
This blog will help you render your customized SVG icons in React Native.
Using react-native SVG:
Why we need react-native-svg library?
React Native doesn’t know how to process SVG elements. So, we need this library to help React Native understand and render SVG elements .
Let’s get into it,
Open your terminal, navigate to your project’s root folder, and run the below commands.
Note:
Look at the svg elements, it doesn’t look like default svg element which are in svg file right? Yes, you should use pascal case for elements like we usually do for react components. You can pass svg properties as props like the above snippet (width, height etc. are passed as props).
Want to know more about the usage Click here.
Import into your component:
App.tsx
Rebuild and run the app… Boom, now you can see the icon in your app.
Using react-native-svg-transformer
Why we need react-native-svg-transformer?
We have already seen purpose of react-native-svg library in the above section.
React native doesn’t natively support importing SVG files. It will throw error if we use it.
This library helps React Native to import SVG files.
Let’s get into it,
Install react-native-svg-transformer:
Note:
This library needed react-native-svg, make sure you have installed that,by following this.
Open your terminal, navigate to your project’s root folder, and run the below commands.
Configure bundler to use the transformer:
For TypeScript,
Configure SVGR: (Optional)
This is an optional step, you can customize how SVG image get transformed to React/React native.
Read more about the configuration : Configuring SVGR and SVGR options
If you want to configure, you have to add .svgrrc file in your project root folder and add configurations based on your need.
As you can see the import, now we can directly import SVG files into the components.
Now rebuild and run you can see the icons.
Conclusion:
Choosing the right library depends on your project’s requirements.
If your app uses only a few simple icons, then using just first library is more than enough — it keeps your setup lightweight and clean.
However, if your project involves a large number of SVG icons or you plan to share SVG assets across platforms like React or Angular web apps, it’s highly recommended to include second library as well. It offers better scalability and asset reusability across projects.
References:
- react-native-svg – A library to render SVG elements in React Native.
- react-native-svg-transformer – Allows importing .svg files as components in React Native projects.
Find demo project on: https://github.com/HariharanT99/ReactNativeSVG