SVGs are filled with black instead of none

[ClaudiuHBann]

Description

I use the SvgXml and SvgCss components with the following SVG:

<svg viewBox="0 0 24 24" width="24" height="24" stroke="black" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><polygon points="12 15 17 21 7 21 12 15"></polygon></svg>

And looks like this for both components:

Instead of:

Steps to reproduce

1. install react-native-svg in a project
2. use the svg's xml from description in a SvgXml/SvgCss

SVG version

15.11.2

React Native version

0.78.0

React Native Windows version

0.78.5

Platforms

Windows

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

Real device

Device model

Windows 11

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[jarklee]

The same issue occurs when using an SVG icon via a direct SVG element. All the space between paths gets filled with black color.

[mattlisiv]

In case this is helpful to anyone else:

We encountered this issue when using react-native-svg and react-native-transformer to import SVG and displaying .svg files.

It began occurring after we upgraded to RN version 0.78

The issue stemmed from passing a null value to the fill property on the SVG component. Previously, the library seemed to ignore the reference.

We have a wrapper Component for displaying SVG icon. Something like:

import Sample from './sample.svg';

const Icon = ({ type, fill, width, height }) => {
  let SelectedIcon;
  switch (type) {
    case 'sample':
      SelectedIcon = Sample;
  }
  return (
    <SelectedIcon
      fill={fill}
      width={width}
      height={height}
    />
  );
};

Previously, this would properly render correctly.

<Icon type={'sample'} width={30} height={30} />

Now, in version 0.78 and above, the fill will be black automatically.

The easiest solution was checking for a null fill and defaulting to transparent:

const Icon = ({ type, fill, width, height }) => {
  let SelectedIcon;
  switch (type) {
    case 'sample':
      SelectedIcon = Sample;
  }
  return (
    <SelectedIcon
      fill={fill ? fill : 'transparent'}
      width={width}
      height={height}
    />
  );
};

Repository for reproducing: https://github.com/mattlisiv/react-native-svg-fill-test

I am unsure if this was an intentional breaking change or just a byproduct of package changes but didn't find any related documentation.

[bohdanprog]

Hey @mattlisiv, @ClaudiuHBann, Here is the fix for your problem: https://github.com/software-mansion/react-native-svg/pull/2726

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[bohdanprog]

Hey @ClaudiuHBann, it should cover both cases, SvgXml and SvgCss. Let me know if I can help with anything here.

[ClaudiuHBann]

@bohdanprog I looked into the PR and saw that and deleted the comment, my bad. I added a comment on the PR.