JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="31.5" height="36" viewBox="0 0 31.5 36">
  <path id="Icon_awesome-paperclip" data-name="Icon awesome-paperclip" d="M3.041,32.776a11.016,11.016,0,0,1,.1-15.3L17.887,2.391a7.868,7.868,0,0,1,11.3,0,8.185,8.185,0,0,1,0,11.41L16.328,26.939a5.246,5.246,0,0,1-7.592-.07,5.449,5.449,0,0,1,.1-7.52L18.944,9.024a1.125,1.125,0,0,1,1.591-.017l1.607,1.574a1.125,1.125,0,0,1,.017,1.591L12.053,22.495a.951.951,0,0,0-.046,1.286.749.749,0,0,0,1.1.012L25.968,10.655a3.683,3.683,0,0,0,0-5.119,3.372,3.372,0,0,0-4.862,0L6.356,20.622a6.512,6.512,0,0,0-.084,9.022,6,6,0,0,0,8.653.02l12.1-12.375a1.125,1.125,0,0,1,1.591-.018l1.609,1.572a1.125,1.125,0,0,1,.018,1.591L18.142,32.81a10.491,10.491,0,0,1-15.1-.034Z" transform="translate(0 0)"/>
</svg>

CSS

svg {
  fill: black;
}

svg:hover {
    fill: red;
  }