JSFiddle - React, Tailwind, and code Playground

by 3rror404

HTML

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <defs>
    <path id="svg-icon-person" class="st0" width="10" height="30" d="M5 6.6c1.8 0 3.2-1.5 3.2-3.3C8.2 1.5 6.8 0 5 0 3.3 0 1.8 1.5 1.8 3.3c0 1.8 1.5 3.3 3.2 3.3M7.7 7.5H2.2C1 7.5 0 8.5 0 9.8v6.6c0 1.1.8 2.1 1.8 2.3l.8 10c.1.7.7 1.3 1.4 1.3h2c.7 0 1.3-.6 1.4-1.3l.8-10c1.1-.2 1.9-1.2 1.9-2.3V9.8C10 8.6 9 7.5 7.7 7.5"/>
  </defs>
</svg>

<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 30"><use href="#svg-icon-person"></use></svg></span>
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 30"><use href="#svg-icon-person"></use></svg></span>
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 30"><use href="#svg-icon-person"></use></svg></span>
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 30"><use href="#svg-icon-person"></use></svg></span>
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 30"><use href="#svg-icon-person"></use></svg></span>
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 30"><use href="#svg-icon-person"></use></svg></span>

<svg style="display:none;">
  <symbol id="test">
      <rect x="10" y="10" width="100" height="100" /> 
  </symbol>
</svg>

<svg class="icon"><use xlink:href="#test" /></svg>

CSS

span svg {
  width: 10px;
  height: 30px;
}

span svg {
  fill: red;
}

/* .icon{
  fill:yellow;
} */