JSFiddle - React, Tailwind, and code Playground

HTML

<svg height="0" width="0">
  <symbol id="test-circle" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </symbol>
</svg>

<svg class="icon">
    <use xlink:href="#test-circle"></use>
</svg>

CSS

.icon #test-circle {
  animation-name: move;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

@keyframes move {
  from: {transform: translate3d(0, 0, 0); fill: red;}
  to: {transform: translate3d(0, 100px, 0); fill: green;}
}