JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fox_btn play">
    <svg width="100%" height="100%" viewBox="0 0 46 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="ytp-2" d="M 11 10 L 18 13.74 L 18 22.28 L 11 26 M 18 13.74 L 26 18 L 26 18 L 18 22.28"></path></defs><use xlink:href="#ytp-2" class="ytp-svg-shadow"></use><use xlink:href="#ytp-2" class="ytp-svg-fill"></use></svg>
</div>

CSS

.fox_btn {
    background: transparent;
    width: 86px;
    height: 86px;
}

body { background: #000; }

.ytp-svg-shadow {
  stroke: rgba(0,0,0,.15);
  stroke-width: 2px;
    fill: none;
}

.ytp-svg-fill {
  fill: #fff;
  	transition:         fill 725ms ease;
}

.fox_btn:hover .ytp-svg-fill {
    fill: #ffbf2c;
}

JavaScript

var play = '<svg width="100%" height="100%" viewBox="0 0 46 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="ytp-2" d="M 11 10 L 18 13.74 L 18 22.28 L 11 26 M 18 13.74 L 26 18 L 26 18 L 18 22.28"><animate attributeType="XML" attributeName="d" fill="freeze" from="M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26" to="M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28" dur="0.2s" keySplines=".4 0 1 1" repeatCount="1"></animate></path></defs><use xlink:href="#ytp-2" class="ytp-svg-shadow"></use><use xlink:href="#ytp-2" class="ytp-svg-fill"></use></svg>';

var paus = '<svg width="100%" height="100%" viewBox="0 0 46 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="ytp-2" d="M 11 10 L 17 10 L 17 26 L 11 26 M 20 10 L 26 10 L 26 26 L 20 26"><animate attributeType="XML" attributeName="d" fill="freeze" from="M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28" to="M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26" dur="0.2s" keySplines=".4 0 1 1" repeatCount="1"></animate></path></defs><use xlink:href="#ytp-2" class="ytp-svg-shadow"></use><use xlink:href="#ytp-2" class="ytp-svg-fill"></use></svg>';

var svg = $('.fox_btn');

//svg.empty().append(play); 

$('.fox_btn').on('click', function() {
    
    if($(this).hasClass('play')) {
          svg.empty().append(paus); 
    } else {
        svg.empty().append(play); 
    }
    
    $(this).toggleClass('play');
});