how to render svg icon in nuxt 3

Question

I am using nuxt 3 and Compositions API.

I get such a nesting, how to get rid of the extra svg tag? I would also like to receive svg attributes whenever possible and change, for example, fill

template

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

Script

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 Dev Tools

I tried to create a virtual DOM tree and get an HTML element from there, not text, but I think this is a bad solution

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 support is important to me so I can't use standard tools