Article
Ditch the Extra Plugin: A Simple Way to Render SVGs in React Native
January 8, 2025
Are you using react-native-svg to display SVGs in your React Native app, and you want to display local SVG files? Well, the documentation for that feature steers you towards a different plugin. But what if you don’t want to do add a new dependency to your project? It might seem as though you’re out of luck, but I’m here to tell you that there is a little known feature in react-native-svg that allows you to render local SVG files without having to rely on another plugin.
A new component was added all the way back in version 12.1.0 that allows you to do just that! Using the WithLocalSvg component, you can render any local SVG file that is included in your app’s binary. This has some limitations, particularly around styling, but if you just want to render some SVGs, look no further.
Using WithLocalSvg
To render a local SVG, use the WithLocalSvg component, and provide it with an asset instead of a uri.
<WithLocalSvg asset={require("../assets/images/icon.svg")}/>This will render the image at the size encoded in the SVG file, but if you would like to customize the size displayed, provide WithLocalSvg with your own width and height values (these values are in points, which are mapped to dp on Android and standard point values on iOS).
<WithLocalSvg
asset={require("../assets/images/icon.svg")}
width={24}
height={24}
/>Styling your SVGs
Like I mentioned before, WithLocalSvg does have its limitations. While it is great for directly displaying a local SVG, its only customization option is the size of the rendered image. If you want to further customize colors, strokes, or other properties, you will need a different approach.
This is where something like react-native-svg-transformer can come in handy. This plugin transforms a local SVG file into a native React Native component, which allows you to style the resulting component to your heart’s content. This is especially handy when you want to just have one SVG file, but want to style it differently for light and dark modes, app-wide themes, or just for using it in different places of your app.
Conclusion
While most documentation and answers in forums online will commonly steer you towards pulling in a separate dependency, you do have more options! It all depends on how fancy you need to get. If you just need to display some SVGs in your app without any fuss, take a look at the features that react-native-svg already offer you.
