From 1460cd2e2d1bbe2f3c36ee7c3956e5a501a11dd0 Mon Sep 17 00:00:00 2001 From: Thomas Landauer Date: Thu, 29 May 2025 14:19:28 +0200 Subject: [PATCH 1/3] [Icons] Docs: Cleanup of symfony/ux-twig-component --- src/Icons/doc/index.rst | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Icons/doc/index.rst b/src/Icons/doc/index.rst index 44167cb706d..c96d2bd6f96 100644 --- a/src/Icons/doc/index.rst +++ b/src/Icons/doc/index.rst @@ -175,7 +175,7 @@ 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 ```` -tag if the ``symfony/ux-twig-component`` package is installed: +tag: .. code-block:: html @@ -192,7 +192,11 @@ tag if the ``symfony/ux-twig-component`` package is installed: .. tip:: To use the HTML syntax, the ``symfony/ux-twig-component`` package must be - installed in your project. + installed in your project: + + .. code-block:: terminal + + $ composer require symfony/ux-twig-component Downloading Icons ----------------- @@ -330,10 +334,6 @@ HTML Syntax {# Renders "flowbite:user-solid" from ux.symfony.com #} -.. note:: - - ``symfony/ux-twig-component`` is required to use the HTML syntax. - Default Attributes ~~~~~~~~~~~~~~~~~~ From 8f4ff4de8c66ce0d87d4c17c580e9da02262b2d7 Mon Sep 17 00:00:00 2001 From: Thomas Landauer Date: Thu, 29 May 2025 14:45:14 +0200 Subject: [PATCH 2/3] Update index.rst --- src/Icons/doc/index.rst | 105 +++++++++------------------------------- 1 file changed, 23 insertions(+), 82 deletions(-) diff --git a/src/Icons/doc/index.rst b/src/Icons/doc/index.rst index c96d2bd6f96..ba7ce90ec7d 100644 --- a/src/Icons/doc/index.rst +++ b/src/Icons/doc/index.rst @@ -59,29 +59,37 @@ refers to the icons located in the ``header`` directory. Loading Icons ------------- +To include an icon in your template, two syntaxes are available. + +.. tip:: + + To use the HTML syntax, you need the ``symfony/ux-twig-component`` package: + + .. code-block:: terminal + + $ composer require symfony/ux-twig-component + + .. code-block:: twig - {# includes the contents of the 'assets/icons/user-profile.svg' file in the template #} + {# Includes the contents of 'assets/icons/user-profile.svg' in the template: #} {{ ux_icon('user-profile') }} + {# Same in alternative HTML syntax: #} + - {# icons stored in subdirectories must use the 'subdirectory_name:file_name' syntax - (e.g. this includes 'assets/icons/admin/user-profile.svg') #} + {# Includes 'assets/icons/admin/user-profile.svg': #} {{ ux_icon('admin:user-profile') }} + - {# this downloads the 'user-solid.svg' icon from the 'Flowbite' icon set via ux.symfony.com - and embeds the downloaded SVG contents in the template #} - {{ ux_icon('flowbite:user-solid') }} - -The ``ux_icon()`` function defines a second optional argument where you can -define the HTML attributes added to the ```` element: - -.. code-block:: html+twig + {# Adding a CSS class or other attribute to the `` element: #} + {{ ux_icon('user-profile', {class: 'w-4', 'aria-hidden': 'true' }) }} + - {{ ux_icon('user-profile', {class: 'w-4 h-4'}) }} - {# renders ... #} + {# Download the 'user-solid.svg' icon from the 'Flowbite' icon set via ux.symfony.com: #} + {{ ux_icon('flowbite:user-solid') }} + - {{ ux_icon('user-profile', {height: '16px', width: '16px', 'aria-hidden': true}) }} - {# renders #} +You can set default attributes for all icons in your `Configuration`_. Icon Sets @@ -170,34 +178,6 @@ icons in the "Tabler Icons" set, use the following command: Page 1/3. Continue? (yes/no) [yes]: > -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 ```` -tag: - -.. code-block:: html - - - - - - - - - - - -.. tip:: - - To use the HTML syntax, the ``symfony/ux-twig-component`` package must be - installed in your project: - - .. code-block:: terminal - - $ composer require symfony/ux-twig-component - Downloading Icons ----------------- @@ -318,45 +298,6 @@ Rendering Icons and embeds the downloaded SVG contents in the template #} {{ ux_icon('flowbite:user-solid') }} -HTML Syntax -~~~~~~~~~~~ - -.. code-block:: html+twig - - - - {# Renders "user-profile.svg" #} - - - {# Renders "sub-dir/user-profile.svg" (sub-directory) #} - - - {# Renders "flowbite:user-solid" from ux.symfony.com #} - - -Default Attributes -~~~~~~~~~~~~~~~~~~ - -You can set default attributes for all icons in your configuration. These attributes will be -added to all icons unless overridden by the second argument of the ``ux_icon`` function. - -.. code-block:: yaml - - # config/packages/ux_icons.yaml - ux_icons: - default_icon_attributes: - fill: currentColor - -Now, all icons will have the ``fill`` attribute set to ``currentColor`` by default. - -.. code-block:: twig - - # renders "user-profile.svg" with fill="currentColor" - {{ ux_icon('user-profile') }} - - # renders "user-profile.svg" with fill="red" - {{ ux_icon('user-profile', {fill: 'red'}) }} - Icon Aliases ~~~~~~~~~~~~ From b954ff73a6a48e2898a1310a6ea30d1e2395837b Mon Sep 17 00:00:00 2001 From: Thomas Landauer Date: Thu, 29 May 2025 14:56:21 +0200 Subject: [PATCH 3/3] Update index.rst --- src/Icons/doc/index.rst | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Icons/doc/index.rst b/src/Icons/doc/index.rst index ba7ce90ec7d..693d405f69f 100644 --- a/src/Icons/doc/index.rst +++ b/src/Icons/doc/index.rst @@ -70,7 +70,7 @@ To include an icon in your template, two syntaxes are available. $ composer require symfony/ux-twig-component -.. code-block:: twig +.. code-block:: html+twig {# Includes the contents of 'assets/icons/user-profile.svg' in the template: #} {{ ux_icon('user-profile') }}