JSFiddle - React, Tailwind, and code Playground

HTML

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="myTest" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0"
	 viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#7F3F98;}
	.st1{fill:#E6E7E8;}
   
	#myTest:hover .st0{
	fill: #E6E7E8;
	}	
  #myTest:hover .st1 {
	fill: #7F3F98;
	}
  
    @media all and (max-width: 350px) {
        #myTest .st0 {
            opacity: 0;
        }
    }
  
</style>
<circle id="outer-circle" class="st0"                cx="200" cy="200" r="170.1"/>

<path id="icon" class="st1" 

d="M211.2,211.2c-14.5,14.5-31.3,28.3-37.9,21.7c-9.5-9.5-15.4-17.8-36.3-0.9
	c-20.9,16.8-4.9,28,4.3,37.2c10.6,10.6,50.2,0.6,89.3-38.5c39.1-39.1,49.2-78.7,38.5-89.3c-9.2-9.2-20.4-25.3-37.2-4.3
	c-16.8,20.9-8.6,26.8,0.9,36.3C239.6,180,225.7,196.7,211.2,211.2"/>
  
<path id="inner-circle" class="st1" 

d="M200,334.7c-74.3,0-134.7-60.4-134.7-134.7S125.7,65.3,200,65.3S334.7,125.7,334.7,200
	S274.3,334.7,200,334.7z M200,72.6c-70.2,0-127.4,57.1-127.4,127.4c0,70.2,57.1,127.4,127.4,127.4c70.2,0,127.4-57.1,127.4-127.4
	C327.4,129.8,270.2,72.6,200,72.6z"/>
</svg>