Description
Hello,
I continue to play with ux-icons, and there is a weird behavior:
- create or open a svg,
- put in its svg tag a
fill="#fff"attribute, - in your html, put something like
<div style="color: red;">{{ ux_icon('mysvg') }}</div>, - clean your cache,
- check out that your icon is red; The fill attribute inside svg tag is discarded by currentColor config,
- modify your function to add an attribute:
<div style="color: red;">{{ ux_icon('mysvg', {fill: '#00f'}) }}</div>, - clean your cache,
- check that your icon is blue; This fill attribute takes precedence.
When you render this, your svg is filled by red, not by your white #fff. Thing is that the ux_icon component put the default fill="currentColor" attribute even if there is already a fill attribute in the file.
Maybe it is not intended, or counter-intuitive, and the function should check if fill exists before writing one? Because is a given project, there is some icons that you want to be color swappable, and that can be a majority that deserves a default fill="currentColor" config for it, but also have few icons that must stay in a given color and not move from it (at least not as easily as just color: whatever). For example brand icons, action buttons, ...
Current workaround is to put the fill attribute inside the svg tag, for example on a path tag or wrap the tags with a g tag. Or to give the color control to CSS 😄