From ec11c9c57564ba7421bfb17a5baadc6c9c604c13 Mon Sep 17 00:00:00 2001
From: David Buchmann <david.buchmann@liip.ch>
Date: Sun, 30 Mar 2025 17:23:13 +0200
Subject: [PATCH] [Icons] explain svg size
---
src/Icons/doc/index.rst | 17 +++++++++++++++++
1 file changed, 17 insertions(+)
diff --git a/src/Icons/doc/index.rst b/src/Icons/doc/index.rst
index a20222fd244..30ddd8f6599 100644
--- a/src/Icons/doc/index.rst
+++ b/src/Icons/doc/index.rst
@@ -83,6 +83,21 @@ define the HTML attributes added to the ``<svg>`` element:
{{ ux_icon('user-profile', {height: '16px', width: '16px', 'aria-hidden': true}) }}
{# renders <svg height="16" width="16" aria-hidden="true"> ... </svg> #}
+.. note::
+
+ Without size instructions, ``<svg>`` elements will be dynamically sized by the browser.
+ For icons, we therefore recommend to explicitly set the size. This can be done with a
+ CSS class or a height attribute in pixels, with variables of your CSS framework or using
+ ``em`` to set the size in relation to the font size of the current element.
+
+ Note that it is enough to specify the height, the width will be adjusted accordingly:
+
+ .. code-block:: twig
+
+ {{ ux_icon('user-profile', {style: 'height: 1em;'}) }}
+
+ For a consistent look, you might want to set the size through a
+ :ref:`default attribute <icons_default_attributes>`.
Icon Sets
~~~~~~~~~
@@ -313,6 +328,8 @@ HTML Syntax
``symfony/ux-twig-component`` is required to use the HTML syntax.
+.. _icons_default_attributes:
+
Default Attributes
~~~~~~~~~~~~~~~~~~