### Install UX Icons Package Source: https://github.com/symfony/ux-icons/blob/2.x/doc/index.rst Installs the symfony/ux-icons package using Composer. This is the first step to start using the package in your Symfony application. ```bash composer require symfony/ux-icons ``` -------------------------------- ### Install UX Twig Component Source: https://github.com/symfony/ux-icons/blob/2.x/doc/index.rst Shows the Composer command to install the 'symfony/ux-twig-component' package, which is a prerequisite for using the HTML-based syntax for icons. ```bash composer require symfony/ux-twig-component ``` -------------------------------- ### Install HTTP Client for Remote Icons Source: https://github.com/symfony/ux-icons/blob/2.x/doc/index.rst Installs the symfony/http-client package, which is required for the UX Icons package to automatically download icons from remote sources. ```bash composer require symfony/http-client ``` -------------------------------- ### Render Remote SVG Icon Source: https://github.com/symfony/ux-icons/blob/2.x/doc/index.rst Downloads and renders an SVG icon from a remote source (ux.symfony.com in this example). This requires the http-client package to be installed. ```twig {# 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') }} ``` -------------------------------- ### Search Icon Sets with Console Command Source: https://github.com/symfony/ux-icons/blob/2.x/doc/index.rst Demonstrates how to use the 'ux:icons:search' console command to find icon sets or retrieve the prefix for a specific icon set. It shows examples of searching for a set and searching for icons within a set. ```terminal php bin/console ux:icons:search tabler ``` ```terminal php bin/console ux:icons:search tabler arrow ``` -------------------------------- ### Render Icons in Twig (Symfony) Source: https://github.com/symfony/ux-icons/blob/2.x/doc/index.rst Examples of rendering icons within Twig templates. Shows how to render local icons by name, icons in subdirectories using a 'subdirectory:file' syntax, and on-demand icons fetched from a remote source. ```twig {# includes the contents of the 'assets/icons/user-profile.svg' file in the template #} {{ ux_icon('user-profile') }} ``` ```twig {# icons stored in subdirectories must use the 'subdirectory_name:file_name' syntax (e.g. this includes 'assets/icons/admin/user-profile.svg') #} {{ ux_icon('admin:user-profile') }} ``` ```twig {# 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') }} ``` -------------------------------- ### Configure Default Icon Attributes (Symfony YAML) Source: https://github.com/symfony/ux-icons/blob/2.x/doc/index.rst Example of setting default attributes for all icons in the Symfony configuration. These attributes are applied unless overridden by specific icon rendering calls. The example sets the 'fill' attribute to 'currentColor'. ```yaml # config/packages/ux_icons.yaml ux_icons: default_icon_attributes: fill: currentColor ``` -------------------------------- ### Define Icon Aliases (Symfony YAML) Source: https://github.com/symfony/ux-icons/blob/2.x/doc/index.rst Demonstrates how to define custom aliases for icons in the Symfony configuration. Aliases provide shortcuts for frequently used icons, simplifying their usage in templates. The example maps 'dots' to 'clarity:ellipsis-horizontal-line'. ```yaml # config/packages/ux_icons.yaml ux_icons: # ... aliases: dots: 'clarity:ellipsis-horizontal-line' ``` -------------------------------- ### Non-Cachable Dynamic Icon Name Source: https://github.com/symfony/ux-icons/blob/2.x/doc/index.rst Shows an example of a dynamically generated icon name in Twig which will not be cached. ```twig {{ ux_icon('flag-' ~ locale) }} ``` -------------------------------- ### Twig:ux:icon Unsupported Embedded Content Source: https://github.com/symfony/ux-icons/blob/2.x/doc/index.rst Highlights that the `` component does not support embedded content, showing an example where the embedded content is ignored. ```html+twig 🧸 {# Renders "user-profile.svg" #} ``` -------------------------------- ### Disabling aria-hidden in Twig Source: https://github.com/symfony/ux-icons/blob/2.x/doc/index.rst Provides an example of how to explicitly disable the automatic `aria-hidden="true"` attribute for a `twig:ux:icon` component by setting `aria-hidden="false"`. ```html+twig ``` -------------------------------- ### Verbose Cache Warming Command Source: https://github.com/symfony/ux-icons/blob/2.x/doc/index.rst Demonstrates how to run the cache warming command with the verbose flag (`-v`) to identify potential false positives in icon detection. ```bash $ php bin/console ux:icons:warm-cache -v ``` -------------------------------- ### Render Icons with HTML Twig Syntax (Symfony) Source: https://github.com/symfony/ux-icons/blob/2.x/doc/index.rst Demonstrates rendering icons using HTML-like Twig syntax, including specifying icon names, adding CSS classes, handling icons in subdirectories, and fetching remote icons. Requires 'symfony/ux-twig-component'. ```html+twig ``` ```html+twig {# Renders "user-profile.svg" #} ``` ```html+twig {# Renders "sub-dir/user-profile.svg" (sub-directory) #} ``` ```html+twig {# Renders "flowbite:user-solid" from ux.symfony.com #} ``` -------------------------------- ### Debug Symfony Configuration (CLI) Source: https://github.com/symfony/ux-icons/blob/2.x/doc/index.rst These commands help in debugging the UX Icons configuration within your Symfony application. One command shows the default configuration values, while the other displays the active configuration being used. ```bash # Displays the default config values $ php bin/console config:dump-reference ux_icons ``` ```bash # Displays the actual config values used by your application $ php bin/console debug:config ux_icons ``` -------------------------------- ### HTML Syntax for Icons Source: https://github.com/symfony/ux-icons/blob/2.x/doc/index.rst Provides the HTML-based syntax for including icons in Twig templates. It requires the 'symfony/ux-twig-component' package and shows how to render icons by name, including those from different icon sets and with custom attributes. ```html ``` ```html ``` ```html ``` ```html