Switch to SVG Icons

[robneu]

Right now we're using grunt-webfont to create a custom icon font using SVGs. After the switch to npm3 that library has been unreliable and borks the SVG files we use from themicons.

It seems like most of the web is moving away from icon fonts anyway, so I'd like to explore doing this within our themes. The top contender for this is Open Ionic which has a pre-compiled SVG sprite. The icon set is a little limited, but I don't think we need to use as many icons as we are right now. All we really need are some basics like search, menu, left and right arrows, etc.

[GaryJones]

With the HTTP/2 eventually not needing the number of requests to be reduced, you may get more flexibility and ease of development by just having the raw (optimized - SVGO) SVGs in a file and use them inline / as CSS background images.

[robneu]

That seems like it would probably be a good option. The only thing that's really annoying about SVGs is that you can't control the fill when you use them as a CSS background image. :\

[robneu]

This task looks interesting for automating SVG sprite generation.

[ctalkington]

been hitting the same issue with webfont, i've resorted to running 0.5.x and ignoring the woff2 error (running node 4.x LTS) since not currently using woff2.

im trying to work out the exact commit at which broke generation, it can clearly be seen when using the twitter svg from themicons.

[robneu]

It seems to be related to this issue but overall the benefit of including a webfont builder in a theme seems outweighed by the aggravation of sorting out any bugs that crop up in the myriad of dependencies required for it to work.

Even if I don't switch over to SVGs entirely, the webfont task won't be re-appearing. I'll just pull in pre-compiled fonts if they're needed.

[ctalkington]

i will likely do the same in my own themes as i honestly only ever use 5 icons and nothing custom. icomoon or such can handle that use case if it crops up.

[robneu]

After experimenting a bit more with SVG icons on a recent project, I've decided that they're still just too annoying to be a practical replacement for an icon font right now.

They're definitely a handy tool and you can do some really awesome things with them, but they're still a royal pain in the ass to work with if you need control over the icon fill. Closing this out for now, but will revisit the idea again in the future.