@@ -112,22 +112,31 @@ the size of all your icons from a single place.
112112Icon Color
113113~~~~~~~~~~
114114
115- By default, SVG icons rendered by UX Icons use ``fill="currentColor" ``.
116- You can change the icon color in several ways:
115+ UX Icons renders SVG icons with fill="currentColor" (see the `default configuration `_).
117116
118- You can use the CSS color property to modify your icon through a CSS class.
117+ This means icons take their color from the CSS color property, which by default is inherited from the text color of
118+ the parent element.
119119
120- .. code-block :: twig
120+ .. code-block :: html+ twig
121121
122- {{ ux_icon('user-profile', {class: 'my_class'}) }}
122+ <a href="#" class="text-blue-500">
123+ {# icon color: blue #}
124+ {{ ux_icon('bi:star') }}
125+ </a>
123126
124- Or you can just as easily use the color attribute.
127+ You can set the icon’s color using CSS classes, either on the parent container or directly on the icon:
125128
126- .. code-block :: twig
129+ .. code-block :: html+twig
130+
131+ <div class="text-red-500">
132+ {# Inherit color from container (red) #}
133+ {{ ux_icon('warning') }}
127134
128- {{ ux_icon('user-profile', {color: 'red'}) }}
135+ {# Override parent with CSS class (blue) #}
136+ {{ ux_icon('warning', { class: 'text-blue-500' }) }}
137+ </div>
129138
130- Both will indirectly apply a potential value for currentColor .
139+ To configure a default class for all icons across your application see the ` default configuration `_ .
131140
132141Icon Sets
133142~~~~~~~~~
@@ -687,3 +696,4 @@ Learn more
687696.. _`Tabler Icons` : https://github.com/tabler/tabler-icons
688697.. _`Creating and Using Templates` : https://symfony.com/doc/current/templates.html
689698.. _`How to manage CSS and JavaScript assets in Symfony applications` : https://symfony.com/doc/current/frontend.html
699+ .. _`default configuration` : https://symfony.com/bundles/ux-icons/current/index.html#full-configuration
0 commit comments