JSFiddle - React, Tailwind, and code Playground

HTML

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

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

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

CSS

.icon {
  width: 100px;
  height: 100px;
}

.test-class {
  position: relative;
  -webkit-animation-name: move;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: 3;
  -webkit-animation-direction: reverse;
  animation-name: move;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;    
}

@-webkit-keyframes move {
    0%   {fill: red;}
    100% {fill: green;}
}

@keyframes move {
    0%   {fill: red;}
    100% {fill: green;}
}