Converting Dashicons to SVG

Currently, WordPress uses a font to render all the icons. The goal is to convert to SVG. We’ve started the process, but there’s a lot more work to be done to make sure the SVGs are rendered properly.

Read more about the project’s purpose in a previous post by @melchoyce:

https://make.wordpress.org/core/2015/06/11/moving-dashicons-from-an-icon-font-to-svg/

Since that post, progress has been made on a new GitHub repo at github.com/ryelle/WordPress/ (the ones listed in the previous post are no longer being used). Issues and instructions on how to get started can be found there.

So far, the font code has been replaced with SVG code wherever possible. For the most part, the SVGs are displaying properly. Issues are being posted on the GitHub repo.

To summarize:

  • There are several places where the SVG is still not showing up. The code used to display the font is inconsistent, e.g. in the TinyMCE bar above the visual content editor.
  • There are likely many places that haven’t been discovered that need icons. For the most part, if you see a square, it’s a missing icon. I’ve gone through and noted everywhere that I’ve seen this, but that’s just one person.
  • The CSS styling of the SVGs is fundamentally different that what’s being used to style the font. We need people to style the SVGs so they look and behave the way the font currently does.
  • We need to clean out the old CSS (and HTML) code being used to display and style the font.
  • We need to QA test on a variety of devices and browsers.

Get started by joining the #design-dashicons channel on Slack. Meetings are held there every Friday at 7pm UTC. The next one is on Friday at 19:00 UTC.

#dashicons