4 ms·

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 t

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 javascript Yet another download A library of icons including the cruft I am not using. Icons which need a lot of fettling to be used inline Icons 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.

diafygi 8y ago
Does this work? https://diafygi.github.io/svg-font-to-svg-sprite-converter/examples/ https://diafygi.github.io/svg-font-to-svg-sprite-converter/e...
- masukomi 8y ago
  very cool. I didn't know about that. thanks.
vortico 8y ago
Here's my advice from building a couple websites with tons of icons (almost overuse, because I really like using icons on everything). Just use img tags with Noun Project icons. Use a scripting language of your choice to change the fills and extract the Creative Commons attribution from the XML, and you'll have full customization of the color and size of your icons. There's probably a service out there that does this for you, but a quick search returns no results. (Idea for a project!) But regardless, Noun Project SVG is extremely simple for parsing with a 20-line script. Don't bother with rotating 180 degrees to generate forward buttons, etc. That's just preoptimization. Just use two different icons. Your company/project/organization will not see the tiniest financial effect of loading tons of unnecessary SVG files vs. optimizing them.
deleted 8y ago
[deleted]
chrismorgan 8y ago
Some remarks: > The forward button is the same as the back button with it rotated around 180 degrees, the original def being just two lines. A sane minimal arrow button will be just one short path; referring to the other and rotating it 180 degrees can easily be more verbose and complex. > I also want to put them in the stylesheet with ::before and ::after pseudo elements. This is incompatible with several of your other goals: currentColor, <use>, <title>, <description>. > I also don't want width and height in my icons. I want just the viewbox. In some contexts there are distinct advantages to specifying width and height; most notably, in inline SVG, before the stylesheets which define the size have loaded, they will tend to fill the available width instead, leading to massive icons briefly, or if the stylesheets simply fail to load (or are blocked). > I also want to have titles and descriptions in my icons, in this way I can have useful mouseover text. Better still, have actual text beside the icon. Text is really good. Icons and text is commonly really good. (In that case, you just want aria-hidden=true on the icon.) Icons with no text are generally just a bad idea. > Maybe I get my 'service worker' to do the work rather than have the icons embedded as inline on every page. […] You have bamboozled me with this one.

diafygi 8y ago

Does this work? https://diafygi.github.io/svg-font-to-svg-sprite-converter/examples/ https://diafygi.github.io/svg-font-to-svg-sprite-converter/e...

masukomi 8y ago
very cool. I didn't know about that. thanks.

vortico 8y ago

Here's my advice from building a couple websites with tons of icons (almost overuse, because I really like using icons on everything). Just use img tags with Noun Project icons. Use a scripting language of your choice to change the fills and extract the Creative Commons attribution from the XML, and you'll have full customization of the color and size of your icons. There's probably a service out there that does this for you, but a quick search returns no results. (Idea for a project!) But regardless, Noun Project SVG is extremely simple for parsing with a 20-line script. Don't bother with rotating 180 degrees to generate forward buttons, etc. That's just preoptimization. Just use two different icons. Your company/project/organization will not see the tiniest financial effect of loading tons of unnecessary SVG files vs. optimizing them.

deleted 8y ago

[deleted]

chrismorgan 8y ago

Some remarks: > The forward button is the same as the back button with it rotated around 180 degrees, the original def being just two lines. A sane minimal arrow button will be just one short path; referring to the other and rotating it 180 degrees can easily be more verbose and complex. > I also want to put them in the stylesheet with ::before and ::after pseudo elements. This is incompatible with several of your other goals: currentColor, <use>, <title>, <description>. > I also don't want width and height in my icons. I want just the viewbox. In some contexts there are distinct advantages to specifying width and height; most notably, in inline SVG, before the stylesheets which define the size have loaded, they will tend to fill the available width instead, leading to massive icons briefly, or if the stylesheets simply fail to load (or are blocked). > I also want to have titles and descriptions in my icons, in this way I can have useful mouseover text. Better still, have actual text beside the icon. Text is really good. Icons and text is commonly really good. (In that case, you just want aria-hidden=true on the icon.) Icons with no text are generally just a bad idea. > Maybe I get my 'service worker' to do the work rather than have the icons embedded as inline on every page. […] You have bamboozled me with this one.