CODEWITHSUNDEEP
reactjsreact-native
Anand S
Anand S

Reputation: 820

How to show an svg icon using svg image path in react native?

I want to show SVG icons but the thing I couldn't find the way to show. I tried to use Image and Use components of react-native-svg but they don't work with that. And I tried to do that with native way but it's really hard work to show just SVG icons.

Example code:

<Svg width="80" height="80">
 <Image href={require('./svg/1f604.svg')} />
</Svg>

Upvotes: 3

Views: 5316

Answers (1)

Chetan
Chetan

Reputation: 142

Initially, I had the same problem when I had SVG icons in my machine or saved in web URL.

I explored the react-native-svg library, but it does not allow you to include source of SVG icon already created. We can only create new icons using that library.

Later I found react-native-svg-uri which does allow us to use a given path to the icon.

You can use it like this:

import SvgUri from 'react-native-svg-uri';

<SvgUri
    width="200"
    height="200"
    source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}}
/>

Upvotes: 5

Related Questions