JSFiddle - React, Tailwind, and code Playground

by lavezzi

JavaScript

const icon = '<svg id="hamburger-icon" viewBox="0 0 23 17"><path width="22" height="3" rx="1.5"/><path width="17" height="3" y="7" rx="1.5"/><path width="23" height="3" y="14" rx="1.5"/></svg>';
const fill = 'currentColor'

let svg = '<svg viewBox="0 0 20 20" width="20" height="20"></svg>'

const parser = new DOMParser();
const serializer = new XMLSerializer();

let parsed = parser.parseFromString(icon, 'image/svg+xml');
[...parsed.querySelectorAll('path')].forEach(path => path.setAttribute('fill', fill));
const content = parsed.documentElement.innerHTML;

svg = parser.parseFromString(svg, 'image/svg+xml');
/* symbol.appendChild(parsed.querySelector('svg')); */
svg.documentElement.innerHTML = content;

console.log(svg.documentElement);