search

iconify / icon-sets

150+ open source icon sets. Icons are validated, cleaned up, optimised, ready to render as SVG. Updated automatically 3 times a week.
https://icon-sets.iconify.design/
564 stars 54 forks source link

default for context-fill instead of currentColor #100

Closed dokax closed 7 months ago

dokax commented 7 months ago

currentColor does't has effect when i use icon in css, i have to change the value to context-fill everytime i download an icon. and the icon size is 1em if you didn't set a size, i mean if the icon default size is 20px, then i should get 20px icon if i didn't set the size.

cyberalien commented 7 months ago

Default size is set to 1em for few reasons:

Many icons are not designed with small size, they are designed at something like 512px grid, expecting to be downscaled 16 or 32 (then what value would you expect it to use: 16 or 32 ?). Some bad icon sets (mostly ones designed to work as icon fonts) aren't even designed for any specific grid in mind, having seemingly random height.

Then when icons are used, it would be nice if icons just worked regardless of which icon set it is from. So if one icon is from 20px grid set, another icon is from 24px grid, when inserted in same row (such as navigation or whatever) they should look similar, 1em height makes it possible.

As for color, what is context-fill you are talking about?

dokax commented 7 months ago

As for color, what is context-fill you are talking about?

https://www.w3.org/TR/SVG2/painting.html#SpecifyingPaint

if the value is context-fill, then you can use fill: "color"; in css

cyberalien commented 7 months ago

If I understand context correctly, it is usable only within marker and use elements. See https://www.w3.org/TR/SVG2/painting.html#TermContextElement

If so, it makes it completely useless.

Even if I'm wrong and it does inherit context from svg element, it is still much inferior to just using currentColor. With currentColor icon is rendered with same color as text, so it doesn't need extra styling for most use cases. For use cases when it does need styling, simply changing color solves it.