add svg part

docs/resources/changelog.md

@@ -9,6 +9,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 ## Next
 
 - Added TypeScript types to all custom events [#1183](https://github.com/shoelace-style/shoelace/pull/1183)
+- Added the `svg` part to `<sl-icon>`
 - Fixed a bug in `<sl-select>` that caused the display label to render incorrectly in Chrome after form validation [#1197](https://github.com/shoelace-style/shoelace/discussions/1197)
 - Fixed a bug in `<sl-input>` that prevented users from applying their own value for `autocapitalize`, `autocomplete`, and `autocorrect` when using `type="password` [#1205](https://github.com/shoelace-style/shoelace/issues/1205)
 - Fixed a bug in `<sl-tab-group>` that prevented scroll controls from showing when dynamically adding tabs [#1208](https://github.com/shoelace-style/shoelace/issues/1208)

src/components/icon/icon.test.ts

@@ -95,6 +95,7 @@ describe('<sl-icon>', () => {
       await elementUpdated(el);
 
       expect(el.shadowRoot?.querySelector('svg')).to.exist;
+      expect(el.shadowRoot?.querySelector('svg')?.part.contains('svg')).to.be.true;
       expect(el.shadowRoot?.querySelector('svg')?.getAttribute('id')).to.equal(fakeId);
     });
   });

src/components/icon/icon.ts

@@ -18,6 +18,8 @@ let parser: DOMParser;
  *
  * @event sl-load - Emitted when the icon has loaded.
  * @event sl-error - Emitted when the icon fails to load due to an error.
+ *
+ * @csspart svg - The internal SVG element.
  */
 @customElement('sl-icon')
 export default class SlIcon extends ShoelaceElement {
@@ -102,6 +104,7 @@ export default class SlIcon extends ShoelaceElement {
           const svgEl = doc.body.querySelector('svg');
 
           if (svgEl !== null) {
+            svgEl.part.add('svg');
             library?.mutator?.(svgEl);
             this.svg = svgEl.outerHTML;
             this.emit('sl-load');