[Icons] Configure icon sets: path, alias & icon attributes

[smnandre]

Q	A
Bug fix?	no
New feature?	yes
Issues	Fix #
License	MIT

I'm opening now if you guys have feedback, and i will add more tests the next couple days

Note

This PR brings 3 new features: iconset aliases, custom path and attributes. So let's focus on that 😄

ux_icons:
    icon_dir: '%kernel.project_dir%/assets/icons'

    # Default icon set
    default_icon_attributes:
        class: 'icon'
        fill: 'currentColor'
        width: '24'
        height: '24'

    icon_sets:
        # Local icon set    (prefix mapped to a local directory)
        flags:
            path: '%kernel.project_dir%/assets/images/flags'

        # Remote icon set   (prefix mapped to an icon set identifier)
        lu:
            alias: 'lucide'

        # Icon set configuration (work for local/remote)
        oc:
            icon_attributes:
                class: 'oc-icon'       # Replace the default class
                stroke: 'none'      # Add a new attribute
                fill: false         # Use "false" to remove a default attribute

Default attributes

<twig:ux:icon name="anything" />

{# Renders #}
<svg class="icon" fill="currentColor" width="24" height="24"> ... </svg>

Icon set configuration

Local icons: path

<twig:ux:icon name="flags:fr" />

{# Renders:  #}
<svg class="icon" fill="currentColor" width="24" height="24">
    <!-- file assets/images/flags/fr.svg -->
</svg>

Remote icons: alias

<twig:ux:icon name="lu:circle-check" />

{# Renders:  #}
<svg class="icon" fill="currentColor" width="24" height="24">
    <!-- file lucide:circle-check.svg from iconify -->
</svg>

Icon set attributes

<twig:ux:icon name="oc:check" />

{# Renders:  #}
{# Attributes are merged into the default attributes #}
<svg class="oc-icon" stroke="none" width="24" height="24">
    <!-- file oc:check.svg from local or remote -->
</svg>

[javiereguiluz]

Merged! Thanks a lot Simon

[seb-jean]

I tried but I can't get the expected result.
How to differentiate the attributes of these 4 subdirectories:

• assets/icons/heroicons/24/outline
• assets/icons/heroicons/24/solid
• assets/icons/heroicons/20/solid
• assets/icons/heroicons/16/solid

I tried the following code:

ux_icons:
    icon_sets:
        heroicons:20:solid:
            icon_attributes:
                fill: 'currentColor'
                aria-hidden: true
                data-slot: 'icon'

[smnandre]

So i'm pretty sure this would not work, but just to signal "heroicons:20:solid" should be enquoted in yaml ;)

[smnandre]

Then i'm pretty sure heroicons:20:solid is not a icon set prefix (at least not an remote one), right ?

[seb-jean]

Yes, icon set prefix is heroicons.

[seb-jean]

Could this work with subdirectories then? :)

[seb-jean]

I think it's because I put : in the name and suddenly it's blocked.

[seb-jean]

I did it like this and it works:

# config/packages/ux_icons.yaml
ux_icons:
    default_icon_attributes: []
    icon_sets:
        heroicons-20-solid:
            path: '%kernel.project_dir%/assets/icons/heroicons/20/solid'
            icon_attributes:
                fill: 'currentColor'
                data-slot: 'icon'

<twig:ux:icon name="heroicons-20-solid:cake" class="h-5 w-5 text-gray-400" />

[smnandre]

Nice! I was not 100% sure it would :))