@haoduo-icon/ci 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haoduo-icon/ci",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Icon package for ci",
   "type": "module",
   "main": "./pkg-index.js",

package/pkg-index.js

@@ -580,11 +580,25 @@ class HdIcon extends HTMLElement {
   static get observedAttributes() {
     return ["icon"];
   }
-  _use;
+  _use = null;
   constructor() {
     super();
-    this.innerHTML = `<svg width="1em" height="1em" fill="currentColor" style="display: inline-block; vertical-align: middle; overflow: hidden;"><use width="100%" height="100%"></use></svg>`;
-    this._use = this.querySelector("use");
+  }
+  ensureTemplate() {
+    if (this._use)
+      return;
+    const svgNs = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(svgNs, "svg");
+    svg.setAttribute("width", "1em");
+    svg.setAttribute("height", "1em");
+    svg.setAttribute("fill", "currentColor");
+    svg.setAttribute("style", "display: inline-block; vertical-align: middle; overflow: hidden;");
+    const use = document.createElementNS(svgNs, "use");
+    use.setAttribute("width", "100%");
+    use.setAttribute("height", "100%");
+    svg.appendChild(use);
+    this.appendChild(svg);
+    this._use = use;
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "icon" && newValue !== oldValue) {
@@ -592,6 +606,7 @@ class HdIcon extends HTMLElement {
     }
   }
   connectedCallback() {
+    this.ensureTemplate();
     this.render();
     if (typeof window !== "undefined") {
       window.addEventListener("hd-icon-registered", this.handleRegistration);
@@ -602,22 +617,49 @@ class HdIcon extends HTMLElement {
       window.removeEventListener("hd-icon-registered", this.handleRegistration);
     }
   }
+  parseIconKey(iconKey) {
+    if (!iconKey)
+      return null;
+    const colonIndex = iconKey.indexOf(":");
+    if (colonIndex > 0 && colonIndex < iconKey.length - 1) {
+      return {
+        pkg: iconKey.slice(0, colonIndex),
+        name: iconKey.slice(colonIndex + 1)
+      };
+    }
+    const registry = getRegistry();
+    let matchedPkg = "";
+    for (const pkg of registry.keys()) {
+      if (iconKey.startsWith(pkg + "-") && pkg.length > matchedPkg.length) {
+        matchedPkg = pkg;
+      }
+    }
+    if (matchedPkg) {
+      return {
+        pkg: matchedPkg,
+        name: iconKey.slice(matchedPkg.length + 1)
+      };
+    }
+    return null;
+  }
   handleRegistration = (e) => {
     const detail = e.detail;
     const iconKey = this.getAttribute("icon");
-    if (iconKey && iconKey.startsWith(detail.pkg + ":")) {
+    if (iconKey && (iconKey.startsWith(detail.pkg + ":") || iconKey.startsWith(detail.pkg + "-"))) {
       this.render();
     }
   };
   async render() {
+    this.ensureTemplate();
     const iconKey = this.getAttribute("icon");
     if (!iconKey)
       return;
-    const [pkg, name] = iconKey.split(":");
-    if (!pkg || !name) {
-      console.warn(`[hd-icon] Invalid icon format: "${iconKey}". Expected "pkg:name".`);
+    const parsed = this.parseIconKey(iconKey);
+    if (!parsed) {
+      console.warn(`[hd-icon] Invalid icon format: "${iconKey}". Expected "pkg:name" or "pkg-name".`);
       return;
     }
+    const { pkg, name } = parsed;
     const registry = getRegistry().get(pkg);
     if (!registry) {
       return;
@@ -651,7 +693,7 @@ class HdIcon extends HTMLElement {
         console.warn(`[hd-icon] Failed to resolve icon URL: ${chunkFile} relative to ${registry.baseUrl}`, e);
       }
     }
-    this._use.setAttribute("href", `${url}#${symbolId}`);
+    this._use?.setAttribute("href", `${url}#${symbolId}`);
   }
 }
 if (typeof customElements !== "undefined" && !customElements.get("hd-icon")) {
@@ -662,7 +704,7 @@ if (typeof window !== "undefined") {
 }
 
 // iconpkg/ci/src-index.ts
-var lookup = "AAADzYkZAssYjxoBibVqWEhBVThEV0eKI0VlMyFVNGh2IkNilmVpSTGIZIXFIyc1I3MxQnEUQmNFZmantjR4ZQMmVlQlN5ZVNjlGVlQ2iZdndlclQTR1aAVYkwcNCYYCAgQNnwELVwS6Iv0FCRgTJeoBAS4CBASpA3gYmgMEAQswMMoEX7sSP+obEgGxARwEHhZRIZJQAgEqARkDAQKlAwoH2wENIgSrARMPVrwBYyF1kx56w2gGAyChARIQUQMtBAgbKAISAWYICHQEiBAKMgMNRwUvYAVRoQWiAbsEVmgIY8MBAgICAwkKeTQcEAJZAstswJ5gL2/yFt6c+jC+3i5WBCoOEEiDwq1nGkvGkB7MJLrxtwM+/451QQ3tveZpPLZJVHWS1UiSFZVbKAcbFi8itxSMPI35Gx3Hk7MiZvzZ/Lk3CyUVPKw7dFH8Mu4dbYGWzssyJP2PQID/i/08ViyfmtFsQ3MaPj+pFIJZX+F3X4Km+NgsKgt22uTLk5l1M0gw0olUQKDIvBwYMdOFExrUb7cvd6msqHMXB4zOo+3Z1we5+pnyuhIRHO9vFhAxVmbWpB6U9tGAGRwoCMW1rV/Egryi7cVyn4HLsotNuQdpR+5RInq03yb2MDEclEXBgwYl1RYbZva96+fXzktovzKfBc4qaIAy3Oc+OfIUWz12AicFPiB0kjOH/sNbDCW2sNcxvr5+K77FlTAJfxikp4FGG9QmSvPqwoBA7iRu5V1tEVe+4zCpHLDTD/Cl2kw6FyCK1rN4tHJziA85O72nIkAxLj3BgstugPB5acSSqXGIsw5+UjN8oJSZEeAwBayGyGmtF2D4OWWrNuHfW2QksUdM6shwWwdFIaWaUAWrf9LSsRO2QAct8Tf1FNQhhpUN7mjsg9seXcSR6Cte0IhgWM+USx6GK/SALKhIaCSnIURo6DT4aymfCgQ4XwKH5n9qkvB7HZVpm20WAaapF4uvszwSNBgGJ2cJZUqOQtKRr/qZXOf/3UdpF8WFWxSHPhYeGBTf+Vxhw0cErGtOy1Sj925IScLAekxBeOsaV0FG5sKhwQXwTXjQdMoe/lZU0kEwR2OHqB9OAQbv/jQJKc1TsMgVGxS2dvzYJzogubg6v5j3IL6mHs7rY8dVbebtZRNzpyN6mIN4bIFG8azNXqLXkAp1IZ7mncCViPlzsnWgorTPXJwHuQrkvHaoXuDTZCfmaKJO1LOiUnEN/YygvYwEcP+wP1DLlazPVPTDGAwa7nsXw+x/mGlPR/gdLEC7UgGA0AARQQBAVAYAwAAgAABAAgAAAAAEAAAACWNpLTAxLnN2ZwAAAAljaS0wMi5zdmcAAAAJY2ktMDMuc3ZnAAAACWNpLTA0LnN2Z/////8AAAADAAABDckSBIgCANGyTNMQIVACQIgSDIAUTUokAQiGINmwScqCZJugTJsUbUCUAAIAKFCASZAgJEkUBUgiaFIQAYCEJVCCTZm0CEIiYYoAIUimZIokbAqkAZOAAVmkLNkULJCgQUmSKcEkTVC0JIuUZECGBIqwBImAIFCGQBIGCBIgCIAQaRAQZBEgQAGyZMuUSJMEIJoQQQgEBJmEQUEABJqGaIsUQZIATIg2IVmATNOUCBEABJCQLZmQJIiQQFKQJUoSQRMkRYAkIYIyYQkERFoCDYqQJAqCJUi0JJqyQROERYMUDQOSYBGWCNqAJUACJcOkBZg0QNgCAEsiDdMQYYqCAJOiSAoQQJsgCcsQKYoAAAAAAA==";
+var lookup = "AAAD1okZAssYjxokdDdLWEhCZzVXFDQjQ2dDVqh1ZnNjV2Nhg2QmJnJTOHJmKMZWgjOGiApWSXaTgjJnRCVkgFRCOLp0pHhFZiOGhTKGNCRzM1FDOEFkJQdYnAET3QFmDgxdAwIBAQIH9QENCQM5EZwB3CVmHHISnAEGSQ49NQ0SogQVzgETJwMB5AIHXp8EAgK6AWadAecCiAHeEQkf5wEBAjKmCYoDrgLUEGw5nAQIe0AB1RYC7wIBAZQBKQUJIgOuAoEBEyEDDt0BBvAa6C0DY+sDigbMBCYFMCoBHyI5AwxHEggEAQblBAEHJwUBwwUJFmEIJwJZAsuDCxRAECJumEF1n5aswI1WfpL2iiypAoBtoqwyNo4OkzIMDQkUb0CIMB4kuSa/vmsPJcL8x9Keprwawlu+63hDFx27xg4XvqRmPBX0ID4W52N45k6o7s9MXEfn7Yns/YZ2GrMeFySVaSoGuT8TNMNfaQU8hSx/073MteWSldlxc+Zg5G8eZaz6oKAGFkygPhUFp4YLvRFJxbQlR59Frc9H8IaktqjPovQGmTzysMgofPNBJCyIB1FUPphN1BtYwye9bFPa0LlVshmUW6F/txpnB25fohzmLHTw9cjBMQUEG7qn73h3XneUo8cqnjKmxcFoetF+R22BMkYR11TrM4LF0mlFqXuLwidz0ZLnPjjAWTFUBw2305lLIq+Dg6th604wrHlX7tOrzrACJkeVF8sU3/gcSLSU178xnFSHnSrd/hhM7eSAzU8vzsgWXe3+UE5I0B4e4RYeLXX/FUBWxcSVSEHO/SiRdLbmakIX7jAvjrnjmEhjrz2PszNlrO4d78uLOoH5o8PXR6dtSmR4K0DA1mbwcXNuaYt1DyIbaNtyaJGZ0oddA6WIn5sbjDfxKQcFolB6K4zwZRSzIHYuTfb6J5LmN/LIyxAkGvj/snCBWySZCkrSL0AYHoLCFgcFKZ9WPMtsIEYfSdQghz3+g2gY2kbhEkszsw0xe6bBqDTSLs7qBLz5wyX6uSJpMBb8YLcwgMqpXzQdopoB/BhEiJDmthhty4dcMTD37P8UvYAUZn++s3XxkyEBoKhwaVJevq1zggQ5/SHZ3urgO99U+FvOQDoj1QdomhytrFLo3JWQ2BOFV/g5O+2037B6dMRkzSGxaBf31Dno/7DevlsJIQcacxzyK/y6pxu4tkhbXAQI+Wn2XmDxUUuUgAxvPowUgBGBxCfWbIJBP3IKHX8Jy3WS1BNfjNjXsaWp1TAK4HZ2VmsSZ7wcPKmVOpzuUoCCAAEUCABCgAAAEgABSgCEIQAAAAAEAAAACWNpLTAxLnN2ZwAAAAljaS0wMi5zdmcAAAAJY2ktMDMuc3ZnAAAACWNpLTA0LnN2Z/////8AAAADAAABDVkkbNO2IAkAKFgmTZAEBFOEIciWTAOUDIowYIMwDIkCAdKUCdGkSAokBdEkYRCERYoSQMikCJKCYUigQEoQRFGiJVAUDQkyDQGgIZESIEMkbBkQQQmiCVAGKYGmRJCEJMEQLMESDMOSKYiGRFkiIJEARUMEKVskAMACJUqwIQAEDJOCLNOQbFsGCQKWaFKyQIEAKBEELJiCABAiCUuUYAqiIEEARNsWQUsyKYMwLQAiQECEAAmASJGkaMG0BBKyAUmSRRESDUKGRImQLdEQIJCgJJCkYVKwRYMkCdEUYUIWSRogRYgEKFkGAJCQCEKQSMAQRJCkREAUIREUAQIUIcgyaZCGQQgiDdCEBYkAAAAAAA==";
 var chunks = {
   "ci-01.svg": new URL("./ci-01.svg", import.meta.url).href,
   "ci-02.svg": new URL("./ci-02.svg", import.meta.url).href,