feat(ld-icon): add parts

emdgroup-liquid · Oct 27, 2021 · 91fa753 · 91fa753
1 parent c6da865
commit 91fa753
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/src/liquid/components/ld-icon/ld-icon.tsx b/src/liquid/components/ld-icon/ld-icon.tsx
@@ -6,6 +6,7 @@ import { fetchIcon } from './fetchIcon'
  * @slot - (optional) Custom SVG icon (only valid without name prop).
  * @virtualProp ref - reference to component
  * @virtualProp {string | number} key - for tracking the node's identity when working with lists
+ * @part icon - Actual SVG element
  */
 @Component({
   assetsDirs: ['assets'],
@@ -29,8 +30,9 @@ export class LdIcon {
     }
 
     const div = document.createElement('div')
+    const iconString = await fetchIcon(this.name)
 
-    div.innerHTML = await fetchIcon(this.name)
+    div.innerHTML = iconString.replace('<svg', '<svg part="icon"')
     this.element.shadowRoot.appendChild(div.firstChild)
   }
 

diff --git a/src/liquid/components/ld-icon/readme.md b/src/liquid/components/ld-icon/readme.md
@@ -258,6 +258,13 @@ Liquid's icons use the [`currentColor`](https://developer.mozilla.org/en-US/docs
 |      | (optional) Custom SVG icon (only valid without name prop). |
 
 
+## Shadow Parts
+
+| Part     | Description        |
+| -------- | ------------------ |
+| `"icon"` | Actual SVG element |
+
+
 ----------------------------------------------