diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 902e9a35..9c9ad41f 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -16,6 +16,7 @@ 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 `` [#1874] +- Fixed a bug in `` that did not properly apply mutators to spritesheets. [#] - Fixed a bug in `.sl-scroll-lock` causing layout shifts. [#1895] - Fixed a bug in `` that caused the rating to not reset in some circumstances [#1877] - Fixed a bug in `` that caused the menu to not close when rendered in a shadow root [#1878] @@ -1731,4 +1732,4 @@ The following pages demonstrate why this change was necessary. ## 2.0.0-beta.1 -- Initial release +- Initial release \ No newline at end of file diff --git a/src/components/icon/icon.component.ts b/src/components/icon/icon.component.ts index 69ee3b03..25954311 100644 --- a/src/components/icon/icon.component.ts +++ b/src/components/icon/icon.component.ts @@ -42,9 +42,22 @@ export default class SlIcon extends ShoelaceElement { let fileData: Response; if (library?.spriteSheet) { - return html` + this.svg = html` `; + + + // 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']") as SVGSVGElement + + if (typeof library.mutator === "function") { + library.mutator(svg) + } + + return this.svg } try { diff --git a/src/components/icon/icon.test.ts b/src/components/icon/icon.test.ts index 260ad339..2b960d7d 100644 --- a/src/components/icon/icon.test.ts +++ b/src/components/icon/icon.test.ts @@ -204,6 +204,10 @@ describe('', () => { 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: svg icons don't emit a "load" or "error" event...if we can figure out how to get the event to emit errors.