4 ms·
You also get up to two dynamically stylable colors in SVGs without using CSS variables, with wider browser support. If you remove the 'fill' style entirely from
by WiseWeasel 8y ago
You also get up to two dynamically stylable colors in SVGs without using CSS variables, with wider browser support. If you remove the 'fill' style entirely from the first path in your example, and set the second path's fill to 'currentColor', you can then adjust those path colors such as:
.icon {
fill: DarkBlue;
color: DeepSkyBlue;
}
- spankalee 8y agocurrentColor is neat, but it means that you can use strokes for the other color, and this technique doesn't scale to more than two colors. CSS custom variable support is very good: https://caniuse.com/#feat=css-variables https://caniuse.com/#feat=css-variables If you can import external symbols this way, you're already not using IE, and so can use CSS custom variables.
- WiseWeasel 8y agoThere's actually a small polyfill for external SVG use that works with IE. Think I used this one: https://github.com/Keyamoon/svgxuse https://github.com/Keyamoon/svgxuse