Instead of your framework using .fill-red the css class selector should be .bg-red. the fill selector should be reserved for SVG elements that use fill as a real property.
I currently have a project using SVG icons. If I want to use your framework and make a CSS selector to change the fill of my SVGs, currently I cannot use the logical:
.fill-red {
fill: red;
}
Because your .fill-red will add an additional background of red too as CSS will naturally cascade.
Instead of your framework using
.fill-red
the css class selector should be.bg-red
. the fill selector should be reserved for SVG elements that use fill as a real property.I currently have a project using SVG icons. If I want to use your framework and make a CSS selector to change the fill of my SVGs, currently I cannot use the logical:
Because your
.fill-red
will add an additional background of red too as CSS will naturally cascade.