@@ -155,20 +155,20 @@ HTML Syntax
155
155
~~~~~~~~~~~
156
156
157
157
In addition to the ``ux_icon() `` function explained in the previous sections,
158
- this package also supports an alternative HTML syntax based on the ``<twig:UX:Icon > ``
158
+ this package also supports an alternative HTML syntax based on the ``<twig:ux:icon > ``
159
159
tag:
160
160
161
161
.. code-block :: html
162
162
163
163
<!-- renders "user-profile.svg" -->
164
- <twig:UX:Icon name =" user-profile" class =" w-4 h-4" />
164
+ <twig:ux:icon name =" user-profile" class =" w-4 h-4" />
165
165
<!-- renders "admin/user-profile.svg" -->
166
- <twig:UX:Icon name =" admin:user-profile" class =" w-4 h-4" />
166
+ <twig:ux:icon name =" admin:user-profile" class =" w-4 h-4" />
167
167
<!-- renders 'user-solid.svg' icon from 'Flowbite' icon set via ux.symfony.com -->
168
- <twig:UX:Icon name =" flowbite:user-solid" />
168
+ <twig:ux:icon name =" flowbite:user-solid" />
169
169
170
170
<!-- you can also add any HTML attributes -->
171
- <twig:UX:Icon name =" user-profile" height =" 16" width =" 16" aria-hidden =" true" />
171
+ <twig:ux:icon name =" user-profile" height =" 16" width =" 16" aria-hidden =" true" />
172
172
173
173
.. note ::
174
174
@@ -288,16 +288,16 @@ HTML Syntax
288
288
289
289
.. code-block :: html+twig
290
290
291
- <twig:UX: Icon name="user-profile" />
291
+ <twig:ux: icon name="user-profile" />
292
292
293
293
{# Renders "user-profile.svg" #}
294
- <twig:UX: Icon name="user-profile" class="w-4 h-4" />
294
+ <twig:ux: icon name="user-profile" class="w-4 h-4" />
295
295
296
296
{# Renders "sub-dir/user-profile.svg" (sub-directory) #}
297
- <twig:UX: Icon name="sub-dir:user-profile" class="w-4 h-4" />
297
+ <twig:ux: icon name="sub-dir:user-profile" class="w-4 h-4" />
298
298
299
299
{# Renders "flowbite:user-solid" from ux.symfony.com #}
300
- <twig:UX: Icon name="flowbite:user-solid" />
300
+ <twig:ux: icon name="flowbite:user-solid" />
301
301
302
302
.. note ::
303
303
@@ -376,7 +376,7 @@ of the following attributes: ``aria-label``, ``aria-labelledby`` or ``title``.
376
376
377
377
.. code-block :: twig+html
378
378
379
- <twig:UX: Icon name="user-profile" aria-hidden="false" />
379
+ <twig:ux: icon name="user-profile" aria-hidden="false" />
380
380
381
381
382
382
Performance
@@ -408,7 +408,7 @@ In production, you can pre-warm the cache by running the following command:
408
408
$ php bin/console ux:icons:warm-cache
409
409
410
410
This command looks in all your Twig templates for ``ux_icon() `` calls and
411
- ``<twig:UX:Icon > `` tags and caches the icons it finds.
411
+ ``<twig:ux:icon > `` tags and caches the icons it finds.
412
412
413
413
.. caution ::
414
414
@@ -440,18 +440,18 @@ TwigComponent
440
440
~~~~~~~~~~~~~
441
441
442
442
The ``ux_icon() `` function is optimized to be as fast as possible. To deliver the
443
- same level of performance when using the HTML syntax (``<twig:UX:Icon name="..." /> ``),
443
+ same level of performance when using the HTML syntax (``<twig:ux:icon name="..." /> ``),
444
444
the TwigComponent overhead is reduced by calling the IconRenderer immediately and
445
445
returning the HTML output.
446
446
447
447
.. warning ::
448
448
449
- The <twig:UX: Icon > component does not support embedded content.
449
+ The <twig:ux: icon > component does not support embedded content.
450
450
451
451
.. code-block :: twig+html
452
452
453
453
{# The 🧸 will be ignore in the HTML output #}
454
- <twig:UX: Icon name="user-profile" class="w-4 h-4">🧸</twig:UX: Icon >
454
+ <twig:ux: icon name="user-profile" class="w-4 h-4">🧸</twig:ux: icon >
455
455
456
456
{# Renders "user-profile.svg" #}
457
457
<svg viewBox="0 0 24 24" class="w-4 h-4">
0 commit comments