search

urfuwo / hlx-test

Apache License 2.0
0 stars 3 forks source link

DS: Block: Link List SVG icon handling with CSS filter/mask (POC) #456

Closed eduardseifert closed 2 months ago

eduardseifert commented 2 months ago

Based on the changes in: https://github.com/urfuwo/hlx-test/issues/423

The current SVG icons are embedded into an img tag src attribute. You can't style them with CSS (no access to the SVG DOM fill attribute. The current implementation works with replacing the img tab with SVG markup, so the CSS is able to manipulate the icon color in state of :hover.

Idea is (discussed with @mhaack) to check if the icons can be manipulated with CSS filters to our satisfaction (which would be super clean).

rjwtrmn commented 2 months ago

We can do something like this with mask, which I used when adding eyebrow text, though perhaps this was not the best approach as it means we have to specify the filepath in the CSS styles. Anyway here it is, we can also update this instance if there is a better option with filter: https://github.com/urfuwo/hlx-test/pull/399/files#diff-18fde12c751ef9ee12a4be3c5582c91d1df1088249718dd5498696366a44fc9bR109

eduardseifert commented 2 months ago

I'll check it out. Thanks.

mhaack commented 2 months ago

@rjwtrmn this approach will not work here as the icon can be any icon. So we don't know the filename. Any idea we can navigate around?

eduardseifert commented 2 months ago

@mhaack Maybe sth. like container.style.maskImage = `url(${imgSrc})`; (inline styles) for each icon wrapper in JS and then style the container in CSS.

eduardseifert commented 2 months ago

Discussion result: We will stick with the CSS filter solution for the moment.