Asset viewer CSS is affecting the SVGs themselves

[jguze]

🐞 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

[achambers]

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.

[MelSumner]

Hi! I'm also seeing this same issue. Anyway I can help?

[ghost]

Opened a PR to fix this in the dependency project, will also need to be bumped in package.json in this project.

[jherdman]

Ping @ivanvotti

[tniezurawski]

Does anyone know how the viewer is built? I could add the fix that I found here (thanks @marcemira!) but by looking at the last contributions being done 4 years ago and the fact that I don't see asset-viewer in dependencies, I don't think https://github.com/voltidev/asset-viewer is the place where asset viewer is developed, right? 🤔

In this repo, I only found the minified CSS file but I guess we don't want to edit that 🤷‍♂️

As you can see, the fix works well:

But how to propagate/apply it? 🤔