Skip to content

Commit 7cb2a5b

Browse files
committed
minor #2670 [Docs] Explain Icons SVG size (dbu)
This PR was merged into the 2.x branch. Discussion ---------- [Docs] Explain Icons SVG size | Q | A | ------------- | --- | Bug fix? | no | New feature? | no | Docs? | yes | Issues | - | License | MIT better explain that icons need their size specified, and explain how to do that. Commits ------- 3307dc4 [Docs] Explain Icons SVG size
2 parents ae07fdc + 3307dc4 commit 7cb2a5b

File tree

1 file changed

+35
-1
lines changed

1 file changed

+35
-1
lines changed

src/Icons/doc/index.rst

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ Installation
1717
$ composer require symfony/ux-icons
1818
1919
# To use provided on-demand icon sets, you also need HTTP client:
20-
$ composer require symfony/http-client
20+
$ composer require symfony/http-client
2121
2222
SVG Icons
2323
---------
@@ -77,6 +77,38 @@ define the HTML attributes added to the ``<svg>`` element:
7777
{{ ux_icon('user-profile', {height: '16px', width: '16px', 'aria-hidden': true}) }}
7878
{# renders <svg height="16" width="16" aria-hidden="true"> ... </svg> #}
7979

80+
Icon Sizes
81+
~~~~~~~~~~
82+
83+
.. note::
84+
85+
``<svg>`` elements will be dynamically sized by the browser.
86+
For icons, we therefore recommend to explicitly set the size.
87+
88+
To align icons naturally with surrounding text and inherit font sizing, use ``em``
89+
units. This works well for buttons, links, or inline text. Defining the height alone
90+
is sufficient—the width will scale proportionally:
91+
92+
.. code-block:: html+twig
93+
94+
{# Twig function #}
95+
{{ ux_icon('user-profile', {style: 'height: 1em;'}) }}
96+
97+
{# HTML syntax #}
98+
<twig:ux:icon name="profile" style="height: 1em;" />
99+
100+
If your project uses a CSS framework like Tailwind or Bootstrap, prefer their
101+
sizing utilities for consistency and theming:
102+
103+
.. code-block:: html+twig
104+
105+
{# Twig function #}
106+
{{ ux_icon('bi:chat', {class: 'size-4'}) }}
107+
108+
{# HTML syntax #}
109+
<twig:ux:icon name="bi:chat" class="size-4" />
110+
111+
To keep your design consistent and easily adjustable, consider defining a :ref:default attribute <icons_default_attributes>. This allows you to control the size of all your icons from a single place.
80112

81113
Icon Sets
82114
~~~~~~~~~
@@ -328,6 +360,8 @@ HTML Syntax
328360

329361
``symfony/ux-twig-component`` is required to use the HTML syntax.
330362

363+
.. _icons_default_attributes:
364+
331365
Default Attributes
332366
~~~~~~~~~~~~~~~~~~
333367

0 commit comments

Comments
 (0)