JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="100" height="100">
  <use xlink:href="#menu-white"/>
</svg>

<!-- Symbol -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="none">
  <symbol id="menu-white" viewBox="0 0 42 42">
    <circle cx="19.5" cy="10.5" r="2.5"/>
    <circle cx="19.5" cy="19.5" r="2.5"/>
    <circle cx="19.5" cy="28.5" r="2.5"/>
  </symbol>
</svg>
<!-- Symbol -->

CSS

:root {
  --color: red;
}

svg {
  fill: var(--color);
  transition: fill .3s;
}

svg:hover {
  --color: blue;
}