JSFiddle - React, Tailwind, and code Playground

by qfox

HTML

<div style="color: darkred;"><svg><use xlink:href="#circle" /></svg></div>
<div style="color: skyblue;"><svg><use xlink:href="#circle" /></svg></div>
<div style="color: green;"><svg><use xlink:href="#circle" /></svg></div>
<div style="color: orange;"><svg><use xlink:href="#icon-phone" /></svg></div>
<div style="color: purple;"><svg><use xlink:href="#icon-phone" /></svg></div>

<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="circle">
        <ellipse cx="25px" cy="25px" rx="20px" ry="20px" />
    </g>
    <g id="icon-phone">
        <path class="path1" d="M22 20c-2 2-2 4-4 4s-4-2-6-4-4-4-4-6 2-2 4-4-4-8-6-8-6 6-6 6c0 4 4.109 12.109 8 16s12 8 16 8c0 0 6-4 6-6s-6-8-8-6z"></path>
    </g>
</defs></svg>

CSS

div {
    width: 50px;
    height: 50px;
}
div svg {
    fill: currentColor;
}