JSFiddle - React, Tailwind, and code Playground

by petroveg

CSS

.main {
	display: none;
}
.icon {
	width: 100px;
	height: 100px;
}

JavaScript

var NS = 'http://www.w3.org/2000/svg',
	NSL = 'http://www.w3.org/1999/xlink',
	svg = [
		{
			name: 'svg',
			attr: {
				'class': 'main'
			},
			children: [
				{
					name: 'symbol',
					attr: {
						id: 'square',
						viewBox: '0 0 100 100'
					},
					children: [
						{
							name: 'rect',
							attr: {
								x: 0,
								y: 0,
								width: 100,
								height: 100,
								fill: 'rgba(51,102,204,1)'
							}
						}
					]
				},
				{
					name: 'symbol',
					attr: {
						id: 'circle',
						viewBox: '0 0 100 100'
					},
					children: [
						{
							name: 'circle',
							attr: {
								cx: 50,
								cy: 50,
								r: 50,
								fill: 'rgba(51,204,102,1)'
							}
						}
					]
				}
			]
		},
		{
			name: 'svg',
			attr: {
				'class': 'icon'
			},
			children: [
				{
					name: 'use',
					attr: {
						'xlink:href': '#square'
					}
				}
			]
		},
		{
			name: 'svg',
			attr: {
				'class': 'icon'
			},
			children: [
				{
					name: 'use',
					attr: {
						'xlink:href': '#circle'
					}
				}
			]
		}
	];

svg.forEach(function (element) {
	document.body.appendChild(createSVG(element));

	function createSVG (elem) {
		var svgElement = document.createElementNS(NS, elem.name);

		if (elem.attr) {
			Object.keys(elem.attr).forEach(function (value) {
				if (value.indexOf('xlink') < 0) {
					svgElement.setAttribute(value, elem.attr[value]);
				} else {
					svgElement.setAttributeNS(NSL, value, elem.attr[value]);
				}
			});
		}

		if (elem.children) {
			elem.children.forEach(function (value) {
				svgElement.appendChild(createSVG(value));
			});
		}

		return svgElement;
	}
});