Plugin icons in MP6
Method A: CSS colored SVG icon
Pros
- Clean, retina and infinitely zoomable
- Only a single icon file need to be created, no need for 2x versions, nor hover-color versions
- With colors being done by the CSS, they will always be accurate.
Cons
- SVGs won't render in IE8 and below unless you install the SVG plugin.
- For the CSS coloring to work, The 20x20px SVG file has to be run through through an SVG optimizer and have its styles converted to CSS, which then has to be edited out using a text editor, adding some overhead to the creation.
- The actual SVG file has to be inline in the HTML (i.e.
php include "iconfile.svg";). Hard to cache, requires WordPress core changes.
Method B: Baked in colors
Pros
- Clean, retina and infinitely zoomable
- SVG files can be used as CSS backgrounds, which means no WordPress core changes are necessary.
- SVG files can be used directly from Illustrator, no editing of the SVG necessary.
Cons
- SVGs won't render in IE8 and below unless you install the SVG plugin.
- Two SVG icons need be created, one for up state, and one for hover state.
- Since the colors aren't CSS specified, users have to be mindful to pick the exact gray and blue colors as suggested in the MP6 style guide. Incidentally this also means that creative plugin authors could use any colors, gradients or styles they wish.
- Since the colors aren't CSS specified, the WordPress admin becomes harder to sweepingly re-style. Since the blue scheme is being dropped, this is less important, but if we wanted to create a high-contrast accessability color scheme, coloring in CSS would have been nice.
- Hover effect can feel laggy unless the icons are base64 encoded (which they are in this example)