JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="100" height="100">
  <use xlink:href="#dot" />
</svg>

<!-- Symbol -->
<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="dot" viewBox="0 0 22 22">
    <circle cx="15" cy="15" r="2"/>
  </symbol>
</svg>
<!-- Symbol -->

CSS

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

svg:hover {
  --color: blue;
}