import { mergeProps, spread, insert, isServer, ssr, memo, template } from 'solid-js/web';
import { splitProps } from 'solid-js';

const _tmpl$ = /*#__PURE__*/template(`<svg stroke-width="0"></svg>`, 2),
  _tmpl$2 = /*#__PURE__*/template(`<title></title>`, 2);
const CustomIcon = props => IconTemplate(props.src, props);
function IconTemplate(iconSrc, props) {
  const mergedProps = mergeProps(iconSrc.a, props);
  const [_, svgProps] = splitProps(mergedProps, ["src"]);
  return (() => {
    const _el$ = _tmpl$.cloneNode(true);
    spread(_el$, mergeProps({
      get stroke() {
        return iconSrc.a?.stroke;
      },
      get color() {
        return props.color || "currentColor";
      },
      get fill() {
        return props.color || "currentColor";
      },
      get style() {
        return {
          ...props.style,
          overflow: "visible"
        };
      }
    }, svgProps, {
      get height() {
        return props.size || "1em";
      },
      get width() {
        return props.size || "1em";
      },
      get innerHTML() {
        return iconSrc.c;
      },
      "xmlns": "http://www.w3.org/2000/svg"
    }), true, true);
    insert(_el$, () => isServer && ssr(iconSrc.c), null);
    insert(_el$, (() => {
      const _c$ = memo(() => !!props.title);
      return () => _c$() && (() => {
        const _el$2 = _tmpl$2.cloneNode(true);
        insert(_el$2, () => props.title);
        return _el$2;
      })();
    })(), null);
    return _el$;
  })();
}

export { CustomIcon, IconTemplate };
