[Icons] Allow to customize the stroke width

[javiereguiluz]

Some icons (e.g. tabler:) include a hardcoded stroke width:

<svg width="1em" height="1em" viewBox="0 0 24 24" ...>
    <path stroke-width="2" ... />
</svg>

Sometimes, e.g. when using big icons, you want to change that stroke to a smaller value for aesthetic reasons.

Right now I define this CSS class to change the stroke as needed:

svg.icon-stroke-1-5,
svg.icon-stroke-1-5 g {
    stroke-width: 1.5;
}

I wonder if it would possible to make the stroke configurable for UX icons. Maybe it's not because not all icon sets define a stroke width to begin with. Thanks!

[smnandre]

What happens here

Iconify make some normalization on the SVG icons to offer a unified format for the icons.

This does not happen on all icon sets (it does on the ones i use the most -- lucide ❤️ -- so i understand your need very much)

It sometimes add them on the first svg shape... but sometimes it groups the differents shapes in a group and does it only once.

Examples:

lucide:circle

<svg viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" fill="none" 
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</svg>

tabler:circle

<svg  viewBox="0 0 24 24">
<path fill="none"  d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0"
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</svg>

But it does no on some others like prime or material design.

prime:circle

<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M12  <!-- ... --> 4.5"/>
</svg>

mdi:circle

<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M12 <!-- ... -->  2"/>
</svg>

What we cannot do

We cannot simply remove them inconditionnaly, as we have no idea what has been added here by iconify, what is meant to be in the code, etc etc.

And this would break render on many websites

What we can do

Currently you can configure attributes you want to define on the root SVG tag.

I think we can add some configuration entry to define the ones you'd want to filter out from the SVG code.

To me, with lucide icons, that would look something like this :

# config/packages/ux_icons.yaml
ux_icons:

   # ... 

       lucide:
           filter_attributes:
                - stroke
                - stroke-linecap
                - stroke-linejoin
                - stroke-width
                
               # and maybe later
               - stroke-*               

That way i can reduce a lot the SVG size in the HTML, and define my defaults once in CSS.

.icon {
   color: currentColor;
   stroke-width: 1.5;
   stroke-linecap: round;
   stroke-linejoin: round;
}

or more probably, to ease special cases

.icon {
   color: var(--icon-color, currentColor);
   stroke-width: var(--icon-width, 1.5);
   stroke-linecap: round;
   stroke-linejoin: round;   
}

Would such a system works for you @javiereguiluz ?

[javiereguiluz]

@smnandre sorry I didn't reply to your excellent comment. Yes, I like your idea and I also think ti's the only one that can work for all folks. Thank you!

[smnandre]

Wow i'm pretty sure i never saw this answer.... and if i did i'm very sorry.

Was thinking about it earlier today and wondered... this is only for remote files, right ?

[kbond]

I was also thinking I maybe shouldn't have included fill: currentColor as the default under default_icon_attributes. This should have gone in the recipe.