symfony / ux

Symfony UX initiative: a JavaScript ecosystem for Symfony
https://ux.symfony.com/
MIT License
828 stars 299 forks source link

[Icons] UX Icon sizes #2223

Closed pfpro closed 1 hour ago

pfpro commented 5 days ago

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 commented 2 days ago

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 commented 1 hour ago

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
Capture d’écran 2024-10-05 à 22 45 20 Capture d’écran 2024-10-05 à 22 45 44

(and the import between 😅 )

Capture d’écran 2024-10-05 à 22 45 36

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

pfpro commented 5 minutes ago

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' ... ) }}