JSFiddle - React, Tailwind, and code Playground

by KirillMetrik

HTML

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 42 42" style="enable-background:new 0 0 29.8 29.8;" xml:space="preserve">
     
<g id="back">
<circle cx="21" cy="21" r="18" style="opacity:1; fill:#000000" stroke="#{{frameColor}}"/>
</g>

  <!-- icon -->
<g id="icon" style="fill:#FFFFFF" transform="rotate(10 21 21)">
<path d="M26.82,26.15l-2.64-6.23l-2.59-6.09c-0.23-0.53-0.98-0.53-1.2,0l-2.57,6.09l-2.64,6.23
	c-0.22,0.51,0.26,1.04,0.79,0.88L21,25.5l5.03,1.52C26.56,27.19,27.04,26.66,26.82,26.15z"/>
</g>

    

</svg>