Fix icon color #3082
Fix icon color #3082
Conversation
StevenRenaux
force-pushed
the
Fix/Fix-icon-color-fill-and-stroke-attributes
branch
from
dce6c8d to
76d2253
Compare
StevenRenaux
force-pushed
the
Fix/Fix-icon-color-fill-and-stroke-attributes
branch
from
76d2253 to
0751dad
Compare
|
This is also a massive BC break here, don't you think ? And losing the read-only side of thing .. DId you try simply setting the color on the icon ? |
| } | ||
|
|
||
| if ('fill' === $name) { | ||
| $this->innerSvg = str_replace('fill="currentColor"', "fill=\"{$value}\"", $this->innerSvg); |
| } | ||
|
|
||
| if ('stroke' === $name) { | ||
| $this->innerSvg = str_replace('stroke="currentColor"', "stroke=\"{$value}\"", $this->innerSvg); |
There was a problem hiding this comment.
Let's keep an only place we echo value and espace / encode them correctly (just below)
carsonbot
added
Status: Needs Work
@smnandre Looking at this again this morning, I just found that this is possible with the color attribute and is even perfect in this case.
Perhaps the documentation should be modified accordingly, and mention that if you want to change the color, you can do it via CSS, as Iconify also mentions in its documentation. 
{{ ux_icon('flowbite:clock-outline', {class: 'size-4 text-gray-500'}) }}Or with this color attribute. And we ultimately avoid the current problem with the fill attribute. {{ ux_icon('flowbite:clock-outline', {class: 'size-4', color: 'gray'}) }}WDYT? |
|
Already noticed by another PR #2671 |
|
Very open if you want to open a PR on the documentation with clear and positive information about this (please do not only mention Tailwind that's the only thing I'm asking for haha) poke me if you need any guidance here :) |
If we use
fillorstrokeattributes to update the color icon, as explained into https://symfony.com/bundles/ux-icons/current/index.html#default-attributes, nothing happens.Let's explore a default Boostrap SVG together: https://icons.getbootstrap.com/icons/person/
{{ ux_icon('bi:person') }}If we go into Bootstrap to grab that icon, it looks like this
UX-icon uses Iconify's icons and this icon is not completely the same https://github.com/iconify/icon-sets/blob/master/json/bi.json#L4472
Iconify returns the
pathtag for the bootsrap icon, this part is incremented with thefillattribute or thestroke, depend on the need.But if we add
fillorstroketo it will add these attributes to the svg tag and will not update the ones into thepathtags, and that's the problem.{{ ux_icon('bi:person', {fill: 'red'}) }} <!-- Rendered --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="red" aria-hidden="true"><path fill="currentColor" d="M8 8a3 3 0 1 0 0-6a3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0a2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1s1-4 6-4s6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"></path></svg>With the modifications the
pathtag also follow the same rules