Contributing the Drupal 7 Navbar Dashboard icon
For a recent client project at Bluespark, we’re using Drupal 7 with the Navbar module, also known as the Mobile friendly navigation toolbar. This module is a backport of the administration menu used in core Drupal 8.
Drupal version 8 has dropped support for the “Dashboard” module, which means there wasn’t an icon for this top-level menu item in the Drupal 7 version, leaving the main menu with an unsightly empty white space.
So, for this client project our lead designer, Rusty Segars, found this Public Domain dashboard icon from IconsDB.com. The only problem then was that the site did not provide the image file in SVG format which is required by the Navbar module.
I was able to convert the PNG version of the icon to an SVG using a great little application called VectorMagic which started its life as a Stanford project and now has a grown up web version. The resulting SVG file worked but it needed to be resized to fit the 16 by 16 pixel dimensions needed by the Navbar menu.
I opened the resulting file in Adobe Illustrator, and resized it to fit onto a 16 by 16 canvas and saved the output. Unfortunately though, I wasn’t done there, because Adobe’s SVG output is quite bloated. I opened the SVG file in a text editor and cleaned up the file by hand to strip out needless header tags and attributes, whitespaces and convert tabs to single spaces, etc.
If you plan to be doing this kind of PNG-to-optimized-SVG conversions frequently, the svgo command line application can speed up the optimization process, but for my needs this time, it was easy enough to clean up by hand.
Finally, I grabbed a copy of the Navbar module from Drupal.org’s git repository and contributed the icon as a patch back to the community.
The new icon using Drupal 7’s administration theme, and the Mobile friendly navigation toolbar module looks like this:
