[Icons] Add documentation on icons colors

[StevenRenaux]

Q	A
Bug fix?	yes
New feature?	no
Docs?	no
License	MIT

If we use fill or stroke attributes 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

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
  <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 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"/>
</svg>

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 path tag for the bootsrap icon, this part is incremented with the fill attribute or the stroke, depend on the need.

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

But if we add fill or stroke to it will add these attributes to the svg tag and will not update the ones into the path tags, 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 path tag also follow the same rules

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="red" aria-hidden="true"><path fill="red" 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>

[smnandre]

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 ?

[smnandre]

I get the idea, but we need to find a better method...

And i'm not yet convinced of the usage... at least not in the one you provided.. maybe i'm not seeing something

[StevenRenaux]

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 ?

@smnandre
I know, and I agree. It was mainly to show where the problem lies. The documentation suggests this is possible, but it's not with this attribute (https://symfony.com/bundles/ux-icons/current/index.html#default-attributes).

Looking at this again this morning, I just found that this is possible with the color attribute and is even perfect in this case.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color

The color attribute is used to provide a potential indirect value, currentColor, for the fill, stroke, stop-color, flood-color,
and lighting-color attributes.

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?

[StevenRenaux]

Already noticed by another PR #2671

[smnandre]

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 :)

[smnandre]

(thank you @StevenRenaux ! 😃 )

[Kocal]

Thank you @StevenRenaux.