brainstorming about ux_icons for javascript

[tacman]

There are a few libraries that make tools normally available in twig also available in javascript. Some that come to mind:

• FosJsRouting -- generate paths from the route name and parameters
• BazingaJsTranslationBundle -- call a trans function in javascript to translate a string

I'd like to be able to call ux_icon in javascript to render the svg. Like the two examples above, this would require dumping a map (in json or js) that is loaded (possibly via 'import') and then a call to the function would return the svg (without the fancy automatic lookup).

Use case: a stimulus controller that needs to update a status based on a json response.

Currently I create a lookup table in twig, then pass it to the stimulus controller:

    {% set appIcons = {
        region: ux_icon('bi:geo-alt'),
        cul: ux_icon('game-icons:luchador'),
        mat: ux_icon('et:hazardous'),
        ubi: ux_icon('carbon:location'),  
   %}

Since in this particular case, the rendering happens in javacript, not twig, I can render the icon based on the map, but it requires passing this array in as a big object.

I'm envisioning something like

bin/console ux:icons:dump --format=js --target=public/js/icons.js --callback="export default"

and then icons.js would contain the map

export default ({
    "carbon:location": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M26 16a3.96 3.96 0 0 0-2.02.566l-2.859-2.859l2.293-2.293a2 2 0 0 0 0-2.828l-6-6a2 2 0 0 0-2.828 0l-6 6a2 2 0 0 0 0 2.828l2.293 2.293l-2.859 2.859a4.043 4.043 0 1 0 1.414 1.414l2.859-2.859l2.293 2.293a2 2 0 0 0 .414.31V22h-3v8h8v-8h-3v-4.277a2 2 0 0 0 .414-.309l2.293-2.293l2.859 2.859A3.989 3.989 0 1 0 26 16M8 20a2 2 0 1 1-2-2a2 2 0 0 1 2 2m10 4v4h-4v-4zm-2-8l-6-6l6-6l6 6Zm10 6a2 2 0 1 1 2-2a2 2 0 0 1-2 2"/></svg>'

Perhaps there's a better way? My skills with creating javascript libraries are limited, I mostly use stimulus when I need something like this.

[Kocal]

That's an interesting idea!

If you use a bundler system like Webpack Encore or Vite, you can directly import the icon by using import or require, but it does not offers customization like ux_icon/<twig:UX:Icon> can provide (ex: dimensions or other attributes).

If you use a the AssetMapper, I'm not super fan about dumping icons into a file since... they are already files and I believe they can be accessed through import and the importmap (to confirm). But by doing things like that, will be an equivalent to <img src="...">, icon inlining would not be possible... so maybe we can provide a JS function/method yes!

Let's wait for other suggestions :)

[tacman]

Yeah, a ux_icon javascript function should accept the same parameters as the twig function, when possible. certainly class, width and height. Or can those things go in a div or span that surrounds the svg?

[smnandre]

For javascript i think the Iconify packages would be more suited no ?

[tacman]

No, as I want to cache them locally.