feat(components): replace svg tag in icon component (#2412)

swisspost · Dec 21, 2023 · 2bbf350 · 2bbf350
1 parent dbb9779
commit 2bbf350
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/packages/components/src/components/post-icon/post-icon.scss b/packages/components/src/components/post-icon/post-icon.scss
@@ -12,10 +12,11 @@ $post-icon-animations: (
 :host {
   display: inline-block;
   width: 1em;
+  height: 1em;
   vertical-align: -0.15em;
 }
 
-svg {
+span {
   display: block;
   width: 100%;
   height: 100%;

diff --git a/packages/components/src/components/post-icon/post-icon.tsx b/packages/components/src/components/post-icon/post-icon.tsx
@@ -142,16 +142,15 @@ export class PostIcon {
     const svgStyles = Object.entries({
       '-webkit-mask-image': `url('${this.path}')`,
       'mask-image': `url('${this.path}')`,
-      'scale': this.scale && !isNaN(Number(this.scale)) ? `${this.scale}` : null,
-      'rotate': this.rotate && !isNaN(Number(this.rotate)) ? `${this.rotate}deg` : null,
+      'transform':
+        (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
+        (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
     })
       .filter(([_key, value]) => value !== null)
       .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
-
     return (
       <Host data-version={version}>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style={svgStyles}>
-        </svg>
+        <span style={svgStyles}></span>
       </Host>
     );
   }