add iconConnected event key

example/geojson/index.html

@@ -36,7 +36,7 @@
       <l-geojson id="feature" geojson='{"type":"Feature","properties":{"name":"Coors Field","amenity":"Baseball Stadium","popupContent":"This is where the Rockies play!"},"geometry":{"type":"Point","coordinates":[-104.99404,39.75621]}}'></l-geojson>
     </l-map>
     <script>
-      document.getElementById("feature").addEventListener("map:addTo", (ev) => {
+      document.getElementById("feature").addEventListener("l:layer:connected", (ev) => {
         console.log({ message: "Hello, World!", ev })
       })
     </script>

src/events.js

@@ -1,4 +1,5 @@
 // NOTE: These event keys are part of the public API of leaflet-html
 export const layerConnected = "l:layer:connected";
 export const popupConnected = "l:popup:connected";
+export const iconConnected = "l:icon:connected";
 export const layerRemoved = "l:layer:removed";

src/l-icon.js

@@ -1,4 +1,5 @@
 import { icon } from "leaflet";
+import { iconConnected } from "./events.js";
 import {
   bool,
   chain,
@@ -53,7 +54,7 @@ class LIcon extends HTMLElement {
 
     this.icon = icon(options);
 
-    const event = new CustomEvent("icon:add", {
+    const event = new CustomEvent(iconConnected, {
       cancelable: true,
       bubbles: true,
       detail: {

src/l-icon.test.js

@@ -2,6 +2,7 @@
 import { it, expect } from "vitest";
 import * as L from "leaflet";
 import "./index.js";
+import { iconConnected } from "./events.js";
 
 it("default", () => {
   const el = document.createElement("l-icon");
@@ -15,7 +16,7 @@ it("default", () => {
 it("emits icon:add event", async () => {
   const el = document.createElement("l-icon");
   let promise = new Promise((resolve) => {
-    el.addEventListener("icon:add", (ev) => {
+    el.addEventListener(iconConnected, (ev) => {
       resolve(ev.detail.icon);
     });
   });

src/l-marker.js

@@ -1,5 +1,5 @@
 import * as L from "leaflet";
-import { layerConnected, popupConnected } from "./events.js";
+import { layerConnected, popupConnected, iconConnected } from "./events.js";
 import LLayer from "./l-layer.js";
 import {
   chain,
@@ -19,7 +19,7 @@ class LMarker extends LLayer {
   constructor() {
     super();
     this.layer = null;
-    this.addEventListener("icon:add", (ev) => {
+    this.addEventListener(iconConnected, (ev) => {
       ev.stopPropagation();
       this.layer.setIcon(ev.detail.icon);
     });