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 coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 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 adminadmin (and super 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 CSSCSS Cascading Style Sheets. 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 accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) [source]
  • Much easier to maintain than the current icon font
  • Easier for pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party 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 pluginFeature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins. — but we’ve already started running into some issues with what we can and can’t do in a plugin.
  • The MVPMinimum Viable Product "A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia 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 githubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/:  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 makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). Dashicons even better.

If you have questions, feel free to leave a comment here or ask in slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

#dashicons, #roadmaps