maz-ui/dist/components/MazIcon.js

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import { defineComponent, ref, computed, onMounted, watchEffect, createElementBlock, createBlock, openBlock, mergeProps, resolveDynamicComponent, normalizeStyle, normalizeClass, nextTick } from "vue";
import { useInjectStrict } from "../composables/useInjectStrict.js";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazIcon.3HqpAIna.css';const _hoisted_1 = ["innerHTML"], _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "MazIcon",
  props: {
    icon: { type: [Function, Object] },
    src: {},
    path: {},
    name: {},
    size: {},
    title: {},
    transformSource: { type: Function, default: (svg) => svg }
  },
  emits: ["loaded", "unloaded", "error"],
  setup(__props, { emit: __emit }) {
    const emits = __emit, predefinedSizes = ["xs", "sm", "md", "lg", "xl"], cache = {}, svgElSource = ref(), svgElem = ref();
    function getMazIconPath() {
      try {
        return useInjectStrict("mazIconPath");
      } catch {
        return;
      }
    }
    const iconPath = computed(() => __props.path ?? getMazIconPath()), fullSrc = computed(() => {
      if (!__props.icon)
        return __props.src ? __props.src : iconPath.value ? `${iconPath.value}/${__props.name}.svg` : `/${__props.name}.svg`;
    });
    onMounted(() => {
      (__props.icon && __props.src || __props.icon && __props.name) && console.error('[maz-ui](MazIcon) you should provide "name" or "src" as prop'), !__props.icon && !__props.name && !__props.src && console.error('[maz-ui](MazIcon) you should provide "icon", "name" or "src" as prop');
    });
    function setTitle(svg, title) {
      const titleTags = svg.querySelectorAll("title");
      if (titleTags.length > 0)
        titleTags[0].textContent = title;
      else {
        const titleEl = document.createElementNS("http://www.w3.org/2000/svg", "title");
        titleEl.textContent = title, svg.append(titleEl);
      }
    }
    function filterAttrs(attrs) {
      return Object.keys(attrs).reduce((result, key) => (attrs[key] !== !1 && attrs[key] !== null && attrs[key] !== void 0 && (result[key] = attrs[key]), result), {});
    }
    function getSvgAttrs(svgEl) {
      const svgAttrs = {}, attrs = svgEl.attributes;
      if (!attrs)
        return svgAttrs;
      for (let i = attrs.length - 1; i >= 0; i--)
        svgAttrs[attrs[i].name] = attrs[i].value;
      return svgAttrs;
    }
    function getSvgContent(svgEl) {
      svgEl.cloneNode(!0);
      const svgElNode = __props.transformSource(svgEl);
      return __props.title && setTitle(svgElNode, __props.title), svgEl.innerHTML;
    }
    async function getSource(src) {
      cache[src] || (cache[src] = download(src));
      try {
        svgElSource.value = await cache[src], await nextTick(), emits("loaded", svgElem.value);
      } catch (error) {
        svgElSource.value && (svgElSource.value = void 0, emits("unloaded")), delete cache[src], emits("error", error);
      }
    }
    function download(url) {
      return new Promise((resolve, reject) => {
        const request = new XMLHttpRequest();
        request.open("GET", url, !0), request.addEventListener("load", () => {
          if (request.status >= 200 && request.status < 400)
            try {
              let svgEl = new DOMParser().parseFromString(request.responseText, "text/xml").querySelectorAll("svg")[0];
              svgEl ? (svgEl = __props.transformSource(svgEl), resolve(svgEl)) : reject(new Error('Loaded file is not valid SVG"'));
            } catch (error) {
              reject(error);
            }
          else
            reject(new Error("Error loading SVG"));
        }), request.addEventListener("error", (error) => reject(error)), request.send();
      });
    }
    const svgStyle = computed(() => {
      if (!(__props.size && predefinedSizes.includes(__props.size)))
        return {
          fontSize: __props.size
        };
    }), svgClasses = computed(() => {
      if (__props.size && predefinedSizes.includes(__props.size))
        return `m-icon--${__props.size}`;
    });
    return watchEffect(() => {
      fullSrc.value && getSource(fullSrc.value);
    }), (_ctx, _cache) => svgElSource.value ? (openBlock(), createElementBlock("svg", mergeProps({
      key: 0,
      ref_key: "svgElem",
      ref: svgElem,
      class: ["m-icon m-reset-css", svgClasses.value],
      width: "1em",
      height: "1em"
    }, {
      ...getSvgAttrs(svgElSource.value),
      ...filterAttrs(_ctx.$attrs)
    }, {
      style: svgStyle.value,
      innerHTML: getSvgContent(svgElSource.value)
    }), null, 16, _hoisted_1)) : (openBlock(), createBlock(resolveDynamicComponent(__props.icon), {
      key: 1,
      class: normalizeClass(["m-icon m-reset-css", svgClasses.value]),
      style: normalizeStyle(svgStyle.value)
    }, null, 8, ["class", "style"]));
  }
}), MazIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2f172666"]]);
export {
  MazIcon as default
};