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.<p>Realistically I need a few icons for buttons, account login things, edit buttons and so forth.<p>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'.<p>The forward button is the same as the back button with it rotated around 180 degrees, the original def being just two lines.<p>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.<p>I also don't want width and height in my icons. I want just the viewbox.<p>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.<p>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.<p>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'.<p>I also want to have titles and descriptions in my icons, in this way I can have useful mouseover text.<p>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'.<p>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.<p>What I don't want is:<p>Yet another bit of render blocking javascript<p>Yet another download<p>A library of icons including the cruft I am not using.<p>Icons which need a lot of fettling to be used inline<p>Icons with style definitions baked into all of them.<p>Another toolkit to learn.<p>Another CSS color gig to learn, I want just currentColor.<p>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.<p>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.<p>Give me some instructions too about doing it the proper way that works for screen readers as well as those that can read.