[Icons] UX Icon sizes

[pfpro]

I have a question about using the UX icons:

If I use the on-demand icons, I can set the desired height using
<twig:ux:icon name="clarity:car-solid" class="text-primary" style="height:100px" />

If I import the icons, I can only influence the size via the font-size:
<twig:ux:icon name="clarity:car-solid" class="text-primary" style="font-size:60px" />

Is this the desired behavior?

[javiereguiluz]

When importing the icons, you can also set the font size directly in the <svg> element:

<twig:ux:icon name="clarity:car-solid" class="text-primary" font-size="60px" /> 

[smnandre]

For a given icon there should be no difference between on-demand and imported icon... so it probably comes from the SVG file.

I just tested to be sure: left capture is "before" importing the icon, right capture after.

Before	After

(and the import between 😅 )

Closing here, feel free to reopen an issue if needed !

[pfpro]

Thank you for your feedback.
Does the behavior I mentioned perhaps only change when using the other syntax? I'll try that out tomorrow.

<twig:ux:icon name="clarity:car-solid" class="text-primary" font-size="60px" />
vs
{{ ux_icon('clarity:car-solid' ... ) }}

[smnandre]

I doubt it, as they should be strictly equivalent (the first one is transformed into the second one during Twig compilation).

Could you post here the generated HTML/SVG for both cases ?

[luigif]

Let's say we have a template with the following icon:

{{ ux_icon('tabler:car', {style:'width:100px;'}) }}

if the icon is not imported it is rendered as:

<svg viewBox="0 0 24 24" fill="currentColor" style="width:100px;" aria-hidden="true"> <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M5 17a2 2 0 1 0 4 0a2 2 0 1 0-4 0m10 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0"></path> <path d="M5 17H3v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0H9m-6-6h15m-6 0V6"></path> </g> </svg>

while if it is imported it is rendered with added width and height as:

<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" style="width:100px;" aria-hidden="true"> <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M5 17a2 2 0 1 0 4 0a2 2 0 1 0-4 0m10 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0"></path> <path d="M5 17H3v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0H9m-6-6h15m-6 0V6"></path> </g> </svg>

So our custom width is not working anymore, but a font-size will resize the icon anyway.

[smnandre]

Ok I understand the issue. We do not use the same api endpoint for "on-demand" loading and for commands.

For "import" or "lock" we fetch the full SVG code, and do not trim attributes from the SVG,
For the on-demand system we only keep the innerSVG and then add only the xmlns and viewbox attribute

Moreover, the two endpoints do not return the same thing (width=1em height=1em for the commands, width=24 height=24 for the on-demand)

We can easily fix this (adding one parameter to the endpoint query) BUT ... this will then change the behaviour for current users

Or do we consider "imported icons" are already commited, but then "lock" would still be problematic, right ?

cc @kbond