Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Asset viewer CSS is affecting the SVGs themselves #158

Open
jguze opened this issue Apr 26, 2020 · 5 comments
Open

Asset viewer CSS is affecting the SVGs themselves #158

jguze opened this issue Apr 26, 2020 · 5 comments
Labels

Comments

@jguze
Copy link

jguze commented Apr 26, 2020

🐞 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
image

Devtools
image

Additional context

@jguze jguze added the bug label Apr 26, 2020
@achambers
Copy link

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
Copy link

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

@ghost
Copy link

ghost commented Feb 7, 2022

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

@jherdman
Copy link
Collaborator

jherdman commented Feb 7, 2022

Ping @ivanvotti

@tniezurawski
Copy link

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:

image

But how to propagate/apply it? 🤔

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants