vidstack/dist/dev/icons/component.js

Build awesome media experiences on the web.

import { $$_create_walker, $$_effect, $$_hydrating, $$_create_template } from 'maverick.js/dom';
import { signal, effect, peek } from 'maverick.js';
import { Component, defineElement } from 'maverick.js/element';
import { lazyPaths } from 'media-icons';

const $$_templ = /* @__PURE__ */ $$_create_template(`<!$><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-media-icon="true"></svg>`);
class Icon extends Component {
  static el = defineElement({
    tagName: "media-icon",
    props: { type: void 0 }
  });
  _hydrate = false;
  _paths = signal("");
  onAttach(el) {
    this._hydrate = el.hasAttribute("mk-h");
    effect(this._loadIcon.bind(this));
  }
  _loadIcon() {
    const type = this.$props.type();
    if (this._hydrate) {
      this._hydrate = false;
      return;
    }
    if (type && lazyPaths[type]) {
      lazyPaths[type]().then(({ default: paths2 }) => {
        if (type === peek(this.$props.type))
          this._paths.set(paths2);
      });
    } else {
      this._paths.set("");
    }
  }
  render() {
    return (() => {
      const [$$_root, $$_walker] = $$_create_walker($$_templ);
      $$_effect(() => {
        if (!$$_hydrating)
          $$_root.innerHTML = this._paths();
      });
      return $$_root;
    })();
  }
}

export { Icon as I };