[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 ?