Split Hamburger-Icon SVG into three tags to allow more styling and animation

[Drivingralle]

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 <path> tag for all three lines, therefore an individual line could not be addressed.

I propose to change the SVG to have three <path> tags to allow animations and styling of each line independently.

--

The "Handle icon" (two lines) is using <rect> tags to draw the lines. I'm not sure if we should also switch to <rect> 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 <path> 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 <path> to draw the X.
To unify the three icons all icons could be done the <path> tags. This changes the markup for two icons - withe the potential of breaking more things.

I attached a patch for that, too.

[Drivingralle]

Patch to use multiple path tags

[Drivingralle]

Patch to use multiple rect tags

[Drivingralle]

Patch to use path for all navigation icon SVGs

[sabernhardt]

This belongs on the Gutenberg repository because the code is part of the blocks package. Some ​similar issues exist, but I did not notice a close match.

Could you comment on one of the existing issues or open your own?

[Drivingralle]

I added an issue to Gutenberg:
​https://github.com/WordPress/gutenberg/issues/71791

[sabernhardt]

Thanks for moving the report!