@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/icons/IconSocialLinkedinStatic.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--linkedinStatic"><path fill="#069" d="M2 2.86A.87.87 0 0 1 2.881 2h10.162a.87.87 0 0 1 .881.86v10.28a.87.87 0 0 1-.88.86H2.88A.87.87 0 0 1 2 13.14V2.86Z"></path><path fill="#fff" fill-rule="evenodd" d="M5.614 12.045V6.627h-1.8v5.418h1.8Zm-.9-6.158c.628 0 1.019-.416 1.019-.936-.012-.532-.391-.937-1.007-.937-.616 0-1.02.405-1.02.937 0 .52.392.936.996.936h.012Z" clip-rule="evenodd"></path><path fill="#fff" fill-rule="evenodd" d="M6.61 12.045h1.802V9.02c0-.162.012-.324.06-.44.13-.323.426-.658.923-.658.652 0 .913.497.913 1.225v2.9h1.8V8.937c0-1.664-.888-2.439-2.073-2.439-.971 0-1.398.544-1.635.913h.012v-.785H6.611c.024.508 0 5.418 0 5.418Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--linkedinStatic"><path fill="#069" d="M2 2.86A.87.87 0 0 1 2.881 2h10.162a.87.87 0 0 1 .881.86v10.28a.87.87 0 0 1-.88.86H2.88A.87.87 0 0 1 2 13.14V2.86Z"></path><path fill="#fff" fill-rule="evenodd" d="M5.614 12.045V6.627h-1.8v5.418h1.8Zm-.9-6.158c.628 0 1.019-.416 1.019-.936-.012-.532-.391-.937-1.007-.937-.616 0-1.02.405-1.02.937 0 .52.392.936.996.936h.012Z" clip-rule="evenodd"></path><path fill="#fff" fill-rule="evenodd" d="M6.61 12.045h1.802V9.02c0-.162.012-.324.06-.44.13-.323.426-.658.923-.658.652 0 .913.497.913 1.225v2.9h1.8V8.937c0-1.664-.888-2.439-2.073-2.439-.971 0-1.398.544-1.635.913h.012v-.785H6.611c.024.508 0 5.418 0 5.418Z" clip-rule="evenodd"></path></svg>';
 
 export class IconSocialLinkedinStatic extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialLinkedinStatic extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--linkedinStatic', '', null, 'IconSocialLinkedinStatic');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--linkedinStatic', '', null, 'IconSocialLinkedinStatic');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--linkedinStatic');
         this.root.append(svg);
     }

package/icons/IconSocialLinkedinStaticLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--linkedinStaticLarge"><path fill="#069" d="M4 5.72C4 4.77 4.794 4 5.774 4h20.452C27.206 4 28 4.77 28 5.72v20.56c0 .95-.794 1.72-1.774 1.72H5.774C4.794 28 4 27.23 4 26.28V5.72Z"></path><path fill="#fff" fill-rule="evenodd" d="M11.274 24.09V13.253H7.65V24.09h3.625ZM9.462 11.774c1.264 0 2.05-.833 2.05-1.873-.023-1.063-.786-1.872-2.026-1.872-1.24 0-2.05.809-2.05 1.872 0 1.04.786 1.873 2.002 1.873h.024Z" clip-rule="evenodd"></path><path fill="#fff" fill-rule="evenodd" d="M13.28 24.09h3.625v-6.052c0-.323.024-.647.12-.878.262-.648.858-1.318 1.86-1.318 1.311 0 1.836.994 1.836 2.45v5.798h3.625v-6.213c0-3.33-1.789-4.878-4.174-4.878-1.955 0-2.814 1.086-3.29 1.826h.023v-1.572H13.28c.048 1.017 0 10.837 0 10.837Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--linkedinStaticLarge"><path fill="#069" d="M4 5.72C4 4.77 4.794 4 5.774 4h20.452C27.206 4 28 4.77 28 5.72v20.56c0 .95-.794 1.72-1.774 1.72H5.774C4.794 28 4 27.23 4 26.28V5.72Z"></path><path fill="#fff" fill-rule="evenodd" d="M11.274 24.09V13.253H7.65V24.09h3.625ZM9.462 11.774c1.264 0 2.05-.833 2.05-1.873-.023-1.063-.786-1.872-2.026-1.872-1.24 0-2.05.809-2.05 1.872 0 1.04.786 1.873 2.002 1.873h.024Z" clip-rule="evenodd"></path><path fill="#fff" fill-rule="evenodd" d="M13.28 24.09h3.625v-6.052c0-.323.024-.647.12-.878.262-.648.858-1.318 1.86-1.318 1.311 0 1.836.994 1.836 2.45v5.798h3.625v-6.213c0-3.33-1.789-4.878-4.174-4.878-1.955 0-2.814 1.086-3.29 1.826h.023v-1.572H13.28c.048 1.017 0 10.837 0 10.837Z" clip-rule="evenodd"></path></svg>';
 
 export class IconSocialLinkedinStaticLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialLinkedinStaticLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--linkedinStaticLarge', '', null, 'IconSocialLinkedinStaticLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--linkedinStaticLarge', '', null, 'IconSocialLinkedinStaticLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--linkedinStaticLarge');
         this.root.append(svg);
     }

package/icons/IconSocialMicrosoftCircle.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--microsoftCircle"><g clip-path="url(#prefix__clip0_2820_3490)"><path d="M8 1.175A6.781 6.781 0 1 0 14.78 8 6.79 6.79 0 0 0 8 1.175Zm0 12.25A5.468 5.468 0 1 1 8 2.488a5.468 5.468 0 0 1 0 10.937Z"></path><path d="M7.71 11H5V8.285h2.726L7.71 11Z"></path><path d="M11 11H8.274V8.285H11V11Z"></path><path d="M7.71 7.715H5V5h2.726L7.71 7.715Z"></path><path d="M11 7.715H8.274V5H11v2.715Z"></path></g><defs><clipPath id="prefix__clip0_2820_3490"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--microsoftCircle"><g clip-path="url(#prefix__clip0_2820_3490)"><path d="M8 1.175A6.781 6.781 0 1 0 14.78 8 6.79 6.79 0 0 0 8 1.175Zm0 12.25A5.468 5.468 0 1 1 8 2.488a5.468 5.468 0 0 1 0 10.937Z"></path><path d="M7.71 11H5V8.285h2.726L7.71 11Z"></path><path d="M11 11H8.274V8.285H11V11Z"></path><path d="M7.71 7.715H5V5h2.726L7.71 7.715Z"></path><path d="M11 7.715H8.274V5H11v2.715Z"></path></g><defs><clipPath id="prefix__clip0_2820_3490"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconSocialMicrosoftCircle extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialMicrosoftCircle extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--microsoftCircle', '', null, 'IconSocialMicrosoftCircle');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--microsoftCircle', '', null, 'IconSocialMicrosoftCircle');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--microsoftCircle');
         this.root.append(svg);
     }

package/icons/IconSocialMicrosoftCircleFilled.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--microsoftCircleFilled"><g clip-path="url(#prefix__clip0_2820_3487)"><path fill-rule="evenodd" d="M4.237 2.315A6.781 6.781 0 0 1 8 1.175 6.79 6.79 0 0 1 14.78 8 6.781 6.781 0 1 1 4.237 2.315Zm3.473 5.4H5V5h2.726L7.71 7.715ZM5 11h2.71l.016-2.715H5V11Zm3.274 0H11V8.285H8.274V11Zm0-3.285H11V5H8.274v2.715Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_2820_3487"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--microsoftCircleFilled"><g clip-path="url(#prefix__clip0_2820_3487)"><path fill-rule="evenodd" d="M4.237 2.315A6.781 6.781 0 0 1 8 1.175 6.79 6.79 0 0 1 14.78 8 6.781 6.781 0 1 1 4.237 2.315Zm3.473 5.4H5V5h2.726L7.71 7.715ZM5 11h2.71l.016-2.715H5V11Zm3.274 0H11V8.285H8.274V11Zm0-3.285H11V5H8.274v2.715Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_2820_3487"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconSocialMicrosoftCircleFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialMicrosoftCircleFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--microsoftCircleFilled', '', null, 'IconSocialMicrosoftCircleFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--microsoftCircleFilled', '', null, 'IconSocialMicrosoftCircleFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--microsoftCircleFilled');
         this.root.append(svg);
     }

package/icons/IconSocialMicrosoftCircleFilledLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--microsoftCircleFilledLarge"><path fill-rule="evenodd" d="M16 28.25a12.25 12.25 0 1 1 0-24.5 12.25 12.25 0 0 1 0 24.5ZM15.5 10H10v5.5h5.5V10Zm0 6.5H10V22h5.5v-5.5Zm1-6.5H22v5.5h-5.5V10Zm5.5 6.5h-5.5V22H22v-5.5Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--microsoftCircleFilledLarge"><path fill-rule="evenodd" d="M16 28.25a12.25 12.25 0 1 1 0-24.5 12.25 12.25 0 0 1 0 24.5ZM15.5 10H10v5.5h5.5V10Zm0 6.5H10V22h5.5v-5.5Zm1-6.5H22v5.5h-5.5V10Zm5.5 6.5h-5.5V22H22v-5.5Z" clip-rule="evenodd"></path></svg>';
 
 export class IconSocialMicrosoftCircleFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialMicrosoftCircleFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--microsoftCircleFilledLarge', '', null, 'IconSocialMicrosoftCircleFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--microsoftCircleFilledLarge', '', null, 'IconSocialMicrosoftCircleFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--microsoftCircleFilledLarge');
         this.root.append(svg);
     }

package/icons/IconSocialMicrosoftCircleLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--microsoftCircleLarge"><path d="M16 28.25a12.25 12.25 0 1 1 0-24.5 12.25 12.25 0 0 1 0 24.5ZM16 5.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21Z"></path><path d="M10 10h5.5v5.5H10V10Z"></path><path d="M10 16.5h5.5V22H10v-5.5Z"></path><path d="M16.5 10H22v5.5h-5.5V10Z"></path><path d="M16.5 16.5H22V22h-5.5v-5.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--microsoftCircleLarge"><path d="M16 28.25a12.25 12.25 0 1 1 0-24.5 12.25 12.25 0 0 1 0 24.5ZM16 5.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21Z"></path><path d="M10 10h5.5v5.5H10V10Z"></path><path d="M10 16.5h5.5V22H10v-5.5Z"></path><path d="M16.5 10H22v5.5h-5.5V10Z"></path><path d="M16.5 16.5H22V22h-5.5v-5.5Z"></path></svg>';
 
 export class IconSocialMicrosoftCircleLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialMicrosoftCircleLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--microsoftCircleLarge', '', null, 'IconSocialMicrosoftCircleLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--microsoftCircleLarge', '', null, 'IconSocialMicrosoftCircleLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--microsoftCircleLarge');
         this.root.append(svg);
     }

package/icons/IconSocialMicrosoftStatic.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--microsoftStatic"><g clip-path="url(#prefix__clip0_2820_3494)"><path fill="#00A3EE" d="M7.372 14.5H1.5V8.618h5.905L7.372 14.5Z"></path><path fill="#FFB700" d="M8.595 14.5H14.5V8.618H8.595V14.5Z"></path><path fill="#F15121" d="M7.372 7.382H1.5V1.5h5.905l-.033 5.882Z"></path><path fill="#7EB801" d="M14.5 7.382H8.595V1.5H14.5v5.882Z"></path></g><defs><clipPath id="prefix__clip0_2820_3494"><rect width="14" height="14" fill="#fff" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--microsoftStatic"><g clip-path="url(#prefix__clip0_2820_3494)"><path fill="#00A3EE" d="M7.372 14.5H1.5V8.618h5.905L7.372 14.5Z"></path><path fill="#FFB700" d="M8.595 14.5H14.5V8.618H8.595V14.5Z"></path><path fill="#F15121" d="M7.372 7.382H1.5V1.5h5.905l-.033 5.882Z"></path><path fill="#7EB801" d="M14.5 7.382H8.595V1.5H14.5v5.882Z"></path></g><defs><clipPath id="prefix__clip0_2820_3494"><rect width="14" height="14" fill="#fff" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconSocialMicrosoftStatic extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialMicrosoftStatic extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--microsoftStatic', '', null, 'IconSocialMicrosoftStatic');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--microsoftStatic', '', null, 'IconSocialMicrosoftStatic');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--microsoftStatic');
         this.root.append(svg);
     }

package/icons/IconSocialMicrosoftStaticLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--microsoftStaticLarge"><path fill="#F15121" d="M4 4h11v11H4V4Z"></path><path fill="#00A3EE" d="M4 17h11v11H4V17Z"></path><path fill="#7EB801" d="M17 4h11v11H17V4Z"></path><path fill="#FFB700" d="M17 17h11v11H17V17Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--microsoftStaticLarge"><path fill="#F15121" d="M4 4h11v11H4V4Z"></path><path fill="#00A3EE" d="M4 17h11v11H4V17Z"></path><path fill="#7EB801" d="M17 4h11v11H17V4Z"></path><path fill="#FFB700" d="M17 17h11v11H17V17Z"></path></svg>';
 
 export class IconSocialMicrosoftStaticLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialMicrosoftStaticLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--microsoftStaticLarge', '', null, 'IconSocialMicrosoftStaticLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--microsoftStaticLarge', '', null, 'IconSocialMicrosoftStaticLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--microsoftStaticLarge');
         this.root.append(svg);
     }

package/icons/IconSocialPinterestCircle.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--pinterestCircle"><g clip-path="url(#prefix__clip0_1611_693)"><path d="M8 1.175A6.781 6.781 0 1 0 14.78 8 6.79 6.79 0 0 0 8 1.175Zm0 12.25a5.25 5.25 0 0 1-1.671-.263c.294-.408.516-.863.656-1.347.114-.394.219-.796.324-1.19a.992.992 0 0 1 0-.131c.052.061.078.114.122.157l.123.114a1.794 1.794 0 0 0 1.46.367 2.817 2.817 0 0 0 2.092-1.382c.4-.625.618-1.35.63-2.091a3.334 3.334 0 0 0-2.249-3.325 4.314 4.314 0 0 0-2.03-.193 3.64 3.64 0 0 0-2.415 1.234 3.369 3.369 0 0 0-.437 3.71c.169.37.45.676.805.875.131.061.175 0 .21-.096.035-.097.114-.412.157-.622a.28.28 0 0 0-.052-.2 2.476 2.476 0 0 1 .525-3.343 2.739 2.739 0 0 1 2.476-.464 2.153 2.153 0 0 1 1.453 1.19c.19.416.268.874.227 1.33a3.168 3.168 0 0 1-.499 1.671 1.593 1.593 0 0 1-1.295.788.874.874 0 0 1-.875-1.112c.114-.402.237-.787.35-1.19a2.52 2.52 0 0 0 .114-.875.735.735 0 0 0-1.076-.62 1.164 1.164 0 0 0-.63.708c-.167.458-.167.96 0 1.417a.534.534 0 0 1 0 .237c-.219.936-.446 1.872-.656 2.817-.07.45-.07.907 0 1.357a5.469 5.469 0 1 1 2.16.472Z"></path></g><defs><clipPath id="prefix__clip0_1611_693"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--pinterestCircle"><g clip-path="url(#prefix__clip0_1611_693)"><path d="M8 1.175A6.781 6.781 0 1 0 14.78 8 6.79 6.79 0 0 0 8 1.175Zm0 12.25a5.25 5.25 0 0 1-1.671-.263c.294-.408.516-.863.656-1.347.114-.394.219-.796.324-1.19a.992.992 0 0 1 0-.131c.052.061.078.114.122.157l.123.114a1.794 1.794 0 0 0 1.46.367 2.817 2.817 0 0 0 2.092-1.382c.4-.625.618-1.35.63-2.091a3.334 3.334 0 0 0-2.249-3.325 4.314 4.314 0 0 0-2.03-.193 3.64 3.64 0 0 0-2.415 1.234 3.369 3.369 0 0 0-.437 3.71c.169.37.45.676.805.875.131.061.175 0 .21-.096.035-.097.114-.412.157-.622a.28.28 0 0 0-.052-.2 2.476 2.476 0 0 1 .525-3.343 2.739 2.739 0 0 1 2.476-.464 2.153 2.153 0 0 1 1.453 1.19c.19.416.268.874.227 1.33a3.168 3.168 0 0 1-.499 1.671 1.593 1.593 0 0 1-1.295.788.874.874 0 0 1-.875-1.112c.114-.402.237-.787.35-1.19a2.52 2.52 0 0 0 .114-.875.735.735 0 0 0-1.076-.62 1.164 1.164 0 0 0-.63.708c-.167.458-.167.96 0 1.417a.534.534 0 0 1 0 .237c-.219.936-.446 1.872-.656 2.817-.07.45-.07.907 0 1.357a5.469 5.469 0 1 1 2.16.472Z"></path></g><defs><clipPath id="prefix__clip0_1611_693"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconSocialPinterestCircle extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialPinterestCircle extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pinterestCircle', '', null, 'IconSocialPinterestCircle');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pinterestCircle', '', null, 'IconSocialPinterestCircle');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pinterestCircle');
         this.root.append(svg);
     }

package/icons/IconSocialPinterestCircleFilled.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--pinterestCircleFilled"><g clip-path="url(#prefix__clip0_1611_690)"><path d="M8 1.175A6.781 6.781 0 1 0 14.78 8 6.79 6.79 0 0 0 8 1.175Zm3.211 8.671a2.975 2.975 0 0 1-2.144 1.426 1.88 1.88 0 0 1-1.522-.385.583.583 0 0 1-.131-.122 1.417 1.417 0 0 1-.123-.14l-.044.131c-.105.42-.21.831-.332 1.251a5.04 5.04 0 0 1-.998 1.812l-.105.14v-.053a6.125 6.125 0 0 1 0-2.117c.22-.98.455-1.96.683-2.932a.464.464 0 0 0 0-.245 2.223 2.223 0 0 1 0-1.487 1.164 1.164 0 0 1 .63-.762.761.761 0 0 1 1.076.665c.01.297-.031.593-.122.875-.114.412-.245.823-.36 1.234a.875.875 0 0 0 .893 1.173 1.637 1.637 0 0 0 1.348-.814c.33-.525.512-1.13.525-1.75a2.722 2.722 0 0 0-.245-1.391A2.25 2.25 0 0 0 8.726 5.12a2.835 2.835 0 0 0-2.572.49 2.573 2.573 0 0 0-.552 3.447.324.324 0 0 1 .053.22c-.044.218-.105.428-.158.647-.052.218-.087.157-.218.096a1.978 1.978 0 0 1-.875-.875 3.5 3.5 0 0 1 .48-3.859 3.806 3.806 0 0 1 2.53-1.304 4.533 4.533 0 0 1 2.108.202 3.5 3.5 0 0 1 2.345 3.5 4.288 4.288 0 0 1-.656 2.161Z"></path></g><defs><clipPath id="prefix__clip0_1611_690"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--pinterestCircleFilled"><g clip-path="url(#prefix__clip0_1611_690)"><path d="M8 1.175A6.781 6.781 0 1 0 14.78 8 6.79 6.79 0 0 0 8 1.175Zm3.211 8.671a2.975 2.975 0 0 1-2.144 1.426 1.88 1.88 0 0 1-1.522-.385.583.583 0 0 1-.131-.122 1.417 1.417 0 0 1-.123-.14l-.044.131c-.105.42-.21.831-.332 1.251a5.04 5.04 0 0 1-.998 1.812l-.105.14v-.053a6.125 6.125 0 0 1 0-2.117c.22-.98.455-1.96.683-2.932a.464.464 0 0 0 0-.245 2.223 2.223 0 0 1 0-1.487 1.164 1.164 0 0 1 .63-.762.761.761 0 0 1 1.076.665c.01.297-.031.593-.122.875-.114.412-.245.823-.36 1.234a.875.875 0 0 0 .893 1.173 1.637 1.637 0 0 0 1.348-.814c.33-.525.512-1.13.525-1.75a2.722 2.722 0 0 0-.245-1.391A2.25 2.25 0 0 0 8.726 5.12a2.835 2.835 0 0 0-2.572.49 2.573 2.573 0 0 0-.552 3.447.324.324 0 0 1 .053.22c-.044.218-.105.428-.158.647-.052.218-.087.157-.218.096a1.978 1.978 0 0 1-.875-.875 3.5 3.5 0 0 1 .48-3.859 3.806 3.806 0 0 1 2.53-1.304 4.533 4.533 0 0 1 2.108.202 3.5 3.5 0 0 1 2.345 3.5 4.288 4.288 0 0 1-.656 2.161Z"></path></g><defs><clipPath id="prefix__clip0_1611_690"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconSocialPinterestCircleFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialPinterestCircleFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pinterestCircleFilled', '', null, 'IconSocialPinterestCircleFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pinterestCircleFilled', '', null, 'IconSocialPinterestCircleFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pinterestCircleFilled');
         this.root.append(svg);
     }

package/icons/IconSocialPinterestCircleFilledLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--pinterestCircleFilledLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm5.915 15.636a5.345 5.345 0 0 1-3.902 2.625 3.414 3.414 0 0 1-2.766-.682 1.946 1.946 0 0 1-.236-.228c-.07-.078-.131-.166-.227-.288 0 .105-.053.175-.07.245-.202.752-.385 1.505-.604 2.257a9.16 9.16 0 0 1-1.811 3.299c-.07.078-.123.157-.193.245l-.07-.079a11.426 11.426 0 0 1-.052-3.859c.393-1.75.831-3.543 1.242-5.32a.876.876 0 0 0 0-.446 3.963 3.963 0 0 1 0-2.695 2.135 2.135 0 0 1 1.234-1.356 1.384 1.384 0 0 1 1.899 1.146 4.377 4.377 0 0 1-.228 1.61c-.21.753-.446 1.496-.647 2.249a1.61 1.61 0 0 0 1.697 2.1 3.009 3.009 0 0 0 2.45-1.488 6.055 6.055 0 0 0 .954-3.167 4.952 4.952 0 0 0-.438-2.511 4.094 4.094 0 0 0-2.747-2.258 5.17 5.17 0 0 0-4.681.875 4.664 4.664 0 0 0-.989 6.265.621.621 0 0 1 .088.394c-.08.393-.184.787-.29 1.172-.104.385-.165.298-.393.175a3.614 3.614 0 0 1-1.531-1.584 6.37 6.37 0 0 1 .814-7 6.843 6.843 0 0 1 4.585-2.362 8.077 8.077 0 0 1 3.84.367 6.309 6.309 0 0 1 4.253 6.318 7.762 7.762 0 0 1-1.181 3.981Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--pinterestCircleFilledLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm5.915 15.636a5.345 5.345 0 0 1-3.902 2.625 3.414 3.414 0 0 1-2.766-.682 1.946 1.946 0 0 1-.236-.228c-.07-.078-.131-.166-.227-.288 0 .105-.053.175-.07.245-.202.752-.385 1.505-.604 2.257a9.16 9.16 0 0 1-1.811 3.299c-.07.078-.123.157-.193.245l-.07-.079a11.426 11.426 0 0 1-.052-3.859c.393-1.75.831-3.543 1.242-5.32a.876.876 0 0 0 0-.446 3.963 3.963 0 0 1 0-2.695 2.135 2.135 0 0 1 1.234-1.356 1.384 1.384 0 0 1 1.899 1.146 4.377 4.377 0 0 1-.228 1.61c-.21.753-.446 1.496-.647 2.249a1.61 1.61 0 0 0 1.697 2.1 3.009 3.009 0 0 0 2.45-1.488 6.055 6.055 0 0 0 .954-3.167 4.952 4.952 0 0 0-.438-2.511 4.094 4.094 0 0 0-2.747-2.258 5.17 5.17 0 0 0-4.681.875 4.664 4.664 0 0 0-.989 6.265.621.621 0 0 1 .088.394c-.08.393-.184.787-.29 1.172-.104.385-.165.298-.393.175a3.614 3.614 0 0 1-1.531-1.584 6.37 6.37 0 0 1 .814-7 6.843 6.843 0 0 1 4.585-2.362 8.077 8.077 0 0 1 3.84.367 6.309 6.309 0 0 1 4.253 6.318 7.762 7.762 0 0 1-1.181 3.981Z"></path></svg>';
 
 export class IconSocialPinterestCircleFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialPinterestCircleFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pinterestCircleFilledLarge', '', null, 'IconSocialPinterestCircleFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pinterestCircleFilledLarge', '', null, 'IconSocialPinterestCircleFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pinterestCircleFilledLarge');
         this.root.append(svg);
     }

package/icons/IconSocialPinterestCircleLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--pinterestCircleLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm0 22.75a10.344 10.344 0 0 1-3.141-.481 8.646 8.646 0 0 0 1.233-2.538c.22-.761.403-1.531.604-2.292 0-.07.044-.131.079-.245.066.106.142.206.227.297.073.083.152.159.237.228a3.5 3.5 0 0 0 2.8.691 5.407 5.407 0 0 0 3.937-2.625 7.875 7.875 0 0 0 1.199-3.999 6.38 6.38 0 0 0-4.296-6.378 8.26 8.26 0 0 0-3.885-.377 7 7 0 0 0-4.638 2.389 6.431 6.431 0 0 0-.822 7.088 3.63 3.63 0 0 0 1.54 1.6c.245.123.341.08.411-.174.096-.394.21-.788.28-1.19a.57.57 0 0 0-.079-.394 4.707 4.707 0 0 1 .998-6.335 5.25 5.25 0 0 1 4.734-.875 4.131 4.131 0 0 1 2.773 2.284c.366.793.52 1.667.447 2.537a6.264 6.264 0 0 1-.963 3.203 3.055 3.055 0 0 1-2.485 1.461 1.627 1.627 0 0 1-1.706-2.126c.201-.761.437-1.514.647-2.266a4.683 4.683 0 0 0 .236-1.628 1.4 1.4 0 0 0-1.977-1.234 2.133 2.133 0 0 0-1.242 1.374 3.981 3.981 0 0 0 0 2.721c.034.147.034.3 0 .447-.42 1.75-.875 3.587-1.26 5.38a8.698 8.698 0 0 0-.044 2.582A10.5 10.5 0 1 1 16 26.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--pinterestCircleLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm0 22.75a10.344 10.344 0 0 1-3.141-.481 8.646 8.646 0 0 0 1.233-2.538c.22-.761.403-1.531.604-2.292 0-.07.044-.131.079-.245.066.106.142.206.227.297.073.083.152.159.237.228a3.5 3.5 0 0 0 2.8.691 5.407 5.407 0 0 0 3.937-2.625 7.875 7.875 0 0 0 1.199-3.999 6.38 6.38 0 0 0-4.296-6.378 8.26 8.26 0 0 0-3.885-.377 7 7 0 0 0-4.638 2.389 6.431 6.431 0 0 0-.822 7.088 3.63 3.63 0 0 0 1.54 1.6c.245.123.341.08.411-.174.096-.394.21-.788.28-1.19a.57.57 0 0 0-.079-.394 4.707 4.707 0 0 1 .998-6.335 5.25 5.25 0 0 1 4.734-.875 4.131 4.131 0 0 1 2.773 2.284c.366.793.52 1.667.447 2.537a6.264 6.264 0 0 1-.963 3.203 3.055 3.055 0 0 1-2.485 1.461 1.627 1.627 0 0 1-1.706-2.126c.201-.761.437-1.514.647-2.266a4.683 4.683 0 0 0 .236-1.628 1.4 1.4 0 0 0-1.977-1.234 2.133 2.133 0 0 0-1.242 1.374 3.981 3.981 0 0 0 0 2.721c.034.147.034.3 0 .447-.42 1.75-.875 3.587-1.26 5.38a8.698 8.698 0 0 0-.044 2.582A10.5 10.5 0 1 1 16 26.5Z"></path></svg>';
 
 export class IconSocialPinterestCircleLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialPinterestCircleLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pinterestCircleLarge', '', null, 'IconSocialPinterestCircleLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pinterestCircleLarge', '', null, 'IconSocialPinterestCircleLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pinterestCircleLarge');
         this.root.append(svg);
     }

package/icons/IconSocialPinterestStatic.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--pinterestStatic"><g clip-path="url(#prefix__clip0_1615_900)"><path fill="#E60023" d="M8 1.875a6.125 6.125 0 0 0-2.232 11.83c-.054-.484-.102-1.23.021-1.758.111-.478.718-3.045.718-3.045s-.183-.367-.183-.91c0-.851.494-1.487 1.108-1.487.523 0 .775.393.775.863 0 .526-.334 1.311-.507 2.04-.144.609.306 1.106.907 1.106 1.089 0 1.926-1.148 1.926-2.805 0-1.466-1.054-2.492-2.559-2.492-1.743 0-2.766 1.308-2.766 2.659 0 .526.203 1.09.456 1.397.05.061.058.114.043.176l-.17.695c-.027.112-.09.136-.205.082-.765-.357-1.243-1.475-1.243-2.373 0-1.932 1.403-3.707 4.047-3.707 2.124 0 3.776 1.514 3.776 3.538 0 2.11-1.332 3.81-3.179 3.81-.62 0-1.204-.323-1.404-.704l-.381 1.456c-.139.532-.512 1.199-.762 1.606A6.125 6.125 0 1 0 8 1.875Z"></path></g><defs><clipPath id="prefix__clip0_1615_900"><rect width="14" height="14" fill="#fff" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--pinterestStatic"><g clip-path="url(#prefix__clip0_1615_900)"><path fill="#E60023" d="M8 1.875a6.125 6.125 0 0 0-2.232 11.83c-.054-.484-.102-1.23.021-1.758.111-.478.718-3.045.718-3.045s-.183-.367-.183-.91c0-.851.494-1.487 1.108-1.487.523 0 .775.393.775.863 0 .526-.334 1.311-.507 2.04-.144.609.306 1.106.907 1.106 1.089 0 1.926-1.148 1.926-2.805 0-1.466-1.054-2.492-2.559-2.492-1.743 0-2.766 1.308-2.766 2.659 0 .526.203 1.09.456 1.397.05.061.058.114.043.176l-.17.695c-.027.112-.09.136-.205.082-.765-.357-1.243-1.475-1.243-2.373 0-1.932 1.403-3.707 4.047-3.707 2.124 0 3.776 1.514 3.776 3.538 0 2.11-1.332 3.81-3.179 3.81-.62 0-1.204-.323-1.404-.704l-.381 1.456c-.139.532-.512 1.199-.762 1.606A6.125 6.125 0 1 0 8 1.875Z"></path></g><defs><clipPath id="prefix__clip0_1615_900"><rect width="14" height="14" fill="#fff" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconSocialPinterestStatic extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialPinterestStatic extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pinterestStatic', '', null, 'IconSocialPinterestStatic');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pinterestStatic', '', null, 'IconSocialPinterestStatic');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pinterestStatic');
         this.root.append(svg);
     }

package/icons/IconSocialPinterestStaticLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--pinterestStaticLarge"><path fill="#E60023" d="M16 3.75C9.235 3.75 3.75 9.235 3.75 16c0 5.19 3.229 9.626 7.786 11.411-.107-.97-.204-2.46.042-3.518.223-.956 1.437-6.089 1.437-6.089s-.367-.734-.367-1.819c0-1.703.988-2.975 2.217-2.975 1.045 0 1.55.785 1.55 1.726 0 1.051-.67 2.622-1.015 4.079-.288 1.219.612 2.213 1.814 2.213 2.178 0 3.851-2.295 3.851-5.61 0-2.932-2.107-4.983-5.117-4.983-3.485 0-5.531 2.614-5.531 5.316 0 1.053.405 2.182.912 2.796.1.121.114.227.084.351-.093.387-.3 1.219-.34 1.39-.053.224-.177.271-.41.163-1.53-.712-2.486-2.949-2.486-4.746 0-3.864 2.808-7.413 8.094-7.413 4.25 0 7.552 3.028 7.552 7.075 0 4.222-2.662 7.62-6.357 7.62-1.241 0-2.408-.645-2.807-1.407 0 0-.615 2.34-.764 2.912-.276 1.064-1.023 2.398-1.522 3.212 1.146.355 2.364.546 3.627.546 6.765 0 12.25-5.485 12.25-12.25S22.765 3.75 16 3.75Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--pinterestStaticLarge"><path fill="#E60023" d="M16 3.75C9.235 3.75 3.75 9.235 3.75 16c0 5.19 3.229 9.626 7.786 11.411-.107-.97-.204-2.46.042-3.518.223-.956 1.437-6.089 1.437-6.089s-.367-.734-.367-1.819c0-1.703.988-2.975 2.217-2.975 1.045 0 1.55.785 1.55 1.726 0 1.051-.67 2.622-1.015 4.079-.288 1.219.612 2.213 1.814 2.213 2.178 0 3.851-2.295 3.851-5.61 0-2.932-2.107-4.983-5.117-4.983-3.485 0-5.531 2.614-5.531 5.316 0 1.053.405 2.182.912 2.796.1.121.114.227.084.351-.093.387-.3 1.219-.34 1.39-.053.224-.177.271-.41.163-1.53-.712-2.486-2.949-2.486-4.746 0-3.864 2.808-7.413 8.094-7.413 4.25 0 7.552 3.028 7.552 7.075 0 4.222-2.662 7.62-6.357 7.62-1.241 0-2.408-.645-2.807-1.407 0 0-.615 2.34-.764 2.912-.276 1.064-1.023 2.398-1.522 3.212 1.146.355 2.364.546 3.627.546 6.765 0 12.25-5.485 12.25-12.25S22.765 3.75 16 3.75Z"></path></svg>';
 
 export class IconSocialPinterestStaticLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialPinterestStaticLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pinterestStaticLarge', '', null, 'IconSocialPinterestStaticLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pinterestStaticLarge', '', null, 'IconSocialPinterestStaticLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pinterestStaticLarge');
         this.root.append(svg);
     }

package/icons/IconSocialTwitterCircle.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--twitterCircle"><g clip-path="url(#prefix__clip0_889_616)"><path d="M11.22 5.786c.339-.195.596-.506.726-.875-.325.192-.68.328-1.05.403a1.654 1.654 0 0 0-2.852 1.47 4.725 4.725 0 0 1-3.413-1.75 1.662 1.662 0 0 0 .516 2.205 1.698 1.698 0 0 1-.752-.21v.096A1.662 1.662 0 0 0 5.76 8.7c-.143.035-.29.053-.438.052a1.75 1.75 0 0 1-.306 0A1.636 1.636 0 0 0 6.556 9.9a3.308 3.308 0 0 1-2.056.726h-.394A4.699 4.699 0 0 0 11.342 6.6v-.219c.328-.236.607-.533.823-.875a3.15 3.15 0 0 1-.945.28Z"></path><path d="M8 1.175A6.781 6.781 0 1 0 14.78 8 6.79 6.79 0 0 0 8 1.175Zm0 12.25A5.468 5.468 0 1 1 8 2.488a5.468 5.468 0 0 1 0 10.937Z"></path></g><defs><clipPath id="prefix__clip0_889_616"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--twitterCircle"><g clip-path="url(#prefix__clip0_889_616)"><path d="M11.22 5.786c.339-.195.596-.506.726-.875-.325.192-.68.328-1.05.403a1.654 1.654 0 0 0-2.852 1.47 4.725 4.725 0 0 1-3.413-1.75 1.662 1.662 0 0 0 .516 2.205 1.698 1.698 0 0 1-.752-.21v.096A1.662 1.662 0 0 0 5.76 8.7c-.143.035-.29.053-.438.052a1.75 1.75 0 0 1-.306 0A1.636 1.636 0 0 0 6.556 9.9a3.308 3.308 0 0 1-2.056.726h-.394A4.699 4.699 0 0 0 11.342 6.6v-.219c.328-.236.607-.533.823-.875a3.15 3.15 0 0 1-.945.28Z"></path><path d="M8 1.175A6.781 6.781 0 1 0 14.78 8 6.79 6.79 0 0 0 8 1.175Zm0 12.25A5.468 5.468 0 1 1 8 2.488a5.468 5.468 0 0 1 0 10.937Z"></path></g><defs><clipPath id="prefix__clip0_889_616"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconSocialTwitterCircle extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialTwitterCircle extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--twitterCircle', '', null, 'IconSocialTwitterCircle');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--twitterCircle', '', null, 'IconSocialTwitterCircle');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--twitterCircle');
         this.root.append(svg);
     }

package/icons/IconSocialTwitterCircleFilled.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--twitterCircleFilled"><g clip-path="url(#prefix__clip0_1611_646)"><path d="M8.14 1.411A6.615 6.615 0 1 0 14.755 8 6.624 6.624 0 0 0 8.14 1.411Zm3.202 4.97V6.6a4.7 4.7 0 0 1-7.236 3.955l.394.07a3.307 3.307 0 0 0 2.056-.709 1.636 1.636 0 0 1-1.54-1.19c.102.01.204.01.306 0 .148 0 .295-.017.438-.052a1.663 1.663 0 0 1-1.33-1.549c.23.128.489.2.752.21a1.663 1.663 0 0 1-.516-2.205A4.725 4.725 0 0 0 8.08 6.88a1.75 1.75 0 0 1-.08-.472 1.654 1.654 0 0 1 2.862-1.13c.37-.074.725-.21 1.05-.402-.13.37-.387.68-.726.875.326-.035.645-.12.945-.253a3.169 3.169 0 0 1-.788.883Z"></path></g><defs><clipPath id="prefix__clip0_1611_646"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--twitterCircleFilled"><g clip-path="url(#prefix__clip0_1611_646)"><path d="M8.14 1.411A6.615 6.615 0 1 0 14.755 8 6.624 6.624 0 0 0 8.14 1.411Zm3.202 4.97V6.6a4.7 4.7 0 0 1-7.236 3.955l.394.07a3.307 3.307 0 0 0 2.056-.709 1.636 1.636 0 0 1-1.54-1.19c.102.01.204.01.306 0 .148 0 .295-.017.438-.052a1.663 1.663 0 0 1-1.33-1.549c.23.128.489.2.752.21a1.663 1.663 0 0 1-.516-2.205A4.725 4.725 0 0 0 8.08 6.88a1.75 1.75 0 0 1-.08-.472 1.654 1.654 0 0 1 2.862-1.13c.37-.074.725-.21 1.05-.402-.13.37-.387.68-.726.875.326-.035.645-.12.945-.253a3.169 3.169 0 0 1-.788.883Z"></path></g><defs><clipPath id="prefix__clip0_1611_646"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconSocialTwitterCircleFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialTwitterCircleFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--twitterCircleFilled', '', null, 'IconSocialTwitterCircleFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--twitterCircleFilled', '', null, 'IconSocialTwitterCircleFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--twitterCircleFilled');
         this.root.append(svg);
     }

package/icons/IconSocialTwitterCircleFilledLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--twitterCircleFilledLarge"><path d="M16 3.671a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm6.125 10.01v.377a8.4 8.4 0 0 1-12.889 7.078 5.888 5.888 0 0 0 4.366-1.225 2.95 2.95 0 0 1-2.756-2.047c.182.035.367.053.552.052a2.84 2.84 0 0 0 .778-.105 2.957 2.957 0 0 1-2.362-2.896c.408.226.864.352 1.33.368a2.957 2.957 0 0 1-.875-3.947 8.347 8.347 0 0 0 6.125 3.089 2.841 2.841 0 0 1-.079-.674 2.949 2.949 0 0 1 2.879-3.001 2.984 2.984 0 0 1 2.161.928 5.782 5.782 0 0 0 1.872-.718 2.984 2.984 0 0 1-1.294 1.636 5.88 5.88 0 0 0 1.697-.463 6.3 6.3 0 0 1-1.505 1.548Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--twitterCircleFilledLarge"><path d="M16 3.671a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm6.125 10.01v.377a8.4 8.4 0 0 1-12.889 7.078 5.888 5.888 0 0 0 4.366-1.225 2.95 2.95 0 0 1-2.756-2.047c.182.035.367.053.552.052a2.84 2.84 0 0 0 .778-.105 2.957 2.957 0 0 1-2.362-2.896c.408.226.864.352 1.33.368a2.957 2.957 0 0 1-.875-3.947 8.347 8.347 0 0 0 6.125 3.089 2.841 2.841 0 0 1-.079-.674 2.949 2.949 0 0 1 2.879-3.001 2.984 2.984 0 0 1 2.161.928 5.782 5.782 0 0 0 1.872-.718 2.984 2.984 0 0 1-1.294 1.636 5.88 5.88 0 0 0 1.697-.463 6.3 6.3 0 0 1-1.505 1.548Z"></path></svg>';
 
 export class IconSocialTwitterCircleFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialTwitterCircleFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--twitterCircleFilledLarge', '', null, 'IconSocialTwitterCircleFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--twitterCircleFilledLarge', '', null, 'IconSocialTwitterCircleFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--twitterCircleFilledLarge');
         this.root.append(svg);
     }

package/icons/IconSocialTwitterCircleLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--twitterCircleLarge"><path d="M16.984 21.835a8.34 8.34 0 0 1-3.224.622l-.07-.052a8.365 8.365 0 0 1-4.532-1.321 5.889 5.889 0 0 0 4.375-1.225 2.949 2.949 0 0 1-2.756-2.048c.181.035.366.053.55.053.264.001.526-.034.78-.105a2.957 2.957 0 0 1-2.363-2.896c.408.225.864.351 1.33.367a2.958 2.958 0 0 1-.875-3.946 8.347 8.347 0 0 0 6.125 3.088 2.949 2.949 0 0 1 4.053-3.374c.373.163.709.4.987.697a5.784 5.784 0 0 0 1.872-.718 2.984 2.984 0 0 1-1.294 1.637 5.748 5.748 0 0 0 1.688-.464 6.124 6.124 0 0 1-1.47 1.531v.377a8.337 8.337 0 0 1-5.176 7.777Z"></path><path fill-rule="evenodd" d="M9.194 26.186a12.25 12.25 0 1 0 13.612-20.37 12.25 12.25 0 0 0-13.612 20.37Zm.972-18.916a10.5 10.5 0 1 1 11.667 17.46A10.5 10.5 0 0 1 10.167 7.27Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--twitterCircleLarge"><path d="M16.984 21.835a8.34 8.34 0 0 1-3.224.622l-.07-.052a8.365 8.365 0 0 1-4.532-1.321 5.889 5.889 0 0 0 4.375-1.225 2.949 2.949 0 0 1-2.756-2.048c.181.035.366.053.55.053.264.001.526-.034.78-.105a2.957 2.957 0 0 1-2.363-2.896c.408.225.864.351 1.33.367a2.958 2.958 0 0 1-.875-3.946 8.347 8.347 0 0 0 6.125 3.088 2.949 2.949 0 0 1 4.053-3.374c.373.163.709.4.987.697a5.784 5.784 0 0 0 1.872-.718 2.984 2.984 0 0 1-1.294 1.637 5.748 5.748 0 0 0 1.688-.464 6.124 6.124 0 0 1-1.47 1.531v.377a8.337 8.337 0 0 1-5.176 7.777Z"></path><path fill-rule="evenodd" d="M9.194 26.186a12.25 12.25 0 1 0 13.612-20.37 12.25 12.25 0 0 0-13.612 20.37Zm.972-18.916a10.5 10.5 0 1 1 11.667 17.46A10.5 10.5 0 0 1 10.167 7.27Z" clip-rule="evenodd"></path></svg>';
 
 export class IconSocialTwitterCircleLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialTwitterCircleLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--twitterCircleLarge', '', null, 'IconSocialTwitterCircleLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--twitterCircleLarge', '', null, 'IconSocialTwitterCircleLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--twitterCircleLarge');
         this.root.append(svg);
     }

package/icons/IconSocialTwitterStatic.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--twitterStatic"><path fill="#1D9BF0" d="M13.53 5.1c.008.124.008.248.008.373 0 3.817-2.868 8.218-8.111 8.218v-.002a7.995 7.995 0 0 1-4.37-1.295 5.677 5.677 0 0 0 4.22-1.197A2.86 2.86 0 0 1 2.61 9.19c.428.084.868.067 1.288-.05a2.88 2.88 0 0 1-2.287-2.83v-.037c.396.224.84.348 1.294.361a2.915 2.915 0 0 1-.883-3.856A8.057 8.057 0 0 0 7.9 5.797a2.914 2.914 0 0 1 .824-2.76 2.828 2.828 0 0 1 4.034.125 5.676 5.676 0 0 0 1.81-.7 2.892 2.892 0 0 1-1.253 1.597 5.613 5.613 0 0 0 1.637-.455A5.833 5.833 0 0 1 13.53 5.1Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--twitterStatic"><path fill="#1D9BF0" d="M13.53 5.1c.008.124.008.248.008.373 0 3.817-2.868 8.218-8.111 8.218v-.002a7.995 7.995 0 0 1-4.37-1.295 5.677 5.677 0 0 0 4.22-1.197A2.86 2.86 0 0 1 2.61 9.19c.428.084.868.067 1.288-.05a2.88 2.88 0 0 1-2.287-2.83v-.037c.396.224.84.348 1.294.361a2.915 2.915 0 0 1-.883-3.856A8.057 8.057 0 0 0 7.9 5.797a2.914 2.914 0 0 1 .824-2.76 2.828 2.828 0 0 1 4.034.125 5.676 5.676 0 0 0 1.81-.7 2.892 2.892 0 0 1-1.253 1.597 5.613 5.613 0 0 0 1.637-.455A5.833 5.833 0 0 1 13.53 5.1Z"></path></svg>';
 
 export class IconSocialTwitterStatic extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialTwitterStatic extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--twitterStatic', '', null, 'IconSocialTwitterStatic');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--twitterStatic', '', null, 'IconSocialTwitterStatic');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--twitterStatic');
         this.root.append(svg);
     }

package/icons/IconSocialTwitterStaticLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 const template = document.createElement('template');
-template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--twitterStaticLarge"><path fill="#1D9BF0" d="M26.269 10.614c.015.23.015.461.015.694 0 7.087-5.325 15.26-15.064 15.26v-.003a14.847 14.847 0 0 1-8.116-2.405 10.544 10.544 0 0 0 7.836-2.223c-2.265-.044-4.252-1.54-4.946-3.725a5.21 5.21 0 0 0 2.39-.092c-2.47-.506-4.247-2.704-4.247-5.257v-.068c.736.415 1.56.645 2.403.67-2.326-1.574-3.043-4.71-1.639-7.16a14.963 14.963 0 0 0 10.912 5.603 5.412 5.412 0 0 1 1.532-5.125 5.252 5.252 0 0 1 7.49.233 10.541 10.541 0 0 0 3.363-1.302A5.372 5.372 0 0 1 25.87 8.68c1.05-.125 2.075-.41 3.04-.844a10.835 10.835 0 0 1-2.641 2.778Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--twitterStaticLarge"><path fill="#1D9BF0" d="M26.269 10.614c.015.23.015.461.015.694 0 7.087-5.325 15.26-15.064 15.26v-.003a14.847 14.847 0 0 1-8.116-2.405 10.544 10.544 0 0 0 7.836-2.223c-2.265-.044-4.252-1.54-4.946-3.725a5.21 5.21 0 0 0 2.39-.092c-2.47-.506-4.247-2.704-4.247-5.257v-.068c.736.415 1.56.645 2.403.67-2.326-1.574-3.043-4.71-1.639-7.16a14.963 14.963 0 0 0 10.912 5.603 5.412 5.412 0 0 1 1.532-5.125 5.252 5.252 0 0 1 7.49.233 10.541 10.541 0 0 0 3.363-1.302A5.372 5.372 0 0 1 25.87 8.68c1.05-.125 2.075-.41 3.04-.844a10.835 10.835 0 0 1-2.641 2.778Z"></path></svg>';
 
 export class IconSocialTwitterStaticLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialTwitterStaticLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--twitterStaticLarge', '', null, 'IconSocialTwitterStaticLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--twitterStaticLarge', '', null, 'IconSocialTwitterStaticLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--twitterStaticLarge');
         this.root.append(svg);
     }