JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var svg = d3.select('body')
.append('svg')
.attr('viewBox', '0 0 100 100');

d3.xml('<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"><g id="Task" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd"><g id="New-Task-cards-states" transform="translate(-1908.000000, -884.000000)" fill="#0E0E0E">                          <g id="Route---search-Copy-2" transform="translate(1523.000000, 812.000000)">                              <g id="input-1" transform="translate(0.000000, 49.000000)">                                  <g id="cross" transform="translate(376.000000, 14.000000)">                                      <g id="cross_small" transform="translate(9.000000, 9.000000)">                                          <polygon className="symbol" id="Page-1" points="8.485 0.00048 4.95 3.53548 1.414 0.00048 0 1.41448 3.535 4.94948 0 8.48548 1.414 9.89948 4.95 6.36448 8.485 9.89948 9.899 8.48548 6.364 4.94948 9.899 1.41448"></polygon>                                      </g>                                  </g>                              </g>                          </g>                      </g>                  </g>              </svg>')
.mimeType("image/svg+xml")
.get(function(error, xml) {
		if (error) throw error;
		var importedNode = xml.documentElement;
		svg.node().appendChild(importedNode);
});