Open Source SVG Icons Library – Vivid.js
I am in the market for a decent icon set so I am quite specific about what I want in an SVG icon.Realistically I need a few icons for buttons, account login things, edit buttons and so forth.I want to have extremely lean and speedy code. This means having a simple inline stylesheet with 'use' being how I put icons in my content. So the account navigation at the top has the icons e.g. 'account' (which is some weird head and shoulders icon type of thing). The forward - next buttons for browsing an image gallery need to be in there as does a popup modal closing 'x'.The forward button is the same as the back button with it rotated around 180 degrees, the original def being just two lines.Instead of using some style tags baked into icons I want to set fill and stroke to be 'currentColor'. In this way if I change the link colours then the SVG icons update.I also don't want width and height in my icons. I want just the viewbox.My icons are not a semantic element so I also want to put them in the stylesheet with ::before and ::after pseudo elements. Except for in places like the header logo where an inline SVG is legit.Because I want to 'use' elements I want a master arrow where I can change it and know my changes will be in both the forward and back arrows, or even the up/down wherever arrows.I also want some space saving social media icons that are not styled but as Facebook/Instagram/Pinterest/Twitter designed them. I want the blue bird not some 'creative designer' effort at improving on the icon. This is for reasons of 'Don't Make Me Think'.I also want to have titles and descriptions in my icons, in this way I can have useful mouseover text.Maybe I get my 'service worker' to do the work rather than have the icons embedded as inline on every page. The page can then render nicely on a poor connection even if the icons are missing. This will involve a repaint though as 'svg use' markup might have nothing to 'use'.A telephone icon would be nice, as would a letter icon for email. In this way I can have a 'call' or 'email' icon in there. The unicode versions of these are no good as the size jumps all over the place.What I don't want is:Yet another bit of render blocking javascriptYet another downloadA library of icons including the cruft I am not using.Icons which need a lot of fettling to be used inlineIcons with style definitions baked into all of them.Another toolkit to learn.Another CSS color gig to learn, I want just currentColor.Paths that are compressed. If I want to compress them then I will do that with defs and use, to keep the original components, e.g. that arrow, as something that makes sense.So please, if you want to write another SVG icon set, get it to work with 'use', keep the icon content out of the markup, e.g. in the CSS without hacky 'i' tags.Give me some instructions too about doing it the proper way that works for screen readers as well as those that can read.