React Native display SVG from a file

Question

How do I display an SVG image that I require() in React Native.

• https://github.com/brentvatne/react-native-svgkit Is not under active development

Answer 1

You can display small SVG file as data using this library,

Note: Large SVG images are not rendering properly.

npm i react-native-remote-svg

import Image from 'react-native-remote-svg'


     
   `
}}
style={{ width: 100, height: 100}}
/>

If you want to display any size of images remotely with above library and then do this,

But if you used this one for display the local svg file, then you will get some issues in android when you bundle and put the release.

import Image from 'react-native-remote-svg'

or you can use Icomoon (For small SVG images/Icons),

Recommended: Use Icomoon for Icons and Small SVG Images

See this video to setup the icomoon in react native