@haoduo-icon/flag 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haoduo-icon/flag",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Icon package for flag",
   "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/flag/src-index.ts
-var lookup = "AAAC8YkZAh4YbRpff9e8WDc3Z1ZFtFSTVWY5lyVEUkWEdkOWVzdGYkVRJmRnJVV2YyeDJDJkEkQ3czRrNHRGQ3dDRShpJ0cEWHldA4wBDg8VFQ8OyBkDBwXuAQMTJAuBAgH0BjsEAQoGBAEBApoBNicQCNYCgwIQvQIEVQoBFRcNAw0MFx4REwUeEaMBA9sDbgEChQIKAgQFAiMBHhChAQIBOwkJhW9mCQIU9wIdAhVN0gMJERUIqQMC1gk9xQLAAQUDAlkCHrEu1QB3I3sq//fzUHDvQjdWlZxF0Hix3tYP/TcZHn+FIhEoEW+9p9zlOJrC5gOhdLhBNk4DmPVv9IYgOvKaw5X6+qCiW1MXFrZKyAhO6NGHPBvwS1+RzKL0BNwIOPl+YWCSRhBFVd6J+4FZjiMTDHoJ86wk2ETMHJE82TzEKw0r64klJ4AGwuBZ0d+juI81rH2aNxU7BfQ8qYDb8Su/QfUhc6JNXH2+fwsoGzNPS/7xU/UMXAxa1dtGWtVtDLp3BG6ScnGBrSSWl+HCXUufHtKLaQf3S6D6VEK4tK6UdZlEHegrYYVI9Q/o4L/jMHYY3LAmmHWk7Oo2dzFsvtQicTT+wyD2EoDdXJFQTcSLynx2b3wi8Mj5Cd3/pXTyPeHPCR/QJV6N8tE6ZUXTcxQt5u34o8GzKMmJLP/XfvCUNbmpH0IWRfl0vE1CmdEPLTHEtsRWdr4PBr/K4NOYztFHc9QG5ZdVDRsp0saJOpEYk9osEaPfqTJYVqMbK5dd+L/QjfJ7jNbyKSDtz4M47pBa+igj7rOmTWMTELhpBwErh00ZuOwu3L0ktlkQoPwjlk+aoW+kdpJBGB1pAqYhLatGaxRijctkF751VjXu8f/cjJBD1xxwihz73UzDI+Dt+vJWl4UAKTvn0NoZ5ozXZEn9z1Dgdx2AYjTLYD/H7+oEHOUz2F4FvYn/hBf63swS5XTRJpLABefiMdjxzaES9culTgAAACAEAAkCAAgABAACAAAAAAMAAAALZmxhZy0wMS5zdmcAAAALZmxhZy0wMi5zdmcAAAALZmxhZy0wMy5zdmf/////AAAAAgAAAIhpIoCFipkBmZWVEVklRFhYRAgCWCkVaJAElRQUQBIUkEBJYagYSZYAIIRFomEgkZJklCQGmKEZZVWQBmkQoSRJEYCEkUQqlaFQpokVRFJUmEghEQEoQUFpWBgWQIICIUpQVRoJRWRSGIWaqURRUSklEFQpWAAYJYRJhhhRgKKgIKRYqYhJBhEEAAAAAA==";
+var lookup = "AAAC54kZAh4YbRoHqiUfWDdCWVOkRCUUNkUmRFRmODdjNDaFFUcUpGWVZ0VHFlZWNXOFSHRINWRllJSxRkJzJzhXYnZWRRYEWG8D2AYJAhmPCgoTHQN8BgUBDQMFAhQbEP8CBXIFZAcDNgQOHgffAwsMEe8vEjMqmwHoAX0B7AMDfEUGkgFGEwY3LzjeAgIPkgFRBgECvwEqBAGDBcwBj0oPEgEFApoDGQQhBAoKAQEThwISBSYFPQICWQIev5LUQn4k+tscKtKmjRLxoPIpJcTgWpj3LFuXRuJL0XXR5glpWKAdz/E011z9O2/CS3De9A8PBx/1K95M9ZpjTtzLVb9VS6nD9scd5wy4lb/djwBpDf4w/frqRd+B0QTD8v8oU4kQAyI63IZ8brbc+b3VcprgVkijpbgJGJH/ubYEdO3ao8hGK3R/q3dWVHpOLmH6tByho3Dz4WKi73NNWez4wtDKRiteFiwrTxso7pKg+tOEscuXhzy+OiLyI9hPP6IevQN8b8tTw7H70rBJzDbEZDX5N5goGFx2OBLd6y0MMSCp5tVHtpzuWvCzHJc40SP0vjHQYDXapZEpygYrd2Vi1w3wlrzhjiTPf9gIHi4ZwNjmE8lWiSHnjNfE3REc3NGLXRaS7rMFPfwgD62hfX0VTdARkAxCuqwyl42u6AQjQf+YNCRQ0/Nf+gahUHXvwRGZn88Qo8yRlfiaM9aM5VaKdjflgDtxpkWFkyNrRPkXJ3vUdL0JbYynHZrqFE2kEDWSISgbRfHE1VmFGf/07YCUVkXyJhf+gEH1bPe+7IkzgQLg2zz1XIlCAHEPFCDcMUTZjeWF0QgTyHMiQ78GWolgKwV2dod7Je3l6BcBIy3MGya44PCAG2n/zRhCcyn7rMYFb3Sig03yuAwZSpRNb0uQ3wcSlh/xUHip0HfWXZmkfpFZ4N51vvV3zjbyCzz6ODxh6GQtuF5BOjeLwuNOQSgIIIAIEIIACBQAAAgAAAAAAwAAAAtmbGFnLTAxLnN2ZwAAAAtmbGFnLTAyLnN2ZwAAAAtmbGFnLTAzLnN2Z/////8AAAACAAAAiFQFgCUQmVFmpVCWlBASKBiZaVAqaBSZJZWCaWQqAIUQBhkWCkpQYElAQZRBQqUhRogGFVCCViREkqmEQEiBRABRYaggKUIqIBJkZFUAlaggBBQkhUhGZGUiEhkZRaSFBhUaJkCViYVQUAVQEJFYYSGImaAECiYYkWhhhUBEimqGVRmVVFBkJAAAAAAA";
 var chunks = {
   "flag-01.svg": new URL("./flag-01.svg", import.meta.url).href,
   "flag-02.svg": new URL("./flag-02.svg", import.meta.url).href,