JSFiddle - React, Tailwind, and code Playground

by Mi_Creativity

JavaScript

var icons = {
    facebook: '//i.stack.imgur.com/nSN7W.png',
    twitter: '//i.stack.imgur.com/PVXfN.png',
    youtube: '//i.stack.imgur.com/0gsM1.png',
  };
  
// call the function
replaceSVG();
  
// the replacement is automated, for each outer div which
// has class of .svgContainers, the function take the value
// of each div.svgContaienr, and replace the div svg with 
// a png image depending on the id value of the container div
// it grabs the corresponding picture from icons.
function replaceSVG() {
  var SVGs = document.getElementsByClassName('svgContainers');
  for (var i = 0; i < SVGs.length; i++) {
    var theID = SVGs[i].getAttribute('id');
    SVGs[i].innerHTML = '<img class="svgReplacements" src="' + icons[theID] + '">'
  }
}