vue-icomoon/dist/vue-icomoon.es.js

It allows you to simply view the icons in the selection.json file provided by Icomoon.

import { toRefs, computed, ref, watchEffect, openBlock, createElementBlock, mergeProps, Fragment, renderList, toDisplayString, createCommentVNode } from "vue";
var _export_sfc = (sfc, props) => {
  for (const [key, val] of props) {
    sfc[key] = val;
  }
  return sfc;
};
const _sfc_main = {
  name: "Icomoon",
  props: {
    iconSet: {
      type: Object,
      required: true
    },
    icon: {
      type: String,
      default: null
    },
    name: {
      type: String,
      required: true
    },
    title: {
      type: String,
      default: null
    },
    color: {
      type: String,
      default: ""
    },
    size: {
      type: [String, Number],
      default: 16
    },
    disableFill: {
      type: Boolean,
      default: false
    },
    removeInitialStyle: {
      type: Boolean,
      default: false
    },
    style: {
      type: Object,
      default: {}
    }
  },
  setup(props) {
    const {
      iconSet,
      icon,
      name,
      size,
      title,
      disableFill,
      removeInitialStyle
    } = toRefs(props);
    const initialStyle = {
      display: "inline-block",
      stroke: "currentColor",
      fill: "currentColor"
    };
    const iconName = computed(() => icon.value || name.value);
    const currentIcon = computed(() => iconSet.value.icons.find((item) => item.properties.name === iconName.value));
    if (!currentIcon.value)
      return {};
    const viewBox = computed(() => `0 0 ${currentIcon.value.icon.width || "1024"} 1024`);
    const style = ref({
      ...removeInitialStyle.value ? {} : initialStyle
    });
    watchEffect(() => {
      if (size.value) {
        style.value.width = size.value;
        style.value.height = size.value;
      }
    });
    const paths = computed(() => currentIcon.value.icon.paths.map((path, index) => {
      const attrs = currentIcon.value.icon.attrs ? currentIcon.value.icon.attrs[index] : null;
      const pathProps = {
        d: path,
        ...!disableFill.value && attrs ? attrs : {}
      };
      return pathProps;
    }));
    return {
      currentIcon,
      viewBox,
      style,
      paths
    };
  }
};
const _hoisted_1 = ["viewBox"];
const _hoisted_2 = ["d"];
const _hoisted_3 = { key: 0 };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return $setup.currentIcon ? (openBlock(), createElementBlock("svg", mergeProps({
    key: 0,
    viewBox: $setup.viewBox,
    style: $setup.style
  }, { style: $setup.style, color: $props.color }), [
    (openBlock(true), createElementBlock(Fragment, null, renderList($setup.paths, ({ d, ...attrs }, index) => {
      return openBlock(), createElementBlock("path", mergeProps({
        d,
        key: index
      }, attrs), null, 16, _hoisted_2);
    }), 128)),
    $props.title ? (openBlock(), createElementBlock("title", _hoisted_3, toDisplayString($props.title), 1)) : createCommentVNode("", true)
  ], 16, _hoisted_1)) : createCommentVNode("", true);
}
var Icomoon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
const iconList = (iconSet) => {
  if (iconSet && Array.isArray(iconSet.icons)) {
    return iconSet.icons.map((icon) => icon.properties.name);
  }
  return null;
};
export { Icomoon, iconList };