JSFiddle - React, Tailwind, and code Playground

by Kikketer

HTML

<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="icon-chevron-down" viewBox="0 0 20 20">
      <title>chevron-down</title>
      <path
          d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path>
    </symbol>
    </defs>
    </svg>
<div id="dynamic-svg"></div>

<svg style="width: 100px; height: 100px; border: 1px solid orange; display: inline-block">
  <use xlink:href="#icon-chevron-down"></use>
</svg>

JavaScript

let nsSvg = document.createElement('svg')
let use = document.createElementNS('http://www.w3.org/2000/svg', 'use')
use.setAttributeNS('http://www.w3.org/1999/xlink','href','#icon-chevron-down')
nsSvg.style.width = '100px'
nsSvg.style.height = '100px'
nsSvg.style.border = '1px solid black'
nsSvg.style.display = 'inline-block'
nsSvg.appendChild(use)

document.querySelector('#dynamic-svg').appendChild(nsSvg)