JSFiddle - React, Tailwind, and code Playground

by Bart Kalisz

HTML

<div class="svg-bg-test">

</div>

<div>
  <svg class="icon-play">
    <use xlink:href="#play" />    
  </svg>
</div>



<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="play" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
    <path d="M0 0h24v24H0V0z" fill="none" />
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" />
  </symbol>
</svg>

CSS

.svg-bg-test {
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' class='icon-play'%3E%3Cuse xlink:href='%23play' /%3E%3C/svg%3E");
  background-size: 100%;
  width: 100px;
  height: 100px;
}