JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="sheet" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1" width="600" height="600">
    <symbol id="gclef" viewBox="0 0 2048 2048">
        <g transform="scale(1,-1)">
            <path d="M999 -403q219 94 220 309v22q-7 129 -103 219t-225 91h-8q73 -401 116 -641zM176 33v-17q4 -127 66 -221q102 -156 347 -215q95 -22 184 -22t138 16l-110 655q-242 -41 -242 -233v-21q2 -57 51 -121t83 -80q34 -15 34 -38q0 -32 -71 -8q-71 26 -132 98t-86 174
q-12 43 -12 90q0 137 95 255t235 159l-51 319q-155 -115 -261 -219t-187 -256t-81 -315zM698 1416q0 -81 2 -93t19 -111q334 252 371 510q4 33 4 45q0 78 -40 121q-41 43 -96 43q-76 -4 -138 -97t-92 -215t-30 -203zM279 -1012q0 62 8 62q8 70 61 119t125 53h14
q81 0 141 -56t68 -139v-14q0 -68 -40 -120t-103 -73q-4 -2 -51 -12q-18 -8 -19 -16q0 -10 19 -23q57 -41 170 -41h39q49 0 100 20t85 54t62 102t27 146q0 78 -12 155l-47 287h-11q-59 -8 -167 -8q-245 0 -462 139q-112 72 -193 218t-81 358q0 314 287 622q96 104 167 169
t185 163l-24 129q-14 100 -15 209q0 279 92 489t240 277q8 -2 22 -9q14 -8 56 -56q41 -48 76 -130q88 -205 88 -393q0 -418 -414 -801q17 -74 66 -350q8 4 26 4h23q197 0 342 -136t157 -335v-28q0 -169 -99 -303t-273 -199l51 -305q12 -76 12 -166t-35 -176
q-35 -84 -93 -128q-111 -84 -234 -92l-47 -2q-311 0 -375 225q-14 49 -14 111z"></path>
        </g>
    </symbol>
    <g class="measure">
        <circle cx="100" cy="132.5" r="2" fill="red"></circle>
        <use xlink:href="#gclef" x="100" y="132.5" width="25pt" height="25pt"></use>
    </g>
</svg>