<script>
import { h } from 'vue';

export default {
    name: 'px-svg-render',
    props: {
        svg: { type: String, default: null },
    },
    data() {
        return {
            mounted: false,
        };
    },
    mounted() {
        this.mounted = true;
    },
    render() {
        if (!this.svg || !this.mounted) {
            return null;
        }
        // create a template element and set its inner html to the svg content
        const template = document.createElement('template');
        template.innerHTML = this.svg?.trim();

        // extract the actual svg element
        const svgElement = template.content.firstChild;

        // convert the svg element to a vnode
        return h(svgElement.tagName, {
            innerHTML: svgElement.innerHTML,
            ...Array.from(svgElement.attributes).reduce((acc, attr) => {
                acc[attr.name] = attr.value;
                return acc;
            }, {}),
        });
    },
};
</script>
