React Native doesn’t directly support rendering SVG. As developers, our lives 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 customised SVG icons in React Native. 
Using react-native SVG:
Why do 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, Install react-native-svg: Open your terminal, navigate to your project’s root folder, and run the commands below. 
Import SVG Components: 
Note: Look at the SVG elements; they don’t look like the default SVG elements in the SVG file, right? Yes, you should use Pascal case for elements, just as we usually do for React components. You can pass SVG properties as props, like the above snippet (width, height, etc. are passed as props). Here is some more info about the usage. 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 do we need react-native-svg-transformer? We have already seenthe purpose of the react-native-svg library in the above section. React native doesn’t natively support importing SVG files. It will throw an error if we use it. This library helps React Native import SVG files. 
Let’s get into it, Install react-native-svg-transformer: Note: This libraryrequires react-native-svg; ensure you have installed itby following these steps. Open your terminal, navigate to your project’s root folder, and run the commands below. 
Configure bundler to use the transformer: 
For TypeScript, 
Configure SVGR: (Optional) This is an optional step; you can customise how the SVG image gets 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 works directly for SVG files into the components. Now rebuild and run, and 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 the first library is more than enough — it keeps your setup lightweight and clean. However, suppose your project involves a large number of SVG icons or you plan to share SVG assets across platforms like React or Angular web apps. In that case, it’s highly recommended to include a 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 the demo project on my GitHub.