JSFiddle - React, Tailwind, and code Playground

by SSRRDD

HTML

<svg id="testSVG" viewBox="0 0 625 625" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;" class="style-scope yt-icon colourLikeButtonSVG">
  
<defs>
<path id="Unlike" d="M18.77,11h-4.23l1.52-4.94C16.38,5.03,15.54,4,14.38,4c-0.58,0-1.14,0.24-1.52,0.65L7,11H3v10h4h1h9.43 c1.06,0,1.98-0.67,2.19-1.61l1.34-6C21.23,12.15,20.18,11,18.77,11z M7,20H4v-8h3V20z M19.98,13.17l-1.34,6 C18.54,19.65,18.03,20,17.43,20H8v-8.61l5.6-6.06C13.79,5.12,14.08,5,14.38,5c0.26,0,0.5,0.11,0.63,0.3 c0.07,0.1,0.15,0.26,0.09,0.47l-1.52,4.94L13.18,12h1.35h4.23c0.41,0,0.8,0.17,1.03,0.46C19.92,12.61,20.05,12.86,19.98,13.17z" class="style-scope yt-icon"></path>

<path id="UnlikeModified" d="M7,20H4v-8h3V20z M19.98,13.17l-1.34,6 C18.54,19.65,18.03,20,17.43,20H8v-8.61l5.6-6.06C13.79,5.12,14.08,5,14.38,5c0.26,0,0.5,0.11,0.63,0.3 c0.07,0.1,0.15,0.26,0.09,0.47l-1.52,4.94L13.18,12h1.35h4.23c0.41,0,0.8,0.17,1.03,0.46C19.92,12.61,20.05,12.86,19.98,13.17z" class="style-scope yt-icon"></path>

<path id="Like" d="M3,11h3v10H3V11z M18.77,11h-4.23l1.52-4.94C16.38,5.03,15.54,4,14.38,4c-0.58,0-1.14,0.24-1.52,0.65L7,11v10h10.43 c1.06,0,1.98-0.67,2.19-1.61l1.34-6C21.23,12.15,20.18,11,18.77,11z" class="style-scope yt-icon"></path>
</defs>

<use xlink:href="#Like"/>

<!--
<path d="M3,11h3v10H3V11z M18.77,11h-4.23l1.52-4.94C16.38,5.03,15.54,4,14.38,4c-0.58,0-1.14,0.24-1.52,0.65L7,11v10h10.43 c1.06,0,1.98-0.67,2.19-1.61l1.34-6C21.23,12.15,20.18,11,18.77,11z" class="style-scope yt-icon"></path>
-->

<!--<path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />-->


<!--
<clipPath id="myClip" clipPathUnits="userSpaceOnUse"> 
 <use xlink:href="#testPath" />
</clipPath>
-->

<!--
<use clip-path="url(#myClip)" xlink:href="#testPath" fill="blue" />
-->

<!--<use clip-path="url(#myClip)" xlink:href="#heart" fill="blue" />-->


</svg>

CSS

svg
{
  fill: white;
  fill-rule: inherit;
  /*paint-order: stroke;*/
  stroke: black;
  stroke-width: 1px;
  filter: drop-shadow(0px 0px 5px cyan)
  /*clip-path: url(#testPath);*/
}

/* 
<!-- objectBoundingBox userSpaceOnUse-->
  <!--<use xlink:href="#testPath" />-->
*/