Import and animate svg

Import with d3.xml, appendChild to a group element, change the attributes from D3

HTML

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>

Babel + JSX

var dataset = [ 5, 10, 13, 19];

//Width and height
var w = 300;
var h = 300;

//Create SVG Element
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);
svg.append('g').append(task_parking())
function task_parking(nameOfClass) { return 	(<svg  viewBox="0 0 22 22" width="22" ><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>)
}