JSFiddle - React, Tailwind, and code Playground

by RadCor

HTML

<a href="#" class="link-to-svg">
<svg viewBox="0 0 24 24">
		<linearGradient id="g1" gradientUnits="userSpaceOnUse" x1="10.9111" y1="0.0449" x2="12.9916" y2="23.8254">
			<stop  offset="0" style="stop-color:#FFFFFF"/>
			<stop  offset="1" style="stop-color:#000000"/>
		</linearGradient>
		<path class="st0" d="M11.789,0C5.205,0.097-0.081,5.514,0.016,12.097S5.53,23.968,12.114,23.87
			c6.584-0.097,11.87-5.514,11.773-12.097S18.373-0.097,11.789,0L11.789,0z M11.757,19.2h-0.065
			c-1.005-0.032-1.719-0.778-1.686-1.784c0.032-0.973,0.746-1.686,1.751-1.686h0.065c1.038,0.032,1.751,0.778,1.719,1.816
			C13.476,18.519,12.762,19.2,11.757,19.2L11.757,19.2z M16.038,10.735c-0.227,0.324-0.778,0.746-1.427,1.265l-0.714,0.519
			c-0.389,0.324-0.649,0.616-0.746,0.908c-0.065,0.227-0.097,0.292-0.097,0.746v0.13h-2.789v-0.227
			c0.032-0.973,0.065-1.524,0.454-2.011c0.616-0.746,2.011-1.622,2.076-1.654c0.195-0.162,0.357-0.324,0.486-0.486
			c0.292-0.389,0.422-0.714,0.422-1.038c0-0.422-0.13-0.843-0.389-1.2S12.6,7.168,11.951,7.168c-0.649,0-1.103,0.195-1.395,0.649
			s-0.422,0.908-0.422,1.395v0.13H7.281v-0.13C7.346,7.459,7.995,6.195,9.13,5.449c0.746-0.454,1.654-0.714,2.692-0.714
			c1.395,0,2.562,0.324,3.47,1.005c0.941,0.681,1.395,1.686,1.395,2.984C16.719,9.405,16.492,10.086,16.038,10.735L16.038,10.735z"
			/>
</svg>                       
</a>

SCSS

.link-to-svg {
  display: inline-block;
  width: 50px;
  .st0 {
    fill: #d9d9d9;
    
  }
  &:hover .st0 {
    fill:url(#g1);
  }
}

JavaScript

/*

Ответ на вопрос: https://toster.ru/q/427047

*/