[Icons] Introduce symfony/ux-icons

[kbond]

Q	A
Bug fix?	no
New feature?	yes
Issues	n/a
License	MIT

Documentation

TODO

• Remove symfony/dom-crawler dependency
• <twig:UX:Icon /> component
• More tests
• ux:icons:import command
• Icons on demand system
• Warmup only icons found in twig templates
• Symfony style docs

Future Scope/Ideas

• Improved cache system (similar to how say, validation metadata is cached)
• Deferred icons (to avoid inline rendering many of the exact same icons)
• Icon packs: instead of adding icons one by one, include an entire set (ie fontawesome)
• Suggest similar icon names on IconNotFoundException
• lint:icons command:
  • show licenses of all iconify icons
  • warn when using a dynamic icon name (as it cannot be warmed)
  • error for icons that cannot be found
• Ability to disable iconify in test environment (to avoid a bunch of http calls when running tests)

[kbond]

I've made the following cache changes:

1. Always use cache.system (no longer configurable)
2. Always warmup on cache:warmup/cache:clear (no longer configurable)

As Ryan pointed out, there's likely a better way to handle the cache. I'll dig into this but now, it shouldn't hold up a merge/initial release.

[smnandre]

I found the problem with Iconify... it removes attributes from the SVG tag, and insert them in a in the innerSVG.

Lucide icon (downloaded from website)

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity-square"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M17 12h-2l-2 5-2-10-2 5H7"/></svg>

Lucide icon (from repo)

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <rect width="18" height="18" x="3" y="3" rx="2" />
  <path d="M17 12h-2l-2 5-2-10-2 5H7" />
</svg>

Lucide icon (as SVG + CSS)

The idea beeing obviously to not repeat those attributes everywhere and set them globally, leading to small simple SVG files (more or less what Github does on this website)

Doc: https://lucide.dev/guide/packages/lucide-static

.lucide-icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

<svg  class="lucide-icon">
<rect width="18" height="18" x="3" y="3" rx="2" /><path d="M17 12h-2l-2 5-2-10-2 5H7"/>
</svg>

Much cooler, right ?

Iconify Icon (downloaded from website)

There is where the problem starts. Iconify added a tag where it moved root attributes to.

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M17 12h-2l-2 5l-2-10l-2 5H7"/></g></svg>

Much harder then to optimise things.

And the result is the same when provided from the API.

Problems

I see there multiple problems

• it generate twice the code needed
• it makes harder to set values globally (not every icon will come from Iconify)
• it hard-codes things in the innerSVG --something that need to be accessible easily via CSS, ideally on the root component
• it creates a version of the icon that will be different (in content and possibilities) of the original one

I'm pretty sure there are solutions to all those points, i am NOT suggesting we don't use this amazing service.. but we should address those

[smnandre]

• Always use cache.system (no longer configurable)

• Always warmup on cache:warmup/cache:clear (no longer configurable)

TwigBundle uses a dedicated directory

    private function addTwigOptions(ArrayNodeDefinition $rootNode): void
    {
        $rootNode
            ->fixXmlConfig('path')
            ->children()
                ->scalarNode('autoescape_service')->defaultNull()->end()
                ->scalarNode('autoescape_service_method')->defaultNull()->end()
                ->scalarNode('base_template_class')->example('Twig\Template')->cannotBeEmpty()->end()
                ->scalarNode('cache')->defaultValue('%kernel.cache_dir%/twig')->end()
                ->scalarNode('charset')->defaultValue('%kernel.charset%')->end()
                ->booleanNode('debug')->defaultValue('%kernel.debug%')->end()
                ->booleanNode('strict_variables')->defaultValue('%kernel.debug%')->end()
                

If the doc is right, the system cache does not seem the ideal place to store 3000 icons, especially if we generate one cache file per icon (two with tags?)

There are two pools that are always enabled by default. They are cache.app and cache.system. The system cache is used for things like annotations, serializer, and validation. The cache.app can be used in your code. You can configure which adapter (template) they use by using the app and system key like:

https://symfony.com/doc/current/cache.html#cache-app-system

[kbond]

If the doc is right, the system cache does not seem the ideal place to store 3000 icons, especially if we generate one cache file per icon (two with tags?)

Yes, I think this is the conclusion Ryan came to as well. I'm going to dig deeper into this.

[kbond]

Anyone know what's up with the CI failure on prefer-lowest? I'm seeing the same thing locally but I've never encountered this issue before. Fixed, I had to allow phpunit-bridge 6.3

[weaverryan]

Pretty happy with this :). That being said, it feels feature complete without a way for users to grab icons. Telling them to download them manually, I think, isn't good enough.

[weaverryan]

Love this so much ❤️

[weaverryan]

Congrats! And a huge, huge thanks to both you Kevin and Simon - can't wait to use this

[tacman]

So this is semi-live now, e.g. https://symfony.com/bundles/ux-icons/current/index.html

But the all-important link to get the icons codes is still broken: https://ux.symfony.com/icons

Any chance at least that link could work?

[smnandre]

This will be live soon :)

Until then, you can find the icons on iconify, as we use their search engine / api.

[seb-jean]

Hi,
Why is SVG on https://icon-sets.iconify.design/lucide/activity-square/ different from https://lucide.dev/icons/square-activity ?

https://icon-sets.iconify.design/lucide/activity-square/:

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M17 12h-2l-2 5l-2-10l-2 5H7"/></g></svg>

https://lucide.dev/icons/square-activity:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-activity"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M17 12h-2l-2 5-2-10-2 5H7"/></svg>

There is the <g> tag which is added on https://icon-sets.iconify.design/

[javiereguiluz]

@seb-jean thanks for reporting this ... but it's better that you create a new issue in the repo. This PR was already merged and the discussion is so long, that your comment will probably get lost. Thank you!

[smnandre]

Hello @seb-jean, could you open a new issue ? It's easier afterwards to follow the issues / what's open or not, etc :)

Update: what a timing @javiereguiluz 😸

[seb-jean]

Ok 😄 : #1677