The Future of Dashicons

During the WordPress Community Day following WCSF, a group of us (@ryelle, @empireoflight, @michael-arestad, @liljimmi — am I missing anyone? Maybe @markjaquith was there?) got together and discussed the future of Dashicons. Here are the notes from that meeting:

Icon font, or SVG?

Inline SVG vs Icon Fonts [CAGEMATCH]

Pros:

  • SVGs better rendered in browsers
  • Easier to maintain
  • The grunt process would be in core, so anyone can do it

Cons:

  • Different steps of building
  • Drop icon (svg) into folder, run grunt
  • IE9,10,11 don’t support external svgs
  • JS library fallback
  • Originally this was a font due to IE8
  • grunt would compile light/dark pngs
  • Modernizr or hacky thing to add a class

What’s the process for the new font?

  • Icons are all 1 .ai, each as a layer or artboard, exported to SVG
  • Or shortcut to SVGs
  • Grunt compiles a folder of SVGs to generate png, css, etc.
  • Optimize SVG
  • Grunticon to create pngs-> can be different colors
  • Combine SVGs into sprite
  • Pulled into core

How to BackCompat?

  • Old fonticons would use .dashicons, new would use .dashicon
  • Enqueue old font for a while
  • Check JS to see if anyone’s using old font

Steps

  • We already have the folder of SVGs
  • Micheal going to Gruntfile
  • Ben use this process for Palm Tree, Tracy bringing in things that missed 4.0
  • Upload SVG to a ticket
  • Stay on the 20×20 grid, for consistency
  • Official guidelines and template (Mel)
  • Style guide!
    • Redirect to dev hub
  • Blog: where we’re going, pros and cons, btw demo page.

Purpose of Dashicons?

How far are we going? Everything ever?

  • No new third party icons
  • Keep small as possible, things are hard to remove
  • Keep focus on wordpress admin
  • Approval process for icons
  • Ben is best for stylistics, but whether the icon belongs is democratic

Following the meeting, we redirected the github resource to Dashicon’s new official home at developer.wordpress.org/resource/dashicons/.

Next up, we’ll want to start having meetings to get this process rolling. @ryelle has agreed to lead meetings, and has a preliminary mockup for the new process that we can talk about at our first meeting, which will take place some time during the week of the 12th-16th. What day/time works best for people?

#dashicons