JSFiddle - React, Tailwind, and code Playground

by gotwo

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="icon-image" stroke='green'>
  <path class="path1" d="M0 4v26h32v-26h-32zM30 28h-28v-22h28v22zM22 11c0-1.7 1.3-3 3-3s3 1.3 3 3c0 1.7-1.3 3-3 3-1.7 0-3-1.3-3-3zM28 26h-24l6-16 8 10 4-3z"></path>
</g>
<g  id='radio-outer2' stroke='green'>
<circle id='radio-outer' cx='55' cy='22' r='15' stroke-width='2'/>
<circle id='radio-inner' cx='88' cy='16' r='8' stroke-width='2' fill='black'/>
</g>
</defs>
</svg>

<h1>
  Bild
  <svg>
    <use xlink:href="#icon-image"></use>
    <use xlink:href="#radio-outer"></use>
    <use xlink:href="#radio-outer2"  transform='translate(0 24)'></use>
    <use xlink:href="#radio-inner"></use>
  </svg>
</h1>

CSS

h1 {
  color: orange;
}

svg, #radio-outer {
  fill: currentColor;
  stroke: blue;
  vertical-align: top;
}