Skip to content

[Icons] Use lowercase <twig:ux:icon /> in documentation #1798

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 30, 2024
Merged

[Icons] Use lowercase <twig:ux:icon /> in documentation #1798

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/Icons/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Renders local and remote [SVG icons](https://ux.symfony.com/icons) in your Twig
{{ ux_icon('mdi:check', {class: 'w-4 h-4'}) }}

{# .. or Twig Component #}
<twig:UX:Icon name="mdi:check" class="w-4 h-4" />
<twig:ux:icon name="mdi:check" class="w-4 h-4" />

{# Render the "check" icon from "mdi" pack with class #}
<svg viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
Expand Down
28 changes: 14 additions & 14 deletions src/Icons/doc/index.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,20 +155,20 @@ HTML Syntax
~~~~~~~~~~~

In addition to the ``ux_icon()`` function explained in the previous sections,
this package also supports an alternative HTML syntax based on the ``<twig:UX:Icon>``
this package also supports an alternative HTML syntax based on the ``<twig:ux:icon>``
tag:

.. code-block:: html

<!-- renders "user-profile.svg" -->
<twig:UX:Icon name="user-profile" class="w-4 h-4" />
<twig:ux:icon name="user-profile" class="w-4 h-4" />
<!-- renders "admin/user-profile.svg" -->
<twig:UX:Icon name="admin:user-profile" class="w-4 h-4" />
<twig:ux:icon name="admin:user-profile" class="w-4 h-4" />
<!-- renders 'user-solid.svg' icon from 'Flowbite' icon set via ux.symfony.com -->
<twig:UX:Icon name="flowbite:user-solid" />
<twig:ux:icon name="flowbite:user-solid" />

<!-- you can also add any HTML attributes -->
<twig:UX:Icon name="user-profile" height="16" width="16" aria-hidden="true" />
<twig:ux:icon name="user-profile" height="16" width="16" aria-hidden="true" />

.. note::

Expand Down Expand Up @@ -288,16 +288,16 @@ HTML Syntax

.. code-block:: html+twig

<twig:UX:Icon name="user-profile" />
<twig:ux:icon name="user-profile" />

{# Renders "user-profile.svg" #}
<twig:UX:Icon name="user-profile" class="w-4 h-4" />
<twig:ux:icon name="user-profile" class="w-4 h-4" />

{# Renders "sub-dir/user-profile.svg" (sub-directory) #}
<twig:UX:Icon name="sub-dir:user-profile" class="w-4 h-4" />
<twig:ux:icon name="sub-dir:user-profile" class="w-4 h-4" />

{# Renders "flowbite:user-solid" from ux.symfony.com #}
<twig:UX:Icon name="flowbite:user-solid" />
<twig:ux:icon name="flowbite:user-solid" />

.. note::

Expand Down Expand Up @@ -376,7 +376,7 @@ of the following attributes: ``aria-label``, ``aria-labelledby`` or ``title``.

.. code-block:: twig+html

<twig:UX:Icon name="user-profile" aria-hidden="false" />
<twig:ux:icon name="user-profile" aria-hidden="false" />


Performance
Expand Down Expand Up @@ -408,7 +408,7 @@ In production, you can pre-warm the cache by running the following command:
$ php bin/console ux:icons:warm-cache

This command looks in all your Twig templates for ``ux_icon()`` calls and
``<twig:UX:Icon>`` tags and caches the icons it finds.
``<twig:ux:icon>`` tags and caches the icons it finds.

.. caution::

Expand Down Expand Up @@ -440,18 +440,18 @@ TwigComponent
~~~~~~~~~~~~~

The ``ux_icon()`` function is optimized to be as fast as possible. To deliver the
same level of performance when using the HTML syntax (``<twig:UX:Icon name="..." />``),
same level of performance when using the HTML syntax (``<twig:ux:icon name="..." />``),
the TwigComponent overhead is reduced by calling the IconRenderer immediately and
returning the HTML output.

.. warning::

The <twig:UX:Icon> component does not support embedded content.
The <twig:ux:icon> component does not support embedded content.

.. code-block:: twig+html

{# The 🧸 will be ignore in the HTML output #}
<twig:UX:Icon name="user-profile" class="w-4 h-4">🧸</twig:UX:Icon>
<twig:ux:icon name="user-profile" class="w-4 h-4">🧸</twig:ux:icon>

{# Renders "user-profile.svg" #}
<svg viewBox="0 0 24 24" class="w-4 h-4">
Expand Down