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]

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?

[github-actions]

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.