5 ms·
> advertise a technical SVG standard that icon designers can comply with > Then, the JS library would simply implement the ability to change colors assuming th
by spankalee 8y ago
> advertise a technical SVG standard that icon designers can comply with
> Then, the JS library would simply implement the ability to change colors assuming the icon follows the SVG standard
No need for JS for styling: just use CSS custom variables. The only thing that needs to be standardized are the two variable names.
Just define an icon like this:
icons.svg
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="calculator" viewBox="0 0 48 48">
<path class="icon-primary" style="fill: var(--icon-primary-color, black)" d="..."></path>
<path class="icon-accent" style="fill: var(--icon-accent-color, gray)" d="..."></path>
</symbol>
</svg>
Then use it like this:
<style>
.icon {
--icon-primary-color: DarkBlue;
--icon-accent-color: DeepSkyBlue;
}
</style>
<svg class="icon"><use xlink:href="icons.svg#calculator"></use></svg>
See a demo here:
https://glitch.com/edit/#!/piquant-ladybug?path=index.html:1:0 https://glitch.com/edit/#!/piquant-ladybug?path=index.html:1...
- vortico 8y agoThat works too, good idea.
- plorntus 8y agoI think most people would like to go this route but IE 11 support holds them back.
- mrmondo 8y agoIsn't all of IE at something like 3% market share these days? If so, is it worth holding back web development for such a small user base?
- philliphaydon 8y agoDepends on your market, it appears for me, most of Europe is Safari / Chrome, but Japan is almost entirely IE 11, China is mix of IE / 360 Browser. Sometimes it's not easy to not care.
- tannhaeuser 8y agoDo you have a source for that (DeviceAtlas or similar)?
- philliphaydon 8y agoThis is just observation based on stats from Google Analytics at work. I hope you're not assuming that my statement is the overall usage of browsers by country.
- dmitriid 8y agoDepends on the size of the company and the userbase. For us IE11 alone is over 3 million users a month. The size of a small country.
- spankalee 8y agoYet another reason sites should drop IE support as soon as the numbers let them.
- vortico 8y agoI think for icons, lack of IE support is acceptable because the fallback is simply not displaying icons.
- pasta 8y agoOr just: .icon-primary { fill: #ff6600; } for browsers without variable support.
- spankalee 8y agoThe icon might have parts where the stroke should be the primary color. Variables abstract away the details. They also inherit through shadow roots, while selectors don't.
- WiseWeasel 8y agoYou 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