JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.2/d3.min.js"></script>

JavaScript

function task_parking(nameOfClass) { return 	<svg  viewBox="0 0 22 22" width="22" className = {nameOfClass}>
                            <path fill="#FFF" className="back" d="M4 20.5c-1.4 0-2.5-1.1-2.5-2.5V4c0-1.4 1.1-2.5 2.5-2.5h14c1.4 0 2.5 1.1 2.5 2.5v14c0 1.4-1.1 2.5-2.5 2.5H4z" />
                            <path fill= '#739eff' className="border" d="M18 2c1.1 0 2 0.9 2 2v14c0 1.1-0.9 2-2 2H4c-1.1 0-2-0.9-2-2V4c0-1.1 0.9-2 2-2H18M18 1H4C2.3 1 1 2.3 1 4v14c0 1.7 1.3 3 3 3h14c1.7 0 3-1.3 3-3V4C21 2.3 19.7 1 18 1L18 1z"/>
                            <path fill= '#739eff' className="symbol" d="M12 7h-2H8v6 2h2v-2h2c1.1 0 3-1.1 3-3S13.1 7 12 7zM12 11h-2V9h2c0 0 1 0.2 1 1S12 11 12 11z" />
                          </svg>
                          }
var svg = d3.select('body')
.append('svg')
.attr('viewBox', '0 0 100 100');

d3.xml(task_parking('nameOfClass'))
.mimeType("image/svg+xml")
.get(function(error, xml) {
		if (error) throw error;
		var importedNode = xml.documentElement;
		svg.node().appendChild(importedNode);
});