Rengga Dev – I’ve been saying for years that a pretty good icon system is just dropping in icons with inline <svg> where you need them. This is simple to do, offers full design control, has (generally) good performance, and means you aren’t smurfing around with caching and browser support stuff.
Along those lines… using <img> isn’t the worst idea for icons either. It doesn’t offer as much fine-grained design control (although you can still filter them) and arguably isn’t quite as fast (since the images need to be fetched separately from the document), but it still has many of the same upsides as inline SVG icons.
Shubham Jain has a project called SVGBOX that offers icons-as-<img> and removes one of the design-control limitations by offering a URL parameter to change colors.
Want an Instagram icon, but in red? Pass in red:
<img src="//s.svgbox.net/social.svg?fill=red&ic=instagram"> <img src="//s.svgbox.net/social.svg?fill=blue#twitter"> <img src="//s.svgbox.net/social.svg?fill=805ad5#facebook">
img {
max-width: 40px;
}
If you’re going to use a bunch of icons, the provided copy-and-paste code offers an “SVG sprite” version where the URL is like this:
<img src="//s.svgbox.net/social.svg?fill=805ad5#instagram">
That is going to increase the download weight of the icon (because it’s downloading all the icons from this set), but possibly be more efficient as it’s a single download not many. Hard to say if that’s more efficient or not these days, with HTTP/2 around.
What’s interesting is the #instagram part at the end of the URL. Just a hash-link, right? No! Fancier! In SVG land, that can be a fragment identifier, meaning it will only show the bit of the SVG that matches the proper <view> element. Don’t see that every day.
DIRECT LINK →
