2

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

Yif Swery
  • 179
  • 1
  • 12
  • @RobertLongson I added a link to the original SVG image that seems to be rendering incorrectly https://raw.githubusercontent.com/librenms/librenms/master/html/images/os/proxmox.svg – Yif Swery Jul 25 '21 at 18:59
  • The path that doesn't display has no fill attribute. It should default to black but perhaps there's a bug and it doesn't. You could try giving the patch an explict fill of black or #000000 – Robert Longson Jul 25 '21 at 19:08

1 Answers1

3

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

Yif Swery
  • 179
  • 1
  • 12