[wp-trac] [WordPress Trac] #64004: Split Hamburger-Icon SVG into three tags to allow more styling and animation

[WordPress Trac]

#64004: Split Hamburger-Icon SVG into three tags to allow more styling and
animation
--------------------------+-----------------------------
 Reporter:  Drivingralle  |      Owner:  (none)
     Type:  enhancement   |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Menus         |    Version:  6.8
 Severity:  normal        |   Keywords:
  Focuses:  ui            |
--------------------------+-----------------------------
 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/64004>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform