@hhorg/icon - npm Package Compare versions

Comparing version 0.0.0 to 0.0.1

es/icon/index.js

@@ -1,59 +0,39 @@
-import IconSymbol from "./components/IconSymbol.js";
-import IconFont from "./components/IconFont.js";
-const __vue_sfc__ = {
-  name: "HhIcon",
-  components: {
-    IconSymbol,
-    IconFont
-  },
-  props: {
-    symbol: { type: String, required: true },
-    name: { type: String, required: true },
-    dot: { type: Boolean, default: false },
-    badge: { type: String || Number },
-    badgeMax: { type: Number },
-    size: { type: String || Number },
-    color: { type: String, default: "" }
+const HhIcon = {
+  install(app, options) {
+    const { url = "", css = "", js = "" } = options;
+    let linkUrl = "";
+    let scriptUrl = "";
+    if (url) {
+      if (url.endsWith(".css")) {
+        linkUrl = url;
+        scriptUrl = url.replace(".css", ".js");
+      } else {
+        linkUrl = url.replace(".js", ".css");
+        scriptUrl = url;
+      }
+    } else {
+      if (css)
+        linkUrl = css;
+      if (js)
+        scriptUrl = js;
+    }
+    if (linkUrl) {
+      const link = document.createElement("link");
+      link.setAttribute("rel", "stylesheet");
+      link.setAttribute("type", "text/css");
+      link.setAttribute("href", linkUrl);
+      document.head.appendChild(link);
+    }
+    if (scriptUrl) {
+      const script = document.createElement("script");
+      script.setAttribute("type", "text/javascript");
+      script.setAttribute("src", scriptUrl);
+      document.head.appendChild(script);
+    }
+    app.component("HhIcon", HhIcon);
   }
 };
-import { createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, openBlock as _openBlock, createBlock as _createBlock, mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment, createElementBlock as _createElementBlock } from "vue";
-function __vue_render__(_ctx, _cache) {
-  const _component_IconSymbol = _resolveComponent("IconSymbol");
-  const _component_IconFont = _resolveComponent("IconFont");
-  return _openBlock(), _createElementBlock(
-    _Fragment,
-    null,
-    [
-      _createCommentVNode(" \u591A\u8272\u56FE\u6807 "),
-      _ctx.symbol ? (_openBlock(), _createBlock(
-        _component_IconSymbol,
-        _normalizeProps(_mergeProps({ key: 0 }, _ctx.$props)),
-        null,
-        16
-        /* FULL_PROPS */
-      )) : (_openBlock(), _createElementBlock(
-        _Fragment,
-        { key: 1 },
-        [
-          _createCommentVNode(" \u5355\u8272\u56FE\u6807 "),
-          _createVNode(
-            _component_IconFont,
-            _normalizeProps(_guardReactiveProps(_ctx.$props)),
-            null,
-            16
-            /* FULL_PROPS */
-          )
-        ],
-        2112
-        /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-      ))
-    ],
-    2112
-    /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-  );
-}
-__vue_sfc__.render = __vue_render__;
-var stdin_default = __vue_sfc__;
+var stdin_default = HhIcon;
 export {
   stdin_default as default
 };

es/index.js

 import Icon from "./icon";
-const version = "0.0.0";
+const version = "0.0.1";
 function install(app) {
@@ -4,0 +4,0 @@ const components = [

lib/icon.cjs.js

 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const vue = require("vue");
-const IconSymbolSfc = "";
-const __vue_sfc__$2 = {
-  name: "IconSymbol",
-  props: {
-    name: { type: String, required: true },
-    size: { type: String || Number },
-    dot: { type: Boolean, default: false },
-    badge: { type: String || Number },
-    badgeMax: { type: Number }
-  },
-  computed: {
-    // 图标类名
-    iconName() {
-      return `${this.name}`;
-    },
-    // 图标大小
-    iconSize() {
-      if (this.size) {
-        return typeof this.size === "number" ? this.size + "px" : this.size;
+const HhIcon = {
+  install(app, options) {
+    const { url = "", css = "", js = "" } = options;
+    let linkUrl = "";
+    let scriptUrl = "";
+    if (url) {
+      if (url.endsWith(".css")) {
+        linkUrl = url;
+        scriptUrl = url.replace(".css", ".js");
       } else {
-        return "16px";
+        linkUrl = url.replace(".js", ".css");
+        scriptUrl = url;
       }
-    },
-    // 图标样式
-    styles() {
-      const obj = {
-        width: this.iconSize,
-        height: this.iconSize,
-        fill: "currentColor",
-        overflow: "hidden"
-      };
-      if (this.size) {
-        const currSize = typeof this.size === "number" ? this.size + "px" : this.size;
-        obj.width = currSize;
-        obj.height = currSize;
-      }
-      return obj;
-    },
-    // 徽标样式
-    dotStyles() {
-      const dotPosition = `${this.iconSize.replace("px", "") - 4}px`;
-      return {
-        bottom: `${dotPosition}`,
-        left: `${dotPosition}`,
-        padding: this.badge ? "2px 4px" : "4px"
-      };
-    },
-    // 徽标显示文名称
-    badgeText() {
-      if (this.badge) {
-        return this.badge > this.badgeMax ? `${this.badgeMax}+` : this.badge;
-      } else {
-        return "";
-      }
+    } else {
+      if (css)
+        linkUrl = css;
+      if (js)
+        scriptUrl = js;
     }
-  }
-};
-const _hoisted_1 = {
-  key: 0,
-  class: "hh-icon--symbol"
-};
-const _hoisted_2 = ["xlink:href"];
-const _hoisted_3 = ["xlink:href"];
-function __vue_render__$2(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock(
-    vue.Fragment,
-    null,
-    [
-      vue.createCommentVNode(" 有徽标 "),
-      _ctx.dot ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        (vue.openBlock(), vue.createElementBlock(
-          "svg",
-          vue.mergeProps({ style: _ctx.styles }, vue.toHandlers(_ctx.$listeners, true)),
-          [
-            vue.createElementVNode("use", {
-              "xlink:href": `#${_ctx.iconName}`
-            }, null, 8, _hoisted_2)
-          ],
-          16
-          /* FULL_PROPS */
-        )),
-        vue.createElementVNode(
-          "span",
-          {
-            class: "icon-dot",
-            style: vue.normalizeStyle(_ctx.dotStyles)
-          },
-          vue.toDisplayString(_ctx.badgeText),
-          5
-          /* TEXT, STYLE */
-        )
-      ])) : (vue.openBlock(), vue.createElementBlock(
-        vue.Fragment,
-        { key: 1 },
-        [
-          vue.createCommentVNode(" 无徽标 "),
-          (vue.openBlock(), vue.createElementBlock(
-            "svg",
-            vue.mergeProps({ style: _ctx.styles }, vue.toHandlers(_ctx.$listeners, true)),
-            [
-              vue.createElementVNode("use", {
-                "xlink:href": `#${_ctx.iconName}`
-              }, null, 8, _hoisted_3)
-            ],
-            16
-            /* FULL_PROPS */
-          ))
-        ],
-        2112
-        /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-      ))
-    ],
-    2112
-    /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-  );
-}
-__vue_sfc__$2.render = __vue_render__$2;
-var stdin_default$3 = __vue_sfc__$2;
-const IconFontSfc = "";
-const __vue_sfc__$1 = {
-  name: "IconFont",
-  props: {
-    name: { type: String, required: true },
-    dot: { type: Boolean, default: false },
-    badge: { type: String || Number },
-    badgeMax: { type: Number },
-    size: { type: String || Number },
-    color: { type: String, default: "" }
-  },
-  computed: {
-    // 图标类名
-    iconName() {
-      return `ds-iconfont iconfont ${this.name}`;
-    },
-    // 图标大小
-    iconFontSize() {
-      if (this.size) {
-        return typeof this.size === "number" ? this.size + "px" : this.size;
-      } else {
-        return "16px";
-      }
-    },
-    // 图标样式
-    styles() {
-      const obj = {
-        fontSize: this.iconFontSize
-      };
-      if (this.color) {
-        obj.color = this.color;
-      }
-      return obj;
-    },
-    // 徽标样式
-    dotStyles() {
-      const dotPosition = `${this.iconFontSize.replace("px", "") - 4}px`;
-      return {
-        bottom: `${dotPosition}`,
-        left: `${dotPosition}`,
-        padding: this.badge ? "2px 4px" : "4px"
-      };
-    },
-    // 徽标显示文名称
-    badgeText() {
-      if (this.badge) {
-        return this.badge > this.badgeMax ? `${this.badgeMax}+` : this.badge;
-      } else {
-        return "";
-      }
+    if (linkUrl) {
+      const link = document.createElement("link");
+      link.setAttribute("rel", "stylesheet");
+      link.setAttribute("type", "text/css");
+      link.setAttribute("href", linkUrl);
+      document.head.appendChild(link);
     }
+    if (scriptUrl) {
+      const script = document.createElement("script");
+      script.setAttribute("type", "text/javascript");
+      script.setAttribute("src", scriptUrl);
+      document.head.appendChild(script);
+    }
+    app.component("HhIcon", HhIcon);
   }
 };
-function __vue_render__$1(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock(
-    "i",
-    vue.mergeProps({
-      class: _ctx.iconName,
-      style: _ctx.styles
-    }, _ctx.$attrs, vue.toHandlers(_ctx.$listeners, true)),
-    [
-      _ctx.dot ? (vue.openBlock(), vue.createElementBlock(
-        "span",
-        {
-          key: 0,
-          class: "icon-dot",
-          style: vue.normalizeStyle(_ctx.dotStyles)
-        },
-        vue.toDisplayString(_ctx.badgeText),
-        5
-        /* TEXT, STYLE */
-      )) : vue.createCommentVNode("v-if", true)
-    ],
-    16
-    /* FULL_PROPS */
-  );
-}
-__vue_sfc__$1.render = __vue_render__$1;
-var stdin_default$2 = __vue_sfc__$1;
-const __vue_sfc__ = {
-  name: "HhIcon",
-  components: {
-    IconSymbol: stdin_default$3,
-    IconFont: stdin_default$2
-  },
-  props: {
-    symbol: { type: String, required: true },
-    name: { type: String, required: true },
-    dot: { type: Boolean, default: false },
-    badge: { type: String || Number },
-    badgeMax: { type: Number },
-    size: { type: String || Number },
-    color: { type: String, default: "" }
-  }
-};
-function __vue_render__(_ctx, _cache) {
-  const _component_IconSymbol = vue.resolveComponent("IconSymbol");
-  const _component_IconFont = vue.resolveComponent("IconFont");
-  return vue.openBlock(), vue.createElementBlock(
-    vue.Fragment,
-    null,
-    [
-      vue.createCommentVNode(" 多色图标 "),
-      _ctx.symbol ? (vue.openBlock(), vue.createBlock(
-        _component_IconSymbol,
-        vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.$props)),
-        null,
-        16
-        /* FULL_PROPS */
-      )) : (vue.openBlock(), vue.createElementBlock(
-        vue.Fragment,
-        { key: 1 },
-        [
-          vue.createCommentVNode(" 单色图标 "),
-          vue.createVNode(
-            _component_IconFont,
-            vue.normalizeProps(vue.guardReactiveProps(_ctx.$props)),
-            null,
-            16
-            /* FULL_PROPS */
-          )
-        ],
-        2112
-        /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-      ))
-    ],
-    2112
-    /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-  );
-}
-__vue_sfc__.render = __vue_render__;
-var stdin_default$1 = __vue_sfc__;
-const version = "0.0.0";
+var stdin_default$1 = HhIcon;
+const version = "0.0.1";
 function install(app) {
@@ -256,0 +41,0 @@ const components = [

lib/icon.es.js

@@ -1,253 +0,38 @@
-import { openBlock, createElementBlock, Fragment, createCommentVNode, mergeProps, toHandlers, createElementVNode, normalizeStyle, toDisplayString, resolveComponent, createBlock, normalizeProps, createVNode, guardReactiveProps } from "vue";
-const IconSymbolSfc = "";
-const __vue_sfc__$2 = {
-  name: "IconSymbol",
-  props: {
-    name: { type: String, required: true },
-    size: { type: String || Number },
-    dot: { type: Boolean, default: false },
-    badge: { type: String || Number },
-    badgeMax: { type: Number }
-  },
-  computed: {
-    // 图标类名
-    iconName() {
-      return `${this.name}`;
-    },
-    // 图标大小
-    iconSize() {
-      if (this.size) {
-        return typeof this.size === "number" ? this.size + "px" : this.size;
+const HhIcon = {
+  install(app, options) {
+    const { url = "", css = "", js = "" } = options;
+    let linkUrl = "";
+    let scriptUrl = "";
+    if (url) {
+      if (url.endsWith(".css")) {
+        linkUrl = url;
+        scriptUrl = url.replace(".css", ".js");
       } else {
-        return "16px";
+        linkUrl = url.replace(".js", ".css");
+        scriptUrl = url;
       }
-    },
-    // 图标样式
-    styles() {
-      const obj = {
-        width: this.iconSize,
-        height: this.iconSize,
-        fill: "currentColor",
-        overflow: "hidden"
-      };
-      if (this.size) {
-        const currSize = typeof this.size === "number" ? this.size + "px" : this.size;
-        obj.width = currSize;
-        obj.height = currSize;
-      }
-      return obj;
-    },
-    // 徽标样式
-    dotStyles() {
-      const dotPosition = `${this.iconSize.replace("px", "") - 4}px`;
-      return {
-        bottom: `${dotPosition}`,
-        left: `${dotPosition}`,
-        padding: this.badge ? "2px 4px" : "4px"
-      };
-    },
-    // 徽标显示文名称
-    badgeText() {
-      if (this.badge) {
-        return this.badge > this.badgeMax ? `${this.badgeMax}+` : this.badge;
-      } else {
-        return "";
-      }
+    } else {
+      if (css)
+        linkUrl = css;
+      if (js)
+        scriptUrl = js;
     }
-  }
-};
-const _hoisted_1 = {
-  key: 0,
-  class: "hh-icon--symbol"
-};
-const _hoisted_2 = ["xlink:href"];
-const _hoisted_3 = ["xlink:href"];
-function __vue_render__$2(_ctx, _cache) {
-  return openBlock(), createElementBlock(
-    Fragment,
-    null,
-    [
-      createCommentVNode(" 有徽标 "),
-      _ctx.dot ? (openBlock(), createElementBlock("div", _hoisted_1, [
-        (openBlock(), createElementBlock(
-          "svg",
-          mergeProps({ style: _ctx.styles }, toHandlers(_ctx.$listeners, true)),
-          [
-            createElementVNode("use", {
-              "xlink:href": `#${_ctx.iconName}`
-            }, null, 8, _hoisted_2)
-          ],
-          16
-          /* FULL_PROPS */
-        )),
-        createElementVNode(
-          "span",
-          {
-            class: "icon-dot",
-            style: normalizeStyle(_ctx.dotStyles)
-          },
-          toDisplayString(_ctx.badgeText),
-          5
-          /* TEXT, STYLE */
-        )
-      ])) : (openBlock(), createElementBlock(
-        Fragment,
-        { key: 1 },
-        [
-          createCommentVNode(" 无徽标 "),
-          (openBlock(), createElementBlock(
-            "svg",
-            mergeProps({ style: _ctx.styles }, toHandlers(_ctx.$listeners, true)),
-            [
-              createElementVNode("use", {
-                "xlink:href": `#${_ctx.iconName}`
-              }, null, 8, _hoisted_3)
-            ],
-            16
-            /* FULL_PROPS */
-          ))
-        ],
-        2112
-        /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-      ))
-    ],
-    2112
-    /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-  );
-}
-__vue_sfc__$2.render = __vue_render__$2;
-var stdin_default$3 = __vue_sfc__$2;
-const IconFontSfc = "";
-const __vue_sfc__$1 = {
-  name: "IconFont",
-  props: {
-    name: { type: String, required: true },
-    dot: { type: Boolean, default: false },
-    badge: { type: String || Number },
-    badgeMax: { type: Number },
-    size: { type: String || Number },
-    color: { type: String, default: "" }
-  },
-  computed: {
-    // 图标类名
-    iconName() {
-      return `ds-iconfont iconfont ${this.name}`;
-    },
-    // 图标大小
-    iconFontSize() {
-      if (this.size) {
-        return typeof this.size === "number" ? this.size + "px" : this.size;
-      } else {
-        return "16px";
-      }
-    },
-    // 图标样式
-    styles() {
-      const obj = {
-        fontSize: this.iconFontSize
-      };
-      if (this.color) {
-        obj.color = this.color;
-      }
-      return obj;
-    },
-    // 徽标样式
-    dotStyles() {
-      const dotPosition = `${this.iconFontSize.replace("px", "") - 4}px`;
-      return {
-        bottom: `${dotPosition}`,
-        left: `${dotPosition}`,
-        padding: this.badge ? "2px 4px" : "4px"
-      };
-    },
-    // 徽标显示文名称
-    badgeText() {
-      if (this.badge) {
-        return this.badge > this.badgeMax ? `${this.badgeMax}+` : this.badge;
-      } else {
-        return "";
-      }
+    if (linkUrl) {
+      const link = document.createElement("link");
+      link.setAttribute("rel", "stylesheet");
+      link.setAttribute("type", "text/css");
+      link.setAttribute("href", linkUrl);
+      document.head.appendChild(link);
     }
+    if (scriptUrl) {
+      const script = document.createElement("script");
+      script.setAttribute("type", "text/javascript");
+      script.setAttribute("src", scriptUrl);
+      document.head.appendChild(script);
+    }
+    app.component("HhIcon", HhIcon);
   }
 };
-function __vue_render__$1(_ctx, _cache) {
-  return openBlock(), createElementBlock(
-    "i",
-    mergeProps({
-      class: _ctx.iconName,
-      style: _ctx.styles
-    }, _ctx.$attrs, toHandlers(_ctx.$listeners, true)),
-    [
-      _ctx.dot ? (openBlock(), createElementBlock(
-        "span",
-        {
-          key: 0,
-          class: "icon-dot",
-          style: normalizeStyle(_ctx.dotStyles)
-        },
-        toDisplayString(_ctx.badgeText),
-        5
-        /* TEXT, STYLE */
-      )) : createCommentVNode("v-if", true)
-    ],
-    16
-    /* FULL_PROPS */
-  );
-}
-__vue_sfc__$1.render = __vue_render__$1;
-var stdin_default$2 = __vue_sfc__$1;
-const __vue_sfc__ = {
-  name: "HhIcon",
-  components: {
-    IconSymbol: stdin_default$3,
-    IconFont: stdin_default$2
-  },
-  props: {
-    symbol: { type: String, required: true },
-    name: { type: String, required: true },
-    dot: { type: Boolean, default: false },
-    badge: { type: String || Number },
-    badgeMax: { type: Number },
-    size: { type: String || Number },
-    color: { type: String, default: "" }
-  }
-};
-function __vue_render__(_ctx, _cache) {
-  const _component_IconSymbol = resolveComponent("IconSymbol");
-  const _component_IconFont = resolveComponent("IconFont");
-  return openBlock(), createElementBlock(
-    Fragment,
-    null,
-    [
-      createCommentVNode(" 多色图标 "),
-      _ctx.symbol ? (openBlock(), createBlock(
-        _component_IconSymbol,
-        normalizeProps(mergeProps({ key: 0 }, _ctx.$props)),
-        null,
-        16
-        /* FULL_PROPS */
-      )) : (openBlock(), createElementBlock(
-        Fragment,
-        { key: 1 },
-        [
-          createCommentVNode(" 单色图标 "),
-          createVNode(
-            _component_IconFont,
-            normalizeProps(guardReactiveProps(_ctx.$props)),
-            null,
-            16
-            /* FULL_PROPS */
-          )
-        ],
-        2112
-        /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-      ))
-    ],
-    2112
-    /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-  );
-}
-__vue_sfc__.render = __vue_render__;
-var stdin_default$1 = __vue_sfc__;
-const version = "0.0.0";
+var stdin_default$1 = HhIcon;
+const version = "0.0.1";
 function install(app) {
@@ -254,0 +39,0 @@ const components = [

lib/icon.js

 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue")) : typeof define === "function" && define.amd ? define(["exports", "vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.icon = {}, global.Vue));
-})(this, function(exports2, vue) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.icon = {}));
+})(this, function(exports2) {
   "use strict";
-  const IconSymbolSfc = "";
-  const __vue_sfc__$2 = {
-    name: "IconSymbol",
-    props: {
-      name: { type: String, required: true },
-      size: { type: String || Number },
-      dot: { type: Boolean, default: false },
-      badge: { type: String || Number },
-      badgeMax: { type: Number }
-    },
-    computed: {
-      // 图标类名
-      iconName() {
-        return `${this.name}`;
-      },
-      // 图标大小
-      iconSize() {
-        if (this.size) {
-          return typeof this.size === "number" ? this.size + "px" : this.size;
+  const HhIcon = {
+    install(app, options) {
+      const { url = "", css = "", js = "" } = options;
+      let linkUrl = "";
+      let scriptUrl = "";
+      if (url) {
+        if (url.endsWith(".css")) {
+          linkUrl = url;
+          scriptUrl = url.replace(".css", ".js");
         } else {
-          return "16px";
+          linkUrl = url.replace(".js", ".css");
+          scriptUrl = url;
         }
-      },
-      // 图标样式
-      styles() {
-        const obj = {
-          width: this.iconSize,
-          height: this.iconSize,
-          fill: "currentColor",
-          overflow: "hidden"
-        };
-        if (this.size) {
-          const currSize = typeof this.size === "number" ? this.size + "px" : this.size;
-          obj.width = currSize;
-          obj.height = currSize;
-        }
-        return obj;
-      },
-      // 徽标样式
-      dotStyles() {
-        const dotPosition = `${this.iconSize.replace("px", "") - 4}px`;
-        return {
-          bottom: `${dotPosition}`,
-          left: `${dotPosition}`,
-          padding: this.badge ? "2px 4px" : "4px"
-        };
-      },
-      // 徽标显示文名称
-      badgeText() {
-        if (this.badge) {
-          return this.badge > this.badgeMax ? `${this.badgeMax}+` : this.badge;
-        } else {
-          return "";
-        }
+      } else {
+        if (css)
+          linkUrl = css;
+        if (js)
+          scriptUrl = js;
       }
-    }
-  };
-  const _hoisted_1 = {
-    key: 0,
-    class: "hh-icon--symbol"
-  };
-  const _hoisted_2 = ["xlink:href"];
-  const _hoisted_3 = ["xlink:href"];
-  function __vue_render__$2(_ctx, _cache) {
-    return vue.openBlock(), vue.createElementBlock(
-      vue.Fragment,
-      null,
-      [
-        vue.createCommentVNode(" 有徽标 "),
-        _ctx.dot ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-          (vue.openBlock(), vue.createElementBlock(
-            "svg",
-            vue.mergeProps({ style: _ctx.styles }, vue.toHandlers(_ctx.$listeners, true)),
-            [
-              vue.createElementVNode("use", {
-                "xlink:href": `#${_ctx.iconName}`
-              }, null, 8, _hoisted_2)
-            ],
-            16
-            /* FULL_PROPS */
-          )),
-          vue.createElementVNode(
-            "span",
-            {
-              class: "icon-dot",
-              style: vue.normalizeStyle(_ctx.dotStyles)
-            },
-            vue.toDisplayString(_ctx.badgeText),
-            5
-            /* TEXT, STYLE */
-          )
-        ])) : (vue.openBlock(), vue.createElementBlock(
-          vue.Fragment,
-          { key: 1 },
-          [
-            vue.createCommentVNode(" 无徽标 "),
-            (vue.openBlock(), vue.createElementBlock(
-              "svg",
-              vue.mergeProps({ style: _ctx.styles }, vue.toHandlers(_ctx.$listeners, true)),
-              [
-                vue.createElementVNode("use", {
-                  "xlink:href": `#${_ctx.iconName}`
-                }, null, 8, _hoisted_3)
-              ],
-              16
-              /* FULL_PROPS */
-            ))
-          ],
-          2112
-          /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-        ))
-      ],
-      2112
-      /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-    );
-  }
-  __vue_sfc__$2.render = __vue_render__$2;
-  var stdin_default$3 = __vue_sfc__$2;
-  const IconFontSfc = "";
-  const __vue_sfc__$1 = {
-    name: "IconFont",
-    props: {
-      name: { type: String, required: true },
-      dot: { type: Boolean, default: false },
-      badge: { type: String || Number },
-      badgeMax: { type: Number },
-      size: { type: String || Number },
-      color: { type: String, default: "" }
-    },
-    computed: {
-      // 图标类名
-      iconName() {
-        return `ds-iconfont iconfont ${this.name}`;
-      },
-      // 图标大小
-      iconFontSize() {
-        if (this.size) {
-          return typeof this.size === "number" ? this.size + "px" : this.size;
-        } else {
-          return "16px";
-        }
-      },
-      // 图标样式
-      styles() {
-        const obj = {
-          fontSize: this.iconFontSize
-        };
-        if (this.color) {
-          obj.color = this.color;
-        }
-        return obj;
-      },
-      // 徽标样式
-      dotStyles() {
-        const dotPosition = `${this.iconFontSize.replace("px", "") - 4}px`;
-        return {
-          bottom: `${dotPosition}`,
-          left: `${dotPosition}`,
-          padding: this.badge ? "2px 4px" : "4px"
-        };
-      },
-      // 徽标显示文名称
-      badgeText() {
-        if (this.badge) {
-          return this.badge > this.badgeMax ? `${this.badgeMax}+` : this.badge;
-        } else {
-          return "";
-        }
+      if (linkUrl) {
+        const link = document.createElement("link");
+        link.setAttribute("rel", "stylesheet");
+        link.setAttribute("type", "text/css");
+        link.setAttribute("href", linkUrl);
+        document.head.appendChild(link);
       }
+      if (scriptUrl) {
+        const script = document.createElement("script");
+        script.setAttribute("type", "text/javascript");
+        script.setAttribute("src", scriptUrl);
+        document.head.appendChild(script);
+      }
+      app.component("HhIcon", HhIcon);
     }
   };
-  function __vue_render__$1(_ctx, _cache) {
-    return vue.openBlock(), vue.createElementBlock(
-      "i",
-      vue.mergeProps({
-        class: _ctx.iconName,
-        style: _ctx.styles
-      }, _ctx.$attrs, vue.toHandlers(_ctx.$listeners, true)),
-      [
-        _ctx.dot ? (vue.openBlock(), vue.createElementBlock(
-          "span",
-          {
-            key: 0,
-            class: "icon-dot",
-            style: vue.normalizeStyle(_ctx.dotStyles)
-          },
-          vue.toDisplayString(_ctx.badgeText),
-          5
-          /* TEXT, STYLE */
-        )) : vue.createCommentVNode("v-if", true)
-      ],
-      16
-      /* FULL_PROPS */
-    );
-  }
-  __vue_sfc__$1.render = __vue_render__$1;
-  var stdin_default$2 = __vue_sfc__$1;
-  const __vue_sfc__ = {
-    name: "HhIcon",
-    components: {
-      IconSymbol: stdin_default$3,
-      IconFont: stdin_default$2
-    },
-    props: {
-      symbol: { type: String, required: true },
-      name: { type: String, required: true },
-      dot: { type: Boolean, default: false },
-      badge: { type: String || Number },
-      badgeMax: { type: Number },
-      size: { type: String || Number },
-      color: { type: String, default: "" }
-    }
-  };
-  function __vue_render__(_ctx, _cache) {
-    const _component_IconSymbol = vue.resolveComponent("IconSymbol");
-    const _component_IconFont = vue.resolveComponent("IconFont");
-    return vue.openBlock(), vue.createElementBlock(
-      vue.Fragment,
-      null,
-      [
-        vue.createCommentVNode(" 多色图标 "),
-        _ctx.symbol ? (vue.openBlock(), vue.createBlock(
-          _component_IconSymbol,
-          vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.$props)),
-          null,
-          16
-          /* FULL_PROPS */
-        )) : (vue.openBlock(), vue.createElementBlock(
-          vue.Fragment,
-          { key: 1 },
-          [
-            vue.createCommentVNode(" 单色图标 "),
-            vue.createVNode(
-              _component_IconFont,
-              vue.normalizeProps(vue.guardReactiveProps(_ctx.$props)),
-              null,
-              16
-              /* FULL_PROPS */
-            )
-          ],
-          2112
-          /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-        ))
-      ],
-      2112
-      /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-    );
-  }
-  __vue_sfc__.render = __vue_render__;
-  var stdin_default$1 = __vue_sfc__;
-  const version = "0.0.0";
+  var stdin_default$1 = HhIcon;
+  const version = "0.0.1";
   function install(app) {
@@ -257,0 +43,0 @@ const components = [

lib/icon.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).icon={},e.Vue)}(this,(function(e,t){"use strict";const o={name:"IconSymbol",props:{name:{type:String,required:!0},size:{type:String||Number},dot:{type:Boolean,default:!1},badge:{type:String||Number},badgeMax:{type:Number}},computed:{iconName(){return`${this.name}`},iconSize(){return this.size?"number"==typeof this.size?this.size+"px":this.size:"16px"},styles(){const e={width:this.iconSize,height:this.iconSize,fill:"currentColor",overflow:"hidden"};if(this.size){const t="number"==typeof this.size?this.size+"px":this.size;e.width=t,e.height=t}return e},dotStyles(){const e=this.iconSize.replace("px","")-4+"px";return{bottom:`${e}`,left:`${e}`,padding:this.badge?"2px 4px":"4px"}},badgeText(){return this.badge?this.badge>this.badgeMax?`${this.badgeMax}+`:this.badge:""}}},n={key:0,class:"hh-icon--symbol"},r=["xlink:href"],i=["xlink:href"];o.render=function(e,o){return t.openBlock(),t.createElementBlock(t.Fragment,null,[t.createCommentVNode(" 有徽标 "),e.dot?(t.openBlock(),t.createElementBlock("div",n,[(t.openBlock(),t.createElementBlock("svg",t.mergeProps({style:e.styles},t.toHandlers(e.$listeners,!0)),[t.createElementVNode("use",{"xlink:href":`#${e.iconName}`},null,8,r)],16)),t.createElementVNode("span",{class:"icon-dot",style:t.normalizeStyle(e.dotStyles)},t.toDisplayString(e.badgeText),5)])):(t.openBlock(),t.createElementBlock(t.Fragment,{key:1},[t.createCommentVNode(" 无徽标 "),(t.openBlock(),t.createElementBlock("svg",t.mergeProps({style:e.styles},t.toHandlers(e.$listeners,!0)),[t.createElementVNode("use",{"xlink:href":`#${e.iconName}`},null,8,i)],16))],2112))],2112)};var s=o;const l={name:"IconFont",props:{name:{type:String,required:!0},dot:{type:Boolean,default:!1},badge:{type:String||Number},badgeMax:{type:Number},size:{type:String||Number},color:{type:String,default:""}},computed:{iconName(){return`ds-iconfont iconfont ${this.name}`},iconFontSize(){return this.size?"number"==typeof this.size?this.size+"px":this.size:"16px"},styles(){const e={fontSize:this.iconFontSize};return this.color&&(e.color=this.color),e},dotStyles(){const e=this.iconFontSize.replace("px","")-4+"px";return{bottom:`${e}`,left:`${e}`,padding:this.badge?"2px 4px":"4px"}},badgeText(){return this.badge?this.badge>this.badgeMax?`${this.badgeMax}+`:this.badge:""}}};l.render=function(e,o){return t.openBlock(),t.createElementBlock("i",t.mergeProps({class:e.iconName,style:e.styles},e.$attrs,t.toHandlers(e.$listeners,!0)),[e.dot?(t.openBlock(),t.createElementBlock("span",{key:0,class:"icon-dot",style:t.normalizeStyle(e.dotStyles)},t.toDisplayString(e.badgeText),5)):t.createCommentVNode("v-if",!0)],16)};const a={name:"HhIcon",components:{IconSymbol:s,IconFont:l},props:{symbol:{type:String,required:!0},name:{type:String,required:!0},dot:{type:Boolean,default:!1},badge:{type:String||Number},badgeMax:{type:Number},size:{type:String||Number},color:{type:String,default:""}}};a.render=function(e,o){const n=t.resolveComponent("IconSymbol"),r=t.resolveComponent("IconFont");return t.openBlock(),t.createElementBlock(t.Fragment,null,[t.createCommentVNode(" 多色图标 "),e.symbol?(t.openBlock(),t.createBlock(n,t.normalizeProps(t.mergeProps({key:0},e.$props)),null,16)):(t.openBlock(),t.createElementBlock(t.Fragment,{key:1},[t.createCommentVNode(" 单色图标 "),t.createVNode(r,t.normalizeProps(t.guardReactiveProps(e.$props)),null,16)],2112))],2112)};var c=a;const p="0.0.0";function d(e){[c].forEach((t=>{t.install?e.use(t):t.name&&e.component(t.name,t)}))}var m={install:d,version:p};e.Icon=c,e.default=m,e.install=d,e.version=p,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).icon={})}(this,(function(e){"use strict";const t={install(e,n){const{url:s="",css:o="",js:i=""}=n;let c="",l="";if(s?s.endsWith(".css")?(c=s,l=s.replace(".css",".js")):(c=s.replace(".js",".css"),l=s):(o&&(c=o),i&&(l=i)),c){const e=document.createElement("link");e.setAttribute("rel","stylesheet"),e.setAttribute("type","text/css"),e.setAttribute("href",c),document.head.appendChild(e)}if(l){const e=document.createElement("script");e.setAttribute("type","text/javascript"),e.setAttribute("src",l),document.head.appendChild(e)}e.component("HhIcon",t)}};var n=t;const s="0.0.1";function o(e){[n].forEach((t=>{t.install?e.use(t):t.name&&e.component(t.name,t)}))}var i={install:o,version:s};e.Icon=n,e.default=i,e.install=o,e.version=s,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

lib/icon/index.js

@@ -1,6 +0,4 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -19,10 +17,2 @@ var __export = (target, all) => {
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
@@ -34,57 +24,37 @@ var stdin_exports = {};
 module.exports = __toCommonJS(stdin_exports);
-var import_IconSymbol = __toESM(require("./components/IconSymbol.js"));
-var import_IconFont = __toESM(require("./components/IconFont.js"));
-var import_vue = require("vue");
-const __vue_sfc__ = {
-  name: "HhIcon",
-  components: {
-    IconSymbol: import_IconSymbol.default,
-    IconFont: import_IconFont.default
-  },
-  props: {
-    symbol: { type: String, required: true },
-    name: { type: String, required: true },
-    dot: { type: Boolean, default: false },
-    badge: { type: String || Number },
-    badgeMax: { type: Number },
-    size: { type: String || Number },
-    color: { type: String, default: "" }
+const HhIcon = {
+  install(app, options) {
+    const { url = "", css = "", js = "" } = options;
+    let linkUrl = "";
+    let scriptUrl = "";
+    if (url) {
+      if (url.endsWith(".css")) {
+        linkUrl = url;
+        scriptUrl = url.replace(".css", ".js");
+      } else {
+        linkUrl = url.replace(".js", ".css");
+        scriptUrl = url;
+      }
+    } else {
+      if (css)
+        linkUrl = css;
+      if (js)
+        scriptUrl = js;
+    }
+    if (linkUrl) {
+      const link = document.createElement("link");
+      link.setAttribute("rel", "stylesheet");
+      link.setAttribute("type", "text/css");
+      link.setAttribute("href", linkUrl);
+      document.head.appendChild(link);
+    }
+    if (scriptUrl) {
+      const script = document.createElement("script");
+      script.setAttribute("type", "text/javascript");
+      script.setAttribute("src", scriptUrl);
+      document.head.appendChild(script);
+    }
+    app.component("HhIcon", HhIcon);
   }
 };
-function __vue_render__(_ctx, _cache) {
-  const _component_IconSymbol = (0, import_vue.resolveComponent)("IconSymbol");
-  const _component_IconFont = (0, import_vue.resolveComponent)("IconFont");
-  return (0, import_vue.openBlock)(), (0, import_vue.createElementBlock)(
-    import_vue.Fragment,
-    null,
-    [
-      (0, import_vue.createCommentVNode)(" \u591A\u8272\u56FE\u6807 "),
-      _ctx.symbol ? ((0, import_vue.openBlock)(), (0, import_vue.createBlock)(
-        _component_IconSymbol,
-        (0, import_vue.normalizeProps)((0, import_vue.mergeProps)({ key: 0 }, _ctx.$props)),
-        null,
-        16
-        /* FULL_PROPS */
-      )) : ((0, import_vue.openBlock)(), (0, import_vue.createElementBlock)(
-        import_vue.Fragment,
-        { key: 1 },
-        [
-          (0, import_vue.createCommentVNode)(" \u5355\u8272\u56FE\u6807 "),
-          (0, import_vue.createVNode)(
-            _component_IconFont,
-            (0, import_vue.normalizeProps)((0, import_vue.guardReactiveProps)(_ctx.$props)),
-            null,
-            16
-            /* FULL_PROPS */
-          )
-        ],
-        2112
-        /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-      ))
-    ],
-    2112
-    /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-  );
-}
-__vue_sfc__.render = __vue_render__;
-var stdin_default = __vue_sfc__;
+var stdin_default = HhIcon;

lib/index.js

@@ -37,3 +37,3 @@ var __create = Object.create;
 var import_icon = __toESM(require("./icon"));
-const version = "0.0.0";
+const version = "0.0.1";
 function install(app) {
@@ -40,0 +40,0 @@ const components = [

lib/web-types.json

@@ -1,1 +0,1 @@
-{"$schema":"https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json","framework":"vue","name":"icon","version":"0.0.0","contributions":{"html":{"tags":[{"name":"demo-button","attributes":[{"name":"type","default":"`primary`","description":"按钮类型","value":{"type":"string","kind":"expression"}},{"name":"color","default":"-","description":"按钮颜色","value":{"type":"string","kind":"expression"}}],"events":[{"name":"click","description":"点击时触发","arguments":[{"name":"event","type":"MouseEvent"}]}],"slots":[{"name":"default","description":"默认插槽"}]}],"attributes":[]}},"js-types-syntax":"typescript"}
+{"$schema":"https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json","framework":"vue","name":"icon","version":"0.0.1","contributions":{"html":{"tags":[{"name":"demo-button","attributes":[{"name":"type","default":"`primary`","description":"按钮类型","value":{"type":"string","kind":"expression"}},{"name":"color","default":"-","description":"按钮颜色","value":{"type":"string","kind":"expression"}}],"events":[{"name":"click","description":"点击时触发","arguments":[{"name":"event","type":"MouseEvent"}]}],"slots":[{"name":"default","description":"默认插槽"}]}],"attributes":[]}},"js-types-syntax":"typescript"}

package.json

 {
   "name": "@hhorg/icon",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "图标库",
@@ -5,0 +5,0 @@ "main": "lib/hh-icon.js",

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of package files

30

increased by3.45%

Number of low quality alerts

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

33702

decreased by-34.62%

Lines of code

960

decreased by-36.84%

No dependency changes