How to properly render SVG in React Native

user_1762547 0
Viewed 380

Hi Have the following code in our react native application:

import { SvgCssUri } from 'react-native-svg';

<SvgCssUri style={styles.osIcon} uri={'https://mon.zappiehost.com/images/os/' + props.data.icon} />

I have even tried to use simple SvgUri (instead of SvgCssUri)

But the image still load with out some of the content (Blacks colors):

What React native Renders the image like What it should look like

Also here is the original SVG image used: https://raw.githubusercontent.com/librenms/librenms/master/html/images/os/proxmox.svg

react-native-svg react-native reactjs svg
1 Answers

Turns out the blacks were missing due to the fact that React Native SVG didnt do auto fill.

adding fill={'black'} is what was needed into the <SvgUri> tag

user_17625470
Related