JSFiddle - React, Tailwind, and code Playground

HTML

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display:none;">
    <defs>
        <symbol id="arrow" viewBox="0 0 86.997 86.997">
            <path class="bg" style="fill-rule:evenodd;clip-rule:evenodd;" d="M43.499,0c24.022,0,43.498,19.475,43.498,43.498c0,24.022-19.475,43.497-43.498,43.497 C19.475,86.995,0,67.521,0,43.498C0,19.475,19.475,0,43.499,0L43.499,0z M27.942,37.022l15.557,15.555l15.556-15.554l2.907,2.906 L46.405,55.485l-2.906,2.908l-2.907-2.908L25.035,39.929L27.942,37.022L27.942,37.022z"/>
            <path class="icon" style="fill-rule:evenodd;clip-rule:evenodd;" d="M27.943,37.023l15.556,15.556l15.556-15.555l2.908,2.907L46.406,55.487l-2.907,2.908l-2.907-2.908 L25.036,39.931L27.943,37.023L27.943,37.023z M43.499,0.001c24.023,0,43.498,19.474,43.498,43.498 c0,24.023-19.475,43.498-43.498,43.498C19.475,86.997,0,67.522,0,43.499C0,19.475,19.475,0.001,43.499,0.001L43.499,0.001z M43.499,3.142c22.289,0,40.357,18.069,40.357,40.357c0,22.289-18.069,40.357-40.357,40.357c-22.289,0-40.358-18.068-40.358-40.357 C3.141,21.21,21.21,3.142,43.499,3.142L43.499,3.142z"/>
        </symbol>
    </defs>
</svg>

<a href="#"><svg><use xlink:href="#arrow"></use></svg></a>

SCSS

svg {
  transition:all 0.3s ease;
  path {
    transition:inherit;
  }
}

a {
svg {
    fill:red;
    width:100px;
    height:100px;

    .bg {
      opacity:0;
    }
    .icon {
      opacity:1;
    }
}
  &:hover {
    svg {
  
      .bg {
        opacity:1;
      }
      .icon {
        opacity:0;
      }
  }
}
}