JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wr">
  <div class="item"><img class="icon icon--1" src="https://image.flaticon.com/icons/svg/126/126516.svg"></div>
  <div class="item"><img class="icon icon--2" src="https://image.flaticon.com/icons/svg/126/126490.svg"></div>
  <div class="item"><img class="icon icon--3" src="https://image.flaticon.com/icons/svg/126/126482.svg"></div>
</div>

CSS

.wr {
  display: flex;
  justify-content: space-around;
}
.icon {
  width: 100%;
  fill: #000;
}

.icon--1:hover path {
  fill: #ff0000;
  transition: all .2s ease;
}
.icon--2:hover path {
  fill: #0000ff;
  transition: all .2s ease;
}
.icon--3:hover path {
  fill: #00ff00;
  transition: all .2s ease;
}

JavaScript

$(document).ready(function(){

        jQuery('img[src*=".svg"]').each(function(){
            var $img = jQuery(this);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');

            jQuery.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find('svg');

                // Add replaced image ID to the new SVG
                if(typeof imgID !== 'undefined') {
                    $svg = $svg.attr('id', imgID);
                }
                // Add replaced image classes to the new SVG
                if(typeof imgClass !== 'undefined') {
                    $svg = $svg.attr('class', imgClass+' replaced-svg');
                }

                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');

                // Replace image with new SVG
                $img.replaceWith($svg);

            }, 'xml');

        });

});