JSFiddle - React, Tailwind, and code Playground

HTML

<svg  version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 396.667 396.667" style="enable-background:new 0 0 396.667 396.667;" xml:space="preserve">
  <g>
    <g>
      <path id="foo" class="menu--path" d="M17,87.833h362.667c9.35,0,17-7.65,17-17s-7.65-17-17-17H17c-9.35,0-17,7.65-17,17C0,80.183,7.65,87.833,17,87.833z"/>
      <path class="menu--path" d="M17,215.333h362.667c9.35,0,17-7.65,17-17s-7.65-17-17-17H17c-9.35,0-17,7.65-17,17S7.65,215.333,17,215.333z"/>
      <path class="menu--path" d="M17,342.833h362.667c9.35,0,17-7.65,17-17s-7.65-17-17-17H17c-9.35,0-17,7.65-17,17S7.65,342.833,17,342.833z"/>

    </g>
  </g>

</svg>

CSS

path {
  transition: transform 1s ease;
}
.rotate {
  transform: rotate(45deg);
}

JavaScript

foo.onmouseover = function(){
  this.classList.toggle('rotate')
}