Merge pull request #112 from indiana-university/release/3.0.1

Release 3.0.1
indiana-university · Feb 19, 2025 · 9090adb · 9090adb
2 parents 94ae699 + 376e3a4
commit 9090adb
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rivet-icons",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Icons for Indiana University's Rivet Design System",
   "files": [
     "dist/**/*",

diff --git a/src/rivet-icon-element.css b/src/rivet-icon-element.css
@@ -7,7 +7,8 @@ rvt-icon {
 	width: min-content;
 }
 
-rvt-icon:not(:defined)::before {
+rvt-icon:empty::before,
+rvt-icon > svg {
 	content: "";
 	display: block;
 	height: 1rem;

diff --git a/src/rivet-icon-element.js b/src/rivet-icon-element.js
@@ -19,35 +19,7 @@ style.setAttribute(`data-${elementName}`, '');
 document.head.appendChild(style);
 
 export function registerIcon (name, content) {
-	if (!name || typeof name !== 'string') {
-		throw new Error(`${packageName}: Name must be a string.`);
-	}
-	const template = document.createElement('template');
-	template.innerHTML = content;
-	if (template.content.children.length !== 1) {
-		throw new Error(`${packageName} (${name}): Content must contain one SVG element.`);
-	}
-	const svg = template.content.firstChild;
-	if (svg.nodeName.toLowerCase() !== 'svg') {
-		throw new Error(`${packageName} (${name}): Content must be a SVG element.`);
-	}
-	setDefaultAttributes(svg, {
-		'aria-hidden': 'true',
-		fill: 'currentColor',
-		focusable: 'false',
-		height: size,
-		viewBox: `0 0 ${size} ${size}`,
-		width: size,
-		xmlns: 'http://www.w3.org/2000/svg'
-	});
-	nameToTemplateMap.set(name, template);
-	const index = nameToTemplateMap.size;
-	indexToNameMap.set(index, name);
-	style.sheet.insertRule(`${elementName} { --${name}: ${index}; }`);
-	const event = new CustomEvent(registeredEventName, {
-		detail: { name }
-	});
-	document.dispatchEvent(event);
+	window.customElements.get(elementName).register?.(name, content);
 }
 
 class RivetIconElement extends window.HTMLElement {
@@ -58,6 +30,38 @@ class RivetIconElement extends window.HTMLElement {
 		return [nameAttributeName];
 	}
 
+	static register (name, content) {
+		if (!name || typeof name !== 'string') {
+			throw new Error(`${packageName}: Name must be a string.`);
+		}
+		const template = document.createElement('template');
+		template.innerHTML = content;
+		if (template.content.children.length !== 1) {
+			throw new Error(`${packageName} (${name}): Content must contain one SVG element.`);
+		}
+		const svg = template.content.firstChild;
+		if (svg.nodeName.toLowerCase() !== 'svg') {
+			throw new Error(`${packageName} (${name}): Content must be a SVG element.`);
+		}
+		setDefaultAttributes(svg, {
+			'aria-hidden': 'true',
+			fill: 'currentColor',
+			focusable: 'false',
+			height: size,
+			viewBox: `0 0 ${size} ${size}`,
+			width: size,
+			xmlns: 'http://www.w3.org/2000/svg'
+		});
+		nameToTemplateMap.set(name, template);
+		const index = nameToTemplateMap.size;
+		indexToNameMap.set(index, name);
+		style.sheet.insertRule(`${elementName} { --${name}: ${index}; }`);
+		const event = new CustomEvent(registeredEventName, {
+			detail: { name }
+		});
+		document.dispatchEvent(event);
+	}
+
 	attributeChangedCallback () {
 		this.#requestUpdate();
 	}
@@ -93,7 +97,9 @@ class RivetIconElement extends window.HTMLElement {
 	}
 }
 
-window.customElements.define(elementName, RivetIconElement);
+if (!window.customElements.get(elementName)) {
+	window.customElements.define(elementName, RivetIconElement);
+}
 
 //
 // Utilities