ember-svg-jar Asset viewer CSS is affecting the SVGs themselves

Asset viewer CSS is affecting the SVGs themselves

Open jguze opened this issue 4 years ago • 5 comments

🐞 Bug Report

Describe the bug

There is some CSS in the asset viewer itself which is affecting the view of the SVGs in the viewer. Specifically, the fill is being overridden by the currentColor property. This specific class in the general.scss file in the asset viewer is causing the issue: https://github.com/ivanvotti/asset-viewer/blob/1b6e09bc6477ab0fc6295421acd70c667ea696cf/src/styles/base/general.scss#L24

Reproduce the bug

The following SVG will have the incorrect fill in the SVG viewer:

<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.81262 10.625C10.864 9.73077 11.5333 8.38283 11.5333 6.875C11.5333 4.18261 9.39922 2 6.76667 2C4.13411 2 2 4.18261 2 6.875C2 9.56739 4.13411 11.75 6.76667 11.75C7.9249 11.75 8.98665 11.3275 9.81262 10.625ZM9.81262 10.625L13 14" stroke="#151C1F" stroke-width="2" stroke-linecap="round"/>
</svg>

Expected behavior

The asset viewer shouldn't have CSS that affects the look of the SVGs within the viewer.

Possible Solution

Just fix the general.scss file to specific exactly which SVGs it wants to override the fill for. If I remove that line, the SVG looks as expected.

Screenshots

Image

Devtools

Additional context

Apr 26 '20 18:04 jguze

Hi. Is there any intention to address this? I'm experiencing the same thing and it's certainly decreasing the usefulness of the svg viewer. Very much like the idea of this but this is quite the pain.

I'm happy to knock out a PR if the maintainer has some thoughts on how they would like it fixed.