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 GitHubGitHub GitHub is a website that offers online implementation of git repositories that 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/ 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 CSSCSS Cascading Style Sheets. 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 HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.) 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 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/.. Meetings are held there every Friday at 7pm UTC. The next one is on Friday at 19:00 UTC.

#dashicons