как отобразить значок svg в nuxt 3

Я использую nuxt 3 и Compositions API. У меня получается такая вложенность как на скрине ниже, как избавиться от лишнего тега svg? Я также хотел бы получить атрибуты svg по возможности и изменить, например fill

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

Sctipt Setup

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,
  });
};

Я пытался создать виртуальное дерево 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 важна для меня, поэтому я не могу использовать стандартные инструменты