From 7a62a87b9ba5a54f5f15fd03122aca5b8adc6cbd Mon Sep 17 00:00:00 2001
From: Konnor Rogers <konnor5456@gmail.com>
Date: Mon, 25 Mar 2024 11:14:04 -0400
Subject: [PATCH] apply mutator to spritesheets (#1927)

* apply mutator to spritesheets

* prettier

* Update docs/pages/resources/changelog.md

---------

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>
---
 docs/pages/resources/changelog.md     |  3 ++-
 src/components/icon/icon.component.ts | 14 +++++++++++++-
 src/components/icon/icon.test.ts      |  4 ++++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index 902e9a35..dec12c60 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -16,7 +16,8 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 
 - Added the Slovenian translation [#1893]
 - Added support for `contextElement` to `VirtualElements` in `<sl-popup>` [#1874]
-- Fixed a bug in `.sl-scroll-lock` causing layout shifts. [#1895]
+- Fixed a bug in `<sl-icon>` that did not properly apply mutators to spritesheets [#1927]
+- Fixed a bug in `.sl-scroll-lock` causing layout shifts [#1895]
 - Fixed a bug in `<sl-rating>` that caused the rating to not reset in some circumstances [#1877]
 - Fixed a bug in `<sl-select>` that caused the menu to not close when rendered in a shadow root [#1878]
 - Fixed a bug in `<sl-tree>` that caused a new stacking context resulting in tooltips being clipped [#1709]
diff --git a/src/components/icon/icon.component.ts b/src/components/icon/icon.component.ts
index 69ee3b03..7b2878dc 100644
--- a/src/components/icon/icon.component.ts
+++ b/src/components/icon/icon.component.ts
@@ -42,9 +42,21 @@ export default class SlIcon extends ShoelaceElement {
     let fileData: Response;
 
     if (library?.spriteSheet) {
-      return html`<svg part="svg">
+      this.svg = html`<svg part="svg">
         <use part="use" href="${url}"></use>
       </svg>`;
+
+      // Using a templateResult requires the SVG to be written to the DOM first before we can grab the SVGElement
+      // to be passed to the library's mutator function.
+      await this.updateComplete;
+
+      const svg = this.shadowRoot!.querySelector("[part='svg']")!;
+
+      if (typeof library.mutator === 'function') {
+        library.mutator(svg as SVGElement);
+      }
+
+      return this.svg;
     }
 
     try {
diff --git a/src/components/icon/icon.test.ts b/src/components/icon/icon.test.ts
index 260ad339..0361c83d 100644
--- a/src/components/icon/icon.test.ts
+++ b/src/components/icon/icon.test.ts
@@ -204,6 +204,10 @@ describe('<sl-icon>', () => {
       const rect = use?.getBoundingClientRect();
       expect(rect?.width).to.equal(0);
       expect(rect?.width).to.equal(0);
+
+      // Make sure the mutator is applied.
+      // https://github.com/shoelace-style/shoelace/issues/1925
+      expect(svg?.getAttribute('fill')).to.equal('currentColor');
     });
 
     // TODO: <use> svg icons don't emit a "load" or "error" event...if we can figure out how to get the event to emit errors.