Jetpack: Change social icons to use svgs

[BinaryMoon]

SVGs are generally better than icon fonts. Personally I have stopped using icon fonts and now use svgs exclusively (apart from supporting Jetpack social menu of course).

A few interesting articles on using svgs instead of icon fonts:

• http://blog.cloudfour.com/seriously-dont-use-icon-fonts/
• https://github.com/blog/2112-delivering-octicons-with-svg

Sami Kiejonen (@samikeijonen) has recently written about how he has implemented svg social icons in a theme and I really like it so thought I'd suggest it here - https://foxland.fi/svg-social-menu-in-wordpress/

I'd be interested in hearing your thoughts and wonder whether you'd consider introducing something like this.

[jeherve]

cc @jasmussen, who knows all about Genericons and our plans for the future :)

[jasmussen]

SVGs are great, agree, and icon fonts were always a hack we meant to leave by the wayside at some point.

This definitely affects Genericons, thanks for the ping Jeremy. I suppose this is as good a place as any, to spill the beans on the future plans. I believe the plan is to replace the icons in Jetpack with the social-logo-only set here: https://github.com/Automattic/social-logos

That set includes a bunch of different SVG sprite-sets, and is being continually iterated and improved. I don't know if the icon font dies in the initial release — it's still the most compatible way to show vector icons — but we'll be in a better place to move to SVG with the new grunt process.

As for what this means for Genericons, you can get a sneak peek here: https://github.com/Automattic/Genericons/tree/refactor/genericons

[BinaryMoon]

Thanks for the feedback Joen. Great to hear you're moving towards this! :)

[peiche]

+1

[jobthomas]

Any updates on this @jasmussen? The Instagram logo has been changed for quite a while now, and JP is still using the old logo while awaiting this update.

[jasmussen]

@jobthomas sure, though alas I won't have time in the near future to work on Jetpack, so I won't be able to submit any PRs to Jetpack to change icons in the social sharing features, or the use of Genericons itself. Perhaps @jeherve can elaborate on the process here.

Specifically, though, Genericons Neue is done. It's a new icon set, that's refreshed, polished, SVG-first, and all ready to go: http://genericons.com — but it's not a drop-in replacement for the old Genericons, though. There are no logos in the set at all.

For icon usage, though, I believe Jetpack is moving towards using Gridicons, which is also SVG-first and ready to go: https://automattic.github.io/gridicons/

I think the next actionable step here, is to rewrite the social sharing feature in Jetpack to use Social Logos (https://github.com/Automattic/social-logos — also SVG first and ready to go), _or_ update to the latest version of that if it already uses that set (I can't recall). In any case, the latest version of the instagram icon is in social logos:

[jeherve]

I think the next actionable step here, is to rewrite the social sharing feature in Jetpack to use Social Logos

That's most likely what is going to happen. That's what we did for the sharing buttons and Social Menu, and #7454 will bring the same changes to the Social Media Icons widget as well.