SOLVED: Icon Element: change svg fill color on hover

[Sebastian]

Bricks Version: 1.5
Browser:
Version 1.42.88 Chromium: 104.0.5112.81 (Official Build) (arm64)

OS: macOS
URL:

When importing a custom SVG and chain its fill color from the supplied interface and then selecting the pseudo-element :hover you cannot choose another color to act as hover color. It will set it as the global color.

Note: builtin svgs have a different interface and the pseudo selector and hover do work together, just not on custom svgs uploaded through the media library.

Setting the fill on the pseudo :hover:

Result: global change of fill color

[timmse]

Hi Sebastian,
Thanks so much for your report!

I was able to reproduce the issue and added it to our bug tracker.

Best regards,
timmse

[timmse]

Hi Sebastian,
We’ve fixed this bug in Bricks 1.5.1, now available as a manual download in your Bricks account.

Please let us know if you are still experiencing issues.

Best regards,
timmse

[mikt]

I do face the same issue - and am on 1.5.7 - is it back?

[timmse]

Hi Michael,
for me, it works fine with Bricks 1.6 Beta 2.

[mikt]

Still not for me on 1.6.
For a strange reason some of the fields are not attached to a class or modifier. It is working fine on fontawesome - but not with SVGs - i will try more.

[timmse]

Hey,
Open your SVG with a text/code editor and check whether inline styles are present. This could be a possible reason for the problem.

Best regards,
timmse

[monadic]

@timmse I still experience this issue in Bricks 1.8.1 - however this is on a Button element with an Icon added.

Here is the code of the SVG I am using:

<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px">   <path d="M25,2C12.318,2,2,12.318,2,25c0,3.96,1.023,7.854,2.963,11.29L2.037,46.73c-0.096,0.343-0.003,0.711,0.245,0.966 C2.473,47.893,2.733,48,3,48c0.08,0,0.161-0.01,0.24-0.029l10.896-2.699C17.463,47.058,21.21,48,25,48c12.682,0,23-10.318,23-23 S37.682,2,25,2z M36.57,33.116c-0.492,1.362-2.852,2.605-3.986,2.772c-1.018,0.149-2.306,0.213-3.72-0.231 c-0.857-0.27-1.957-0.628-3.366-1.229c-5.923-2.526-9.791-8.415-10.087-8.804C15.116,25.235,13,22.463,13,19.594 s1.525-4.28,2.067-4.864c0.542-0.584,1.181-0.73,1.575-0.73s0.787,0.005,1.132,0.021c0.363,0.018,0.85-0.137,1.329,1.001 c0.492,1.168,1.673,4.037,1.819,4.33c0.148,0.292,0.246,0.633,0.05,1.022c-0.196,0.389-0.294,0.632-0.59,0.973 s-0.62,0.76-0.886,1.022c-0.296,0.291-0.603,0.606-0.259,1.19c0.344,0.584,1.529,2.493,3.285,4.039 c2.255,1.986,4.158,2.602,4.748,2.894c0.59,0.292,0.935,0.243,1.279-0.146c0.344-0.39,1.476-1.703,1.869-2.286 s0.787-0.487,1.329-0.292c0.542,0.194,3.445,1.604,4.035,1.896c0.59,0.292,0.984,0.438,1.132,0.681 C37.062,30.587,37.062,31.755,36.57,33.116z"/></svg>

Here’s a video showing the attempted hover style failing in action:

Bricks Icon button hover style

Any ideas? I’d be happy to switch to an icon list or something else if another element supports a proper hover style on an SVG. Thanks!

(I am working around with using a FontAwesome brand icon for the moment, but i would really like to not load that entire font for a singular icon)

[timmse]

Hi Daniel,
Your problem is a different element and, therefore, a different problem we know about. However, it is not as easy to solve as it seems at first sight.

The simplest temporary solution is to use custom CSS for both the fill and the :hover fill.

root svg {
  fill: red;
}

root:hover svg {
  fill: green;
}

[monadic]

Oh, I see - thanks for the temporary solution, that works perfectly fine for now

[Loic]

I encounter the same issue!

[Sebastian]

@timmse Might be useful not to have it tagged as solved, since the laster version reintroduced the issue, despite a temp solution.

[timmse]

Hi Sebastian,
Unfortunately, I cannot reproduce the issue and need a little more information.

Would you be so kind as to provide a live link and a screencast using https://birdeatsbug.com or https://jam.dev showing and explaining what’s happening?

[bambibol]

I’m struggling with the same issue! I have an SVG in a query card that should change color when hovering the whole card.

Can’t get the SVG’s color to change except with the fill-setting for the SVG itself, but any kind of CSS I try won’t change the fill. I’m able to add a mix-blend-mode for the hover though so it does something when I use root:hover svg {} just not the (fill) color.

[timmse]

Hi @bambibol ,
Your problem is also a different problem, because your SVG is in a loop/you want to achieve the change when hovering the card.

Currently, you can’t get around custom CSS because you can’t target the SVG within the settings.

A live link would be very helpful, then I could probably tell you directly what is causing the issue.

[bambibol]

Hey Timmse,

Here’s my WIP site: Shop – DINDIN DESIGN – within the loops I’m trying to achieve the same for the SVG’s as what’s happening with the price, they’ll turn white on hover with a slight dropshadow for now. Here’s how it’s set up, in the CSS of the card:

%root%:hover .product-loop__product-price {
  color: var(--light);
  filter:drop-shadow(2px 2px 3px var(--dark-80));
}

%root%:hover svg {
  fill: var(--light);
  filter:drop-shadow(2px 2px 3px var(--dark-80));
}

The filter on the SVG works fine I’m just struggling with its (fill)color.

Thanks in advance!

[timmse]

Hi Bambi,
The problem is caused by the SVG inline styles, which you should eliminate either on export or using a tool such as: SVGOMG - SVGO's Missing GUI

Enable “Remove style elements” at the bottom and you should be fine.

[bambibol]

Hey Timmse,

Unfortunately that didn’t do the trick. Actually I’ve already put all my SVG’s through the SVGOMG tool because of another issue I had before. Either way I tried it again with specifically ‘remove style elements’ toggled on and it doesn’t seem to make a difference.

Any other ideas I could try to get this to work?

Thanks!!

[timmse]

Ok, still: the less inline styles, the better

I’m not quite sure how to reproduce the problem yet, but it seems like you need to make your code much more specific to overwrite the default state. Try this:

.product-loop__product-card:hover .product-loop__svg :not([fill="none"]) {
    fill: var(--light) !important;
    filter: drop-shadow(2px 2px 3px var(--dark-20));
}

[bambibol]

That worked! Perfect, thanks a bunch!!