JSFiddle - React, Tailwind, and code Playground

CHANGING SVG FILL ATTRIBUTE WITH JS

by Andrew Pougher

HTML

<div class="jumbotron">ICON COLOR CHANGE<span id="test"></span>
</div>
<div class="btn-group"><button data-color="cc11ff" class="btn btn-xs btn-default">red</button>
<button data-color="b0aaff" class="btn btn-xs btn-default">blue</button></div>

JavaScript

$(function() {
  function colorizeShape(newIMG) {
    $('#test').html('<svg width="97" height="100" xmlns="http://www.w3.org/2000/svg"><path d="m37.674,54.126c7.482,0 10.953,5.679 11.683,13.745c0.174,1.93 -0.008,4.743 -0.255,8.001c-0.841,10.825 -1.808,24.128 5.4,24.128c6.096,0 9.228,-11.695 11.035,-25.027c1.745,-13.197 -0.103,-19.765 0.806,-25.625c1.73299,-11.103 11.425,-21.058 8.431,-35.214c-1.658,-7.853 -5.982,-11.547 -10.266,-13.1c-9.868,-3.592 -16.239,3.329 -26.834,3.329s-16.966,-6.921 -26.839,-3.329c-4.28,1.553 -8.604,5.247 -10.266,13.1c-2.99,14.156 6.698,24.111 8.435,35.214c0.908,5.86 -0.939,12.427 0.806,25.625c1.807,13.331 4.94,25.027 11.035,25.027c7.205,0 6.242,-13.303 5.4,-24.127c-0.248,-3.258 -0.428,-6.071 -0.255,-8.001c0.727,-8.067 4.244,-13.746 11.684,-13.746z"/></svg>')
  }
  
  

  $('button[data-color]').click(function() {
 var color = $(this).data('color');
 var svg =   $("#test").find('svg')[0];
   // svg.removeAttribute('fill');
     svg.setAttribute('fill', '#'+color);
     $(svg).find("path")[0].setAttribute('fill','#'+color);
     //svg.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
     //svg.setAttribute('preserveAspectRatio', 'xMinYMin meet')
       $('#test').empty();
      $('#test').html(svg)
     // alert(imCode)
 });
    colorizeShape("bla");

});