Mel Choyce-Dwan 6:29 pm on January 4, 2015
Tags:   

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 coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., 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 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/ 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