Moving Dashicons from an Icon Font to SVG

In the next couple months, we’re going to focus on converting the Dashicons icon font in core to SVG. The process of adding and updating the Dashicons font is an incredibly labor intensive, tedious process that is currently limited to a small number of people who have the ability to add new characters to the .glyphs source file. By moving to SVG, we’re not only making the process easier for Dashicons maintainers, but also making the process of adding and updating icons easier and more open to the entire design community.

Why SVG?

When we initially built Dashicons, we tried out a couple different methods for including them in the admin. SVG was our preferred method, but due to lack of support and fallbacks for SVG at the time, we opted to go for the more widely support icon font method.

However, there have tremendous strides to improve support and understanding around SVG in the past year and a half, and we think now is a good time to start the transition process in core.

Here are some of the benefits SVG icons provide:

  • The icons are straight up vector — that means no font antialiasing issues when you use the icons outside of their 20×20 pixel grid, making the icons much more versatile
  • Better CSS control — switching to SVG introduces the possibility of multi-color icons
  • Better positioning control than icon fonts
  • SVG won’t fail to load like a font might, because inline SVGs are included right there in the document
  • Potentially better for accessibility [source]
  • Much easier to maintain than the current icon font
  • Easier for plugin and theme authors to add custom SVGs

The cons:

  • Less native browser support (but fallback options exist)
  • Figuring out backwards compatibility in core will be challenging (but not insurmountable)

Chris Coyier has a pretty fantastic rundown on SVG vs. icon fonts.

Just to note: we’re not talking about supporting uploading SVGs in the media library. These would be SVGs built by us, included inline in the WordPress dashboard.

The Roadmap

Here’s the plan:

  • As much as possible, we’re going to attempt to build this as a feature plugin — but we’ve already started running into some issues with what we can and can’t do in a plugin.
  • The MVP will be svg icons being generated into a sprite through a Grunt build process. For the MVP, we’re not going to focus on browser support.
  • Once we have an MVP up, we’re going to explore the best way to provide browser support using techniques outlined by Chris Coyier in Github, as well as figure our backwards compatibility with the icon font.
  • Finally, we’re going to explore breaking up SVGs into different icon “packs” (TinyMCE, admin bar, CPT, etc.) and figure out if we can enqueue them on the fly.

Ideally, we’d like to do as much of this during the 4.3 cycle as possible, with the idea of merging in 4.4. This means we’ll need to have a solid MVP by August, which is feasible if we can get more help. That’s why we’d like you to…

Join us

We would love to get more people involved in this project. Specifically, we’re looking for people to help build out the MVP, and people to work on compatibility issues.

We’re going to be building out the plugin on github:  https://github.com/ryelle/svg-dashicons-plugin. There’s nothing there yet, but we hope to get some early work up soon. (We also did some very early explorations in another repo, if you want to see some of the past conversations and issues.)

Our meetings take place in #design-dashicons every Thursday at 18:30 UTC. Please join in and help us make Dashicons even better.

If you have questions, feel free to leave a comment here or ask in slack.

#dashicons, #roadmaps