JSFiddle - React, Tailwind, and code Playground

by Евгений Беляков

HTML

<a class="mysvg" href="#">
  <svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill-rule="evenodd" d="M50.5 53.3c4.8 0 8.9-5.6 8.9-12.2s-4.1-12.2-8.9-12.2c-4.8 0-8.9 5.6-8.9 12.2s4.1 12.2 8.9 12.2zm9.9 5c-6.4 4.8-13 4.7-19.8 0l-9.9 2.8-2.3 6.8h44.2l-2.3-6.8-9.9-2.8zm-10.4-58.3c-27.6 0-50 22.4-50 50s22.4 50 50 50 50-22.4 50-50-22.4-50-50-50zm.5 25.7c6.7 0 12.2 6.9 12.2 15.4s-5.5 15.4-12.2 15.4c-6.7 0-12.2-6.9-12.2-15.4s5.5-15.4 12.2-15.4zm25.6 44.7c-.3.4-.8.7-1.3.7h-48.6c-.5 0-1-.2-1.3-.7-.3-.4-.4-1-.2-1.5l3.2-9.7c.2-.5.6-.9 1.1-1l11.3-3.2c.4-.1.8-.1 1.2.1 6 5 12 5.1 18 0 .4-.2.8-.2 1.2-.1l11.3 3.2c.5.1.9.5 1.1 1l3.2 9.7c.2.6.1 1.1-.2 1.5z"/></svg>
  <span>визитка</span>
</a>

CSS

body {background:#ccc;}
.mysvg {text-align:center; text-decoration:none; display:inline-block;}
.mysvg * {text-align:center; color:#fff; text-decoration:none; display:block;}

.mysvg svg {fill:#fff;}

.mysvg:hover svg {fill:#c00;}
.mysvg:hover span {color:#c00;}