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');

svg.html(task_parking('test'));