From de4221365adb662205820defa90ccaf86b377127 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Fri, 9 May 2025 12:47:39 -0400
Subject: [PATCH] Drop `spriteSheet` option, add `getMarkup` option instead

---
 src/components/icon/icon.ts    |  5 ++---
 src/components/icon/library.ts | 12 +++++++-----
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 0c68b5e8b..8852e424a 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -22,11 +22,10 @@ import type { HTMLTemplateResult, PropertyValues } from 'lit';
  * @status stable
  * @since 2.0
  *
- * @event wa-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
- * @event wa-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
+ * @event wa-load - Emitted when the icon has loaded.
+ * @event wa-error - Emitted when the icon fails to load due to an error.
  *
  * @csspart svg - The internal SVG element.
- * @csspart use - The `<use>` element generated when using `spriteSheet: true`
  *
  * @cssproperty [--primary-color=currentColor] - Sets a duotone icon's primary color.
  * @cssproperty [--primary-opacity=1] - Sets a duotone icon's primary opacity.
diff --git a/src/components/icon/library.ts b/src/components/icon/library.ts
index 130edcc5a..6b040a5c2 100644
--- a/src/components/icon/library.ts
+++ b/src/components/icon/library.ts
@@ -29,7 +29,6 @@ export default class IconLibrary {
   readonly name: string;
   readonly mutator?: IconLibraryMutator;
   readonly system?: IconMapping;
-  readonly spriteSheet?: boolean;
   readonly fallback?: IconMapping;
 
   /** Inlined markup, keyed by URL */
@@ -46,7 +45,6 @@ export default class IconLibrary {
     this.name = library.name;
     this.mutator = library.mutator;
     this.system = library.system;
-    this.spriteSheet = library.spriteSheet;
     this.fallback = library.fallback ?? defaultFallback;
 
     if (library.inlined) {
@@ -88,6 +86,9 @@ export default class IconLibrary {
     return name;
   }
 
+  /**
+   * Convert a URL into a cache key
+   */
   getCacheKey(url: string) {
     return this.spec.getCacheKey?.(url) ?? url;
   }
@@ -96,8 +97,8 @@ export default class IconLibrary {
    * Fetch the markup for an icon as a string
    */
   getMarkup(url: string): IconFetchedResult | Promise<IconFetchedResult> {
-    if (this.spriteSheet) {
-      return `<svg><use part="use" href="${url}"></use></svg>`;
+    if (this.spec.getMarkup) {
+      return this.spec.getMarkup(url);
     }
 
     let cacheKey = this.getCacheKey(url);
@@ -243,6 +244,7 @@ export type IconMapping = (name: string, family?: string, variant?: string) => I
 export type IconLibraryGetKey = (name: string) => string;
 export type IconLibraryMutator = (svg: SVGElement) => void;
 export type IconFetchedResult = string | typeof CACHEABLE_ERROR | typeof RETRYABLE_ERROR;
+export type IconLibraryGetMarkup = (url: string) => string | Promise<string>;
 
 export type IconLibraryCacheFlat = Record<string, string>;
 export type IconLibraryCacheDeep =
@@ -257,7 +259,7 @@ export interface UnregisteredIconLibrary {
   fallback?: IconMapping;
   mutator?: IconLibraryMutator;
   getCacheKey?: IconLibraryGetKey;
-  spriteSheet?: boolean;
+  getMarkup?: IconLibraryGetMarkup;
 
   // Max depth: family → variant → icon name → markup
   // but may be shallower for libraries that don't use variants or families