Improve the rendering of the icon used in the admin menu & admin bar #11
As mentioned via #9 (comment), I've investigated a way to have it keep the opacity values for different parts of the icon and also retain the dynamic coloring of the icon per the icon color that's set for both the admin bar & admin menu (on site admin & front-end pages). I even got it to keep the shadow as black if that's desired in the full icon implementation.
First, I converted the original SVG into an icon font using IcoMoon.io, and this supports multiple glyphs in icons so that was then used moving forward for all of this. The export of the IcoMoon font is available here: w3tc.zip Additional info/etc. can be provided as needed.
I then implemented the multi-glyph icon for the admin bar to be the ideal setup (it even keeps the shadow as black while the rest changes based on the icon color). However, the admin menu doesn't have enough selectors to use the glyph-based setup so I implemented that using the previous inline SVG setup since that did work fine & it has better handling of the varying opacity on elements. It might be good to revisit this to make it so the inline SVG is replaced with the glyph-based icon when it's possible (let me know if I actually overlooked how it would be now).
…of the font (which had rendering shortcomings) Using a basic font (which this was set to use) lacks the opacity differentiation of elements in the icon we want, and the admin menu doesn't have enough selectors available for the icon to implement the multi-glyph icon like the admin bar does. The next best thing (in terms of rendering quality and feasibility) is to use the SVG inline.
…hanced icon This new icon allows the admin bar's icon to have opacity for the different icon elements while keeping the font color. Also, this allows for the shadow to always be black for the box (is manually set & doesn't inherit the icon font's overall color).
We will keep things similar to WordPress core, and since font icon is used there. That way it's better compatible with future WordPress updates.
Looks like shadows can't be implemented in this mode without all those hacks, so we will leave icon without shadows.
If you want to change icon so it looks better with actual code (i.e. make it nicer without shadow) - you are welcome.