JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.minicolors/2.1.2/jquery.minicolors.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.minicolors/2.1.2/jquery.minicolors.css">
<p>Click on the image to add it to the canvas.</p>
<div id="images">
  <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="208.000000pt" height="300.000000pt" viewBox="0 0 208.000000 300.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)" fill="#161616" stroke="none">
<path class="node" id="node1" d="M1523 2911 c-30 -14 -48 -31 -62 -60 -39 -75 -22 -308 34 -476 9 -27
39 -90 65 -140 68 -125 109 -244 117 -330 7 -87 -7 -134 -50 -171 -46 -39 -83
-29 -260 68 -83 47 -170 92 -192 100 -122 47 -296 48 -408 4 -35 -15 -82 -26
-104 -26 -54 0 -188 -35 -231 -60 -35 -21 -35 -21 -56 -1 -40 37 -105 56 -201
56 -50 0 -103 -4 -119 -8 -27 -8 -28 -10 -23 -49 8 -62 64 -163 119 -214 53
-50 130 -88 195 -99 35 -6 43 -11 43 -28 0 -12 9 -38 19 -57 11 -19 24 -45 30
-57 11 -25 83 -76 125 -90 27 -8 31 -16 47 -89 l17 -79 -23 -23 c-43 -43 -45
-102 -6 -237 16 -55 36 -154 45 -220 9 -66 21 -144 26 -174 6 -30 10 -82 10
-116 0 -64 24 -115 55 -115 7 0 20 -17 28 -38 9 -22 26 -43 42 -50 32 -15 311
-17 320 -2 11 18 -44 41 -125 54 -149 24 -179 68 -234 345 -40 202 -40 212
-20 439 6 65 9 74 30 83 14 5 50 25 81 45 38 24 63 34 78 30 l23 -6 -20 -52
c-13 -33 -22 -87 -25 -143 l-5 -90 45 -95 c46 -97 105 -273 152 -459 31 -123
39 -141 64 -141 10 0 42 -16 70 -35 57 -40 120 -56 166 -43 17 5 64 7 105 6
69 -3 75 -1 78 18 5 33 -30 55 -105 64 -95 12 -179 46 -209 85 -33 43 -84 157
-135 300 -37 105 -43 133 -47 228 -2 59 -9 110 -13 113 -5 3 -9 23 -9 46 0 41
46 143 79 172 17 16 168 23 228 10 85 -17 155 33 209 151 22 51 39 74 56 80
l23 8 -22 4 c-48 9 -18 80 57 136 57 42 116 127 137 196 17 58 17 200...

CSS

canvas {
  border: 1px solid #000;
}

JavaScript

var canvas = new fabric.Canvas('testCanvas', {
    hoverCursor: 'pointer',
    selection: true,
});
  
$(document).ready(function() {

	// Replace each image by its SVG code
  // NOTE: No need for this here, since jsfiddle won't accept the svg file from another domain
	/* $('img[src$=".svg"]').each(function(){
	    var $img = $(this),
	        imgURL = $img.attr('src'),
	        attributes = $img.prop('attributes');
	
	    $.get(imgURL, function(data) {
	      // Get the SVG tag, ignore the rest
	      var $svg = $(data).find('svg');
	      // Remove any invalid XML tags as per http://validator.w3.org
	      $svg = $svg.removeAttr('xmlns:a');
	      // Make sure that every attribute was copied
	      $.each(attributes, function() {
	        $svg.attr(this.name, this.value);
	      });
	      // Replace image with new SVG
	      $img.replaceWith($svg);
	    }, 'xml');
	  }); */
  
  // Load the SVG to the canvas when it gets clicked on
  $('#images').on('click', 'svg', function() {
    var serializer = new XMLSerializer(),
        svgStr = serializer.serializeToString(this);

    fabric.loadSVGFromString(svgStr,function(objects, options) {
      options.id = this.id;
      var obj = fabric.util.groupSVGElements(objects, options);

      canvas.add(obj);

      obj.scaleToHeight(127) // Scales it down to some small size
        .scaleToWidth(90)
        .center() // Centers it (no s**t, Sherlock)
        .setCoords();

      canvas.setActiveObject(obj).renderAll();
    });
  });
  
  // Link our minicolor input to our canvas object
  $('#image-color').minicolors({
      change: setImageColor,
      position: 'top right'
  });
});

function setImageColor() {
	var activeObject = canvas.getActiveObject(),
  		color = $(this).val();
      
  console.log(color) // test
	activeObject.paths.forEach(function(path) {path.fill = color});
  canvas.renderAll();
}