minor #3082 [Icons] Add documentation on icons colors (StevenRenaux)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

[Icons] Add documentation on icons colors

| 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/
```html
{{ ux_icon('bi:person') }}
```

If we go into Bootstrap to grab that icon, it looks like this
```html
<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.
```html
<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.
```html
{{ 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
```html
<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>
```

Commits
-------

52d32fb [Icons] Add documentation on icons colors

Author: Kocal

src/Icons/doc/index.rst

@@ -112,9 +112,31 @@ the size of all your icons from a single place.
 Icon Color
 ~~~~~~~~~~
 
-Typically, SVG icons use ``fill="currentColor"`` to inherit the color of the containing element.
-You can set the color in CSS on the container or directly on the SVG element/class.
+UX Icons renders SVG icons with ``fill="currentColor"`` (see the `default configuration`_).
 
+This means icons take their color from the CSS ``color`` property, which by default is inherited from the text color of
+the parent element.
+
+.. code-block:: html+twig
+
+    <a href="#" class="text-blue-500">
+        {# icon color: blue #}
+        {{ ux_icon('bi:star') }}
+    </a>
+
+You can set the icon's color using CSS classes, either on the parent container or directly on the icon:
+
+.. code-block:: html+twig
+
+    <div class="text-red-500">
+        {# Inherit color from container (red) #}
+        {{ ux_icon('warning') }}
+
+        {# Override parent with CSS class (blue) #}
+        {{ ux_icon('warning', { class: 'text-blue-500' }) }}
+    </div>
+
+To configure a default class for all icons across your application see the `default configuration`_.
 
 Icon Sets
 ~~~~~~~~~
@@ -674,3 +696,4 @@ Learn more
 .. _`Tabler Icons`: https://github.com/tabler/tabler-icons
 .. _`Creating and Using Templates`: https://symfony.com/doc/current/templates.html
 .. _`How to manage CSS and JavaScript assets in Symfony applications`: https://symfony.com/doc/current/frontend.html
+.. _`default configuration`: https://symfony.com/bundles/ux-icons/current/index.html#full-configuration