JSFiddle - React, Tailwind, and code Playground

HTML

<div class="change-opacity-svg">
    <svg id="Capa_1" data-name="Capa 1" height="40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61.2 60.64"><defs></defs><title>google+</title><path class="google-plus-1" d="M30.6,2.45A27.92,27.92,0,1,0,58.52,30.37,27.92,27.92,0,0,0,30.6,2.45ZM33.22,37.9c-3.24,4.56-9.74,5.89-14.81,3.93a13,13,0,0,1,4.72-25.16,13.2,13.2,0,0,1,8.7,3.21,46.8,46.8,0,0,1-3.3,3.42c-3-2-7.17-2.63-10.13-.27A8.33,8.33,0,0,0,18,36c4,3.59,11.44,1.81,12.54-3.69-2.48,0-5,0-7.45-.08,0-1.48,0-3,0-4.44,4.15,0,8.29,0,12.45,0C35.82,31.31,35.36,35,33.22,37.9Zm14.33-4.76v3h-4v-3h-3v-4h3v-3h4v3h3v4h-3Z"/></svg>
</div>

CSS

.google-plus-1{
	fill:#dc4e41;
}
.change-opacity-svg:hover{
	opacity:0.6;
}