import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef } from "react";
export function SvgIcon({ content, ...props }) {
    const containerRef = useRef(null);
    useEffect(() => {
        if (!containerRef.current)
            return;
        // Parse the SVG string
        const parser = new DOMParser();
        const doc = parser.parseFromString(content, 'image/svg+xml');
        const svgEl = doc.querySelector('svg');
        if (!svgEl) {
            console.warn('SvgIcon: No <svg> element found in provided string');
            containerRef.current.innerHTML = '';
            return;
        }
        // Apply all passed props to the SVG element
        props && Object.entries(props).forEach(([key, value]) => {
            if (value == null)
                return;
            const attrName = key === 'className' ? 'class' : key;
            svgEl.setAttribute(attrName, String(value));
        });
        // Clear and append the new SVG
        containerRef.current.innerHTML = '';
        containerRef.current.appendChild(svgEl);
    }, [content, props]);
    return _jsx("span", { ref: containerRef });
}
export function createSvgIcon(content) {
    const IconComponent = (props) => {
        return _jsx(SvgIcon, { content: content, ...props });
    };
    return IconComponent;
}
//# sourceMappingURL=SvgIcon.js.map