如何在NUXT 3中渲染SVG图标

Question

我正在使用NUXT 3和组成API。

我得到了这样的筑巢，如何摆脱额外的SVG标签？ 我也想尽可能地接收SVG属性并更改，例如，填充

模板

<template>
  <div>
    <component :is="render"></component>
  </div>
</template>

脚本

import { h } from "vue";

const { data, pending, error, refresh } = await useFetch(svgURL);

const getDataVal = data.value
const SvgToRaw = await getDataVal.text();

const render = () => {
  return h("svg", {
    class: "bar",
    innerHTML: SvgToRaw,
  });
};

chrome noreferrer“> chrome dev工具

我试图创建一个虚拟DOM树并从那里获得HTML元素，而不是文本，但我认为这是一个不好的解决方案

import hv from "virtual-dom/h";
import diff from "virtual-dom/diff";
import patch from "virtual-dom/patch";
import createElement from "virtual-dom/create-element";

const betaRender = hv("span", { innerHTML: svgString });
var rootNode = createElement(betaRender);
var patches = diff(rootNode);
return patches[0].vNode.innerHTML

SSR支持对我很重要，因此我无法使用标准工具