Join GitHub today
GitHub is home to over 31 million developers working together to host and review code, manage projects, and build software together.Sign up
Remove stroke from CSS rules that colorize plugin icons #13719
There are some CSS rules that add stroke to colorize plugin icons. That makes plugin icons look weird as you can see here:
After removing the stroke from the CSS rules, plugin icons look great:
This happens with both SVG files and dashicons when filling the
How has this been tested?
I just registered a plugin with the following:
Types of changes
My code just removes the stroke property in three CSS rules.
requested review from
Feb 7, 2019
Thank you for the pull request!
This is an interesting one. The reason we set those properties is to enforce consistency for plugin icons, specifically to ensure contrast when a button is toggled on or off. I know this is done a little heavy-handedly, even with
But this PR does surface a challenge this brings to the SVG plugin developers can use for these slots. Specifically, if the icon uses both strokes AND fills to render the icon, it might cause situations where one of the two has the wrong color.
@avillegasn is there any chance you can share the specific SVG file (you can paste it here inline) that's causing trouble? I suspect that there's a white stroke around the base fill, which gets colorized a dark gray in the editor.
I'm tempted to suggest the solution here isn't to change these styles in the editor, but rather create documentation for how to create these icons. If I'm right that there's a white stroke, the real solution is to flatten the SVG to one compound vector shape.
Removing just the stroke property is only solving the problem for an icon that uses dark fills and light strokes, and then the inverse problem, an icon that uses light fills and dark strokes, will stop working.
Thanks for the quick response!
I just used the translation dashicon (that apparently you can find here). Take a look at the example I included:
Does this mean WordPress dashicons are not properly created and need to be fixed?
Oh goodness yes, you gave that example, sorry for missing that. Let me investigate! From a casual glance it looks like that SVG is alright and I was wrong in my assessment. But yes, if I had been right, we'd need to fix that in Dashicons.
Let me take a deeper look and return, thank you for the response!
I think we need to explicitly state that the SVG file doesn't have a stroke. For instance, adding the property
Excellent suggestion. Here's a codepen that illustrates the problem.
Try to comment out the line that says
But if we, as you suggest, add this property back, not only does it fix the problem but it doesn't negatively affect icons that consist ONLY of strokes, because these icons are likely to have their stroke-widths defined as inline elements styles regardless, so they will override the value.
@avillegasn can you restore the stroke values and add the stroke-width fix? It should look like this:
Also add to the subsequent toggled states. Then let's get this in, and thank you for the fix!