question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Not catching the style/classes correctly (Black shape)

See original GitHub issue

Hi, I have an SVG file with <style> tags, and the conversion is not going well. That renders as a black shape of the SVG. I think that it doesn’t catch the <styles> tag well… what I can do? I have so much SVG Files…

SVG File:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 96 96" style="enable-background:new 0 0 96 96;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:#222FFF;}
</style>
<path class="st0" d="M48,96c26.5,0,48-21.5,48-48S74.5,0,48,0S0,21.5,0,48S21.5,96,48,96"/>
<path class="st0" d="M48,95c26,0,47-21,47-47S74,1,48,1S1,22,1,48S22,95,48,95"/>
<g>
	<g id="Navigation">
		<g>
			<path class="st1" d="M24,30.9h48.6c1.8,0,3.2-1.5,3.2-3.3c0-1.8-1.4-3.3-3.2-3.3H24c-1.8,0-3.2,1.5-3.2,3.3
				C20.8,29.4,22.2,30.9,24,30.9z M72.6,44.3H24c-1.8,0-3.2,1.5-3.2,3.3c0,1.8,1.4,3.3,3.2,3.3h48.6c1.8,0,3.2-1.5,3.2-3.3
				C75.8,45.7,74.3,44.3,72.6,44.3z M72.6,64.2H24c-1.8,0-3.2,1.5-3.2,3.3c0,1.8,1.4,3.3,3.2,3.3h48.6c1.8,0,3.2-1.5,3.2-3.3
				C75.8,65.6,74.3,64.2,72.6,64.2z"/>
		</g>
	</g>
</g>
</svg>

Thanks.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:13 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
kristerkaricommented, Apr 19, 2019

@alamothe New version is out that adds support for the SVGR config file: https://github.com/kristerkari/react-native-svg-transformer/releases/tag/0.13.0

1reaction
kristerkaricommented, Mar 20, 2019

Thanks @manelsanz!

There are still features that react-native-svg does not support when compared what the web browsers support related to SVG rendering.

I haven’t tested, but my guess is the same as yours that the <style> tag is not supported. Could you instead change the svg file to have the fill attribute in the path elements instead of the <style> tag?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Styleclass af:button - Oracle Communities
Hi. I am having trouble with style classes. I have two af:buttons and want to style them so that they look different when...
Read more >
How do I override the style of primeng components?
1. Make sure styles.scss at the most bottom line in angular.json, then override the styleClass provided by primeng. · This tip about having ......
Read more >
list-style - CSS-Tricks
The list-style property is a shorthand property that sets values for three different list-related properties in one declaration:
Read more >
Xamarin.Forms 5: Dual Screens, Dark Modes, Designing with ...
Learn about new enhancements to Xamarin.Forms 5 to support new screen sizes, orientatonss and postures supported in the Surface Duo.
Read more >
Bootstrap Buttons - examples & tutorial
Responsive Buttons built with Bootstrap 5. Multiple predefined button style classes: button link, outline, round button, social, floating, fixed & more.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found