Javascript 当SVG元素保存在变量中时，如何显示它？

我在显示保存在js变量中的svg元素时遇到问题。在我从后端请求svg作为字符串值保存的情况下，需要这样做。然后，来自后端的响应被保存为：

let svgValue =  "<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
    <style type="text/css">
    .st0{fill:#FFFFFF;}
    </style>
    <g id="Layer_3">
    </g>
    <path class="st0" d="M1.9,0v30h10.7v-5.5h4.5V30h10.7V0H1.9z M10,22H5.5v-5H10V22z M10,15H5.5v-5H10V15z M10,8H5.5V3H10V8z M17.1,22
    h-4.5v-5h4.5V22z M17.1,15h-4.5v-5h4.5V15z M17.1,8h-4.5V3h4.5V8z M24.2,22h-4.5v-5h4.5V22z M24.2,15h-4.5v-5h4.5V15z M24.2,8h-4.5
    V3h4.5V8z"/>
</svg>
";

让svgValue=”
.st0{fill:#FFFFFF；}
";

说到这里，我想使用这个SVG并在我的页面上显示图标。出于公司原因，我无法向您显示屏幕截图，但基本上，我希望将值标记为HTML，如下所示：

<><div>{svgValue}</div></>

{svgValue}

我已经试过了，但是由于某种原因，图标没有显示出来。我不确定我做错了什么，所以如果你们能告诉我这里发生了什么，那就太好了

---

编辑：其他信息：我也在使用React框架。它要求我添加一个数组。这有点过分，但我无法逃避

您必须使用tag或tag来显示svg图像。 而不是

<div>{svgValue}</div>

{svgValue}

写

<div>
  <img src={svgValue} />
</div>

Hmm，我尝试过这个解决方案，但可能是因为我使用的是react，所以我遇到了以下错误：

'react-dom.development.js:55未捕获不变冲突：对象作为react子对象无效（找到：[object HTMLSpanElement]）。如果要呈现子对象的集合，请改用数组。

如果有一个后端端点返回svg

GET path/to/svg/generating/endpoint

，则可以尝试使用

而不是手动请求数据。