Merge pull request #95 from CSCfi/c-icon-path

fix: c-icon - make c-icon render correctly inside c-option
CSCfi · Dec 20, 2023 · 6e1257e · 6e1257e
2 parents c8862e3 + 1e15b5f
commit 6e1257e
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/packages/csc-ui/src/components/c-icon/c-icon.tsx b/packages/csc-ui/src/components/c-icon/c-icon.tsx
@@ -26,16 +26,24 @@ export class CIcon {
    */
   @Prop() color = 'currentColor';
 
+  private _pathElement: SVGElement;
+
+  componentDidLoad() {
+    // workaround to make the icon work as a c-option child
+    this._pathElement.setAttribute('d', this.host.dataset.path);
+  }
+
   render() {
     return (
       <Host
         style={{
           '--_c-icon-size': `${this.size}px`,
           '--_c-icon-default-color': this.color,
         }}
+        data-path={this.path}
       >
         <svg viewBox="0 0 24 24">
-          <path d={this.path} />
+          <path ref={(el) => (this._pathElement = el)} />
         </svg>
       </Host>
     );