JSFiddle - React, Tailwind, and code Playground

by ebottos

HTML

<!-- INLINE SVG -->
<div class="circle">
  <div class="icon-container">
    <svg class="icon" width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path class="icon" d="M6.22211 0H1.2035C0.541576 0 0 0.586592 0 1.30354V5.69646C0 6.41341 0.541576 7 1.2035 7H6.22211C6.88404 7 7.42561 6.41341 7.42561 5.69646V1.30354C7.42561 0.573557 6.88404 0 6.22211 0Z" fill="black"/>
    <path d="M9.90482 0.808213C9.96499 0.769107 10.0372 0.730001 10.1094 0.716966C10.5788 0.599648 11 0.990708 11 1.47302V5.50095C11 5.64433 10.9639 5.77469 10.9037 5.89201C10.6991 6.27003 10.2659 6.40039 9.91685 6.17879L8.02736 5.0056V1.9814L9.90482 0.808213Z" fill="black"/>
    </svg>
  </div>
</div>

<br/>
<br/>
<br/>
<!-- EXTERNAL TO INLINE SVG (via javascript) -->
<div class="circle">
<div class="icon-container">
  <img class="svg icon" src="https://fantribe-prod.s3.ap-southeast-2.amazonaws.com/tiles/live_game_icon.svg?id=343" />
</div>
</div>

CSS

.icon{
  width: 100px;
  height: 100px;
}
.icon path{
  fill: #FF8300;
}

.icon-container{
  text-align: center;
  top: 25px;
  position: relative;
}

.circle{
  background-color: #FF830080;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  border-radius: 9999px;
}

JavaScript

(document.querySelectorAll('img.svg').forEach(function(img){
    var imgID = img.id;
    var imgClass = img.className;
    var imgURL = img.src;

    fetch(imgURL).then(function(response) {
        return response.text();
    }).then(function(text){
        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(text, "text/xml");
        var svg = xmlDoc.getElementsByTagName('svg')[0];
        if(typeof imgID !== 'undefined') {
            svg.setAttribute('id', imgID);
        }
        if(typeof imgClass !== 'undefined') {
            svg.setAttribute('class', imgClass+' replaced-svg');
        }
        svg.removeAttribute('xmlns:a');
        if(!svg.getAttribute('viewBox') && svg.getAttribute('height') && svg.getAttribute('width')) {
            svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
        }
        img.parentNode.replaceChild(svg, img);
    });
}))();