Netlify-cms: Cleanup Icons

[tech4him1]

Right now we have multiple different icon sets that are used in different parts of the UI. We currently have Material Icons, Entypo (v2?), and Font Awesome editor icons. These should probably be combined and only the ones that are actually used be included. We could also set up a way to automate icon updating/adding if possible, maybe using an NPM script and a font/icon service like Fontello's API.

Related to #418.

Any comments or suggestions?

[tortilaman]

This seems like something that gulp or a similar task-runner would be well-suited for. Adding gulp as a dependency though would be huge overhead.

I haven't used Fontello (or it's API) personally, but based on a quick look it's intriguing. I have several concerns about it thought that are probably just because of my lack of understanding of the API.

[t1merickson]

Agreed— have plans to address this soon and will be using a much smaller set of icons and not pulling in giant icon libraries

[erquhart]

@neutyp consider that we may be adding icons as we go if we went that route, and we don't necessarily want to be tied to an icon font/svg sprite generation process each time. Contributors should be able to PR a feature that uses previously unused icons without that hurdle. If we used svg sprites and had a way to import specific icons at build time, that would be awesome. Need to look into it.

We should definitely tie it all together, but if possible, we should find a way to use one or more third party icon libs as-is. Might not be possible, though.

[tech4him1]

I wonder if we could also have each SVG icon seperate, and use a generator/spriter to combine them at build-time. (EDIT) I've been using svg-sprite on a small project for a while, and it works well. The only downside of having all the icons as separate SVG's is that it is very easy to add an inconsistent one (from a different icon pack, never version, etc) without changing the others.

[erquhart]

@tech4him1 here's where this stands:

• As a part of the UI refresh, we're ditching all outsourced icons in favor of hand drawn icons by @neutyp!!
• Ran into an issue with sprites: since they work by reference, it's difficult to get multiple, differently styled instances of a single sprite working at the same time. I didn't look too deep into it, so maybe I'm missing something, but for now we're just inlining.

This will be closed when the UI refresh is complete.

[hacknug]

@erquhart it is possible to style different versions of the same symbol in different ways and that would probably the best way to do it. Here's a couple links with more info on the subject:

• https://github.com/jesstelford/color-svg-sprite
• https://css-tricks.com/svg-sprites-use-better-icon-fonts/

[erquhart]

Thanks @hacknug! Using sprites is definitely ideal, I'll have a look at those references.

[tech4him1]

@erquhart Do you want to leave this open for investigating sprites, or can it be closed?

[erquhart]

@tech4him1 moved to #903.