JSFiddle - React, Tailwind, and code Playground

by Nikolay Petrov

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="word">
	<path class="path1" d="M408,0H51C22.95,0,0,22.95,0,51v357c0,28.05,22.95,51,51,51h357c28.05,0,51-22.95,51-51V51C459,22.95,436.05,0,408,0z     M318.75,357H280.5l-51-191.25L178.5,357h-38.25l-61.2-255h43.35l38.25,191.25l51-191.25h35.7l51,191.25L336.6,102h43.351    L318.75,357z"></path>
</g>
<g id="word2">
	<path class="path1" d="M25.312,8.573l-4.387,13.315h-3.641l-2.503-7.717l-2.625,7.717  H8.525L4.431,8.573H8.16l2.385,8.604l2.908-8.604h2.834l2.706,8.604l2.597-8.604H25.312 M30,28.654H0V0h30V28.654z M2.883,25.771  h24.232V2.885H2.883"></path>
</g>


</defs>
</svg>

<h1>
  <svg viewBox="0 0 455 459">
    <use xlink:href="#word"></use>
  </svg>
  Call me
</h1>
<h1>
  <svg viewBox="0 0 30 30">
    <use xlink:href="#word2"></use>
  </svg>
  Call me
</h1>

CSS

h1:hover {
  color:red;
}
h1 {
  color: blue;
}
svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}