Closed stramel closed 1 year ago
That's normal behaviour.
Iconify is designed to work with any icon set and any framework. To make that work, svg
tag doesn't have any default values, such as fill
or stroke-width
or whatever else is used, those attributes are moved down to shapes that use them (or assigned to g
element that groups all child elements if there is more than one shape).
To change stroke-width
, don't target svg
element, target elements inside svg
:
svg [stroke-width="2"] {
stroke-width: 1;
}
@cyberalien I would agree however that's not how these icons were designed. To state that "Iconify is designed to work with any icon set" but not support the icon set as it was designed would indicate that it doesn't work with any icon set.
Using the Tabler icons directly with setting stroke-width
on the svg
tag works but doesn't in the Iconify since stroke-width
has been shifted down to the path
.
Doesn't matter how those icons were designed. There are hundreds of icon sets, each one was designed in its own specific way.
Some will tell you to use fill
to change color. Some use currentColor
, so they use text color. Some use stroke
. Would you use icon set specific way to change color? No, with Iconify all icons are changed to use currentColor
, so you can change color for any icon in consistent way.
Same with stroke-width
. If icon is using stroke-width
, target shapes that have stroke-width
attribute. Doesn't matter what icon set icon is from, code is the same for every icon set that uses stroke-width
.
By using stroke-width
on svg
element, as suggested in Tabler docs, you cannot target shapes inside icon. What if another icon uses stroke-width
on actual shape that draws it, such as on path
tag? Your code won't work for that icon.
By removing all extra attribute from svg
element, with Iconify you can work with all icons in exactly the same way, regardless of icon set. So if icon set stroke-width
, you target shapes that use it, not svg
element. It might be set on group element to avoid duplication, but stylesheet is still the same, targeting elements inside svg
, not svg
element.
With Iconify:
svg { color: red; }
, not fill
, not stroke
.svg [stroke-width="2"] { stroke-width: 1.5 }
, works with all icons that have that use shapes with stroke width, regardless of icon set.
When using icon from the
Tabler
collection, they don't respect settingstroke-width
on thesvg
tag. This is a functionality that works on the actualTabler
icon set.Here is the documentation stating to use
stroke-width
on thesvg
to change the width. https://github.com/tabler/tabler-icons#inline-htmlHere is a CodePen demonstrating the incorrect functionality on Iconify's Icons. CodePen