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.

Global styles from inlined svg conflicting

See original GitHub issue

Is there a way to apply classes in a way that’s scoped to the svg instead of as global classes, using this tool? The provided SVG files from our designers all have the same global classes, so they all conflict.

Or is this just an issue we should resolve by modifying the svg by hand? It seems like we’ll inevitably run into this problem again.

Edit: It appears inlineStyles is the plugin necessary, but babel-plugin-inline-react-svg is using an old version of svgo which doesn’t support it.

Issue Analytics

State:
Created 5 years ago
Comments:11

Top GitHub Comments

1reaction

majapwcommented, Jun 22, 2018

@mherodev it looks like the option required is convertStyleToAttrs. It seems like svgomg has this on by default. 😃

1reaction

mherodevcommented, Jun 22, 2018

@majapw Oh interesting, is there a way to generate the svg output you shared through this plugin? I can pass svgo settings, but none I tried consolidated styles into attributes.

That’d fix the bug in the common case, and I can request that styles are inlined in the future (however that’s done, I’ll leave it up to our designers).

Top Results From Across the Web

svg styles interfering with each other - Stack Overflow

How can I make sure that inline SVG styles are not interfering with each other, without touching the actual SVG code?

Use Inline Style Attributes on SVG Elements to Avoid ...

When SVGs starting looking weird on your website, it might be because their styles are being overwritten.

If You're Inlining SVG Icons, How Do You Deal With Unique ...

One of those reasons might be because you just want an ID on the icon to uniquely identify it for JavaScript or styling...

My Custom CSS Reset - Josh W Comeau

In the past, I'd use a typical CSS reset, but times have changed, and I believe I have a better set of global...

SVG Elements and Attributes - O'Reilly Design System

For SVG-in-HTML, use HTML-style data attributes; any attribute name that ... Browser behavior is inconsistent when the text element has child elements.