Split Hamburger-Icon SVG into three tags to allow more styling and animation #71791
Description
This is a copy of the same issue I added to trac (https://core.trac.wordpress.org/ticket/64004#comment:1).
I was told to raise the issue here. So here we gooooo
What problem does this address?
While working on a client project I wanted to animate the menu button on mobile. At first the two line icon ("Handle") was used and the icon could be animated. Later the three line aka "hamburger icon" or "Menu" icon was selected and the animation broke.
Because the "Menu icon" currently is build with a single tag for all three lines, therefore an individual line could not be addressed.
What is your proposed solution?
I propose to change the SVG to have three tags to allow animations and styling of each line independently.
--
The "Handle icon" (two lines) is using tags to draw the lines. I'm not sure if we should also switch to for the three lines (Menu icon). To make the markup more consistent between the two icons to prevent breaking if the user changes the setting.
Keeping the tag would be more compatible with the old SVG content. Not breaking any existing code.
I have attached patches for booth cases.
--
The "close button icon" uses to draw the X.
To unify the three icons all icons could be done the tags. This changes the markup for two icons - withe the potential of breaking more things.
I attached a patch for that, too.