JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<svg height="40" width="40" viewBox="0 0 20 20" 
  onclick="this.classList.toggle('open')">
  <path d="M19.5 0.5 l-14 0 q-5 0 -5 5 l0 9 q0 5 5 5 l14 0 z" />
  <path d="M12 4 l-4 0 q-4 0 -4 4 l0 4 q0 4 4 4 l4 0 q4 0 4 -4 l0 -4 q0 -4 -4 -4" />
</svg>

CSS

svg path{
  fill: white;
  stroke: DodgerBlue;
  stroke-width: 1;
}

svg path:last-child{
  fill: DodgerBlue;
  stroke-width: 0;
}
/*Active*/

svg:active path:last-child{
  fill: white;
}

/*open*/

svg.open path:last-child{
  fill: none;
}

svg:active path{
  fill: DodgerBlue;
  stroke: DodgerBlue;
}