JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'>
</div>

JavaScript

function Circle(props) {
  const { size, color, text } = props
  return `data:image/svg+xml;utf8,
    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 44 44">
      <circle cx="22" cy="22" r="20" stroke="white" stroke-width="2" fill="${color?color:"black"}"/>
        <text id="val" font-size="${size}" fill="white" font-family="Verdana" text-anchor="middle" alignment-baseline="baseline" x="22" y="34.4"> ${text} </text>
    </svg>`
}

var container = document.getElementById('container')
for (var i = 1; i <= 10; i++) {
  var img = document.createElement('img')
	img.src= Circle({size: 32, color: 'red', text: i})
  container.appendChild(img)
}