vidstack/dist/server/icons/component.js

Build awesome media experiences on the web.

import { $$_ssr, $$_inject_html } from 'maverick.js/ssr';
import { signal, peek } from 'maverick.js';
import { defineElement, Component } from 'maverick.js/element';
import { paths, lazyPaths } from 'media-icons';

const $$_templ = ['<!$><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 {
  constructor() {
    super(...arguments);
    this._hydrate = false;
    this._paths = signal("");
  }
  onAttach(el) {
    {
      const type = this.$props.type();
      if (type && paths[type])
        this._paths.set(paths[type]);
      return;
    }
  }
  _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 $$_ssr($$_templ, $$_inject_html(this._paths()));
  }
}
Icon.el = defineElement({
  tagName: "media-icon",
  props: { type: void 0 }
});

export { Icon as I };