@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/icons/IconSend.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--send"><path d="M14.457 1.525a.937.937 0 0 0-.665-.271.665.665 0 0 0-.297.052L1.814 5.13a.936.936 0 0 0 0 1.75l2.047.875v4.454h4.305L9.13 14.3a.936.936 0 0 0 .83.516h.045a.945.945 0 0 0 .83-.621L14.65 2.558a.936.936 0 0 0 .061-.342.918.918 0 0 0-.254-.691ZM3.257 6.04l8.322-2.73-4.585 4.27-3.737-1.54Zm1.9 4.804V8.219l.778.324.726.332.263.578.638 1.4-2.406-.01Zm4.75 1.96L7.94 8.499l4.873-4.541-2.905 8.846Z"></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--send"><path d="M14.457 1.525a.937.937 0 0 0-.665-.271.665.665 0 0 0-.297.052L1.814 5.13a.936.936 0 0 0 0 1.75l2.047.875v4.454h4.305L9.13 14.3a.936.936 0 0 0 .83.516h.045a.945.945 0 0 0 .83-.621L14.65 2.558a.936.936 0 0 0 .061-.342.918.918 0 0 0-.254-.691ZM3.257 6.04l8.322-2.73-4.585 4.27-3.737-1.54Zm1.9 4.804V8.219l.778.324.726.332.263.578.638 1.4-2.406-.01Zm4.75 1.96L7.94 8.499l4.873-4.541-2.905 8.846Z"></path></svg>';
 
 export class IconSend extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSend extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--send', '', null, 'IconSend');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--send', '', null, 'IconSend');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--send');
         this.root.append(svg);
     }

package/icons/IconSendLarge.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--sendLarge"><path d="M25.705 7.315a1.155 1.155 0 0 0-1.08-1.05 1.08 1.08 0 0 0-.488.052L5.5 12.43a1.178 1.178 0 0 0-.75 1.072 1.208 1.208 0 0 0 .75 1.118l3.75 1.552V22h6l2.108 4.59a1.2 1.2 0 0 0 1.064.652h.053a1.207 1.207 0 0 0 1.065-.795L25.645 7.87a1.17 1.17 0 0 0 .06-.555Zm-3.51 1.222-8.445 7.868-6.885-2.843 15.33-5.025ZM10.75 20.5v-3.705l1.785.75.832.345.3.652.908 1.958H10.75Zm7.628 4.71-3.556-7.763 8.783-8.197-5.227 15.96Z"></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--sendLarge"><path d="M25.705 7.315a1.155 1.155 0 0 0-1.08-1.05 1.08 1.08 0 0 0-.488.052L5.5 12.43a1.178 1.178 0 0 0-.75 1.072 1.208 1.208 0 0 0 .75 1.118l3.75 1.552V22h6l2.108 4.59a1.2 1.2 0 0 0 1.064.652h.053a1.207 1.207 0 0 0 1.065-.795L25.645 7.87a1.17 1.17 0 0 0 .06-.555Zm-3.51 1.222-8.445 7.868-6.885-2.843 15.33-5.025ZM10.75 20.5v-3.705l1.785.75.832.345.3.652.908 1.958H10.75Zm7.628 4.71-3.556-7.763 8.783-8.197-5.227 15.96Z"></path></svg>';
 
 export class IconSendLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSendLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--sendLarge', '', null, 'IconSendLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--sendLarge', '', null, 'IconSendLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sendLarge');
         this.root.append(svg);
     }

package/icons/IconServiceCharge.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--serviceCharge"><path d="M9.899 8.402s.008-.026.008-.035c0-.358-1.04-.656-2.327-.656-1.286 0-2.328.298-2.328.656 0 .01.01.027.01.035v4.857c0 .245 0 1.006 2.327 1.006s2.327-.753 2.327-1.076V8.41H9.89l.009-.009Zm-1.287.552v1.242c-.148.053-.49.123-1.006.123-.542 0-.901-.079-1.024-.132V8.963c.307.044.64.07.998.07.359 0 .717-.026 1.032-.07v-.008Zm-1.015 3.998c-.437 0-.787-.043-1.015-.087v-1.321c.35.07.727.087 1.024.087a5.22 5.22 0 0 0 1.006-.087v1.321a5.58 5.58 0 0 1-1.015.088Z"></path><path d="M13.696 5.751c0-.359-1.041-.656-2.327-.656-1.287 0-2.328.297-2.328.656 0 .009.009.018.009.035v7.306c0 1.12 1.934 1.182 2.327 1.182.394 0 2.328-.053 2.328-1.181V5.75h-.018.01Zm-3.325 3.176c.35.07.726.088 1.024.088.298 0 .656-.018 1.006-.088v1.27c-.149.052-.49.122-1.006.122-.543 0-.901-.079-1.024-.132V8.92v.008Zm2.03-2.59V7.58c-.149.052-.49.122-1.006.122-.543 0-.901-.078-1.024-.13V6.345c.306.044.639.07.998.07a7.66 7.66 0 0 0 1.032-.07v-.009Zm-1.015 6.624c-.446 0-.813-.07-1.015-.14v-1.268c.35.07.726.087 1.024.087.298 0 .656-.018 1.006-.088v1.26c-.201.07-.569.14-1.015.14v.01Z"></path><path d="M5.664 2.024 2.689 6.259h1.627L7.3 2.024H5.664Z"></path><path d="M3.135 3.686a.831.831 0 1 0 0-1.662.831.831 0 0 0 0 1.662Z"></path><path d="M6.775 6.381a.831.831 0 1 0 0-1.662.831.831 0 0 0 0 1.662Z"></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--serviceCharge"><path d="M9.899 8.402s.008-.026.008-.035c0-.358-1.04-.656-2.327-.656-1.286 0-2.328.298-2.328.656 0 .01.01.027.01.035v4.857c0 .245 0 1.006 2.327 1.006s2.327-.753 2.327-1.076V8.41H9.89l.009-.009Zm-1.287.552v1.242c-.148.053-.49.123-1.006.123-.542 0-.901-.079-1.024-.132V8.963c.307.044.64.07.998.07.359 0 .717-.026 1.032-.07v-.008Zm-1.015 3.998c-.437 0-.787-.043-1.015-.087v-1.321c.35.07.727.087 1.024.087a5.22 5.22 0 0 0 1.006-.087v1.321a5.58 5.58 0 0 1-1.015.088Z"></path><path d="M13.696 5.751c0-.359-1.041-.656-2.327-.656-1.287 0-2.328.297-2.328.656 0 .009.009.018.009.035v7.306c0 1.12 1.934 1.182 2.327 1.182.394 0 2.328-.053 2.328-1.181V5.75h-.018.01Zm-3.325 3.176c.35.07.726.088 1.024.088.298 0 .656-.018 1.006-.088v1.27c-.149.052-.49.122-1.006.122-.543 0-.901-.079-1.024-.132V8.92v.008Zm2.03-2.59V7.58c-.149.052-.49.122-1.006.122-.543 0-.901-.078-1.024-.13V6.345c.306.044.639.07.998.07a7.66 7.66 0 0 0 1.032-.07v-.009Zm-1.015 6.624c-.446 0-.813-.07-1.015-.14v-1.268c.35.07.726.087 1.024.087.298 0 .656-.018 1.006-.088v1.26c-.201.07-.569.14-1.015.14v.01Z"></path><path d="M5.664 2.024 2.689 6.259h1.627L7.3 2.024H5.664Z"></path><path d="M3.135 3.686a.831.831 0 1 0 0-1.662.831.831 0 0 0 0 1.662Z"></path><path d="M6.775 6.381a.831.831 0 1 0 0-1.662.831.831 0 0 0 0 1.662Z"></path></svg>';
 
 export class IconServiceCharge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconServiceCharge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--serviceCharge', '', null, 'IconServiceCharge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--serviceCharge', '', null, 'IconServiceCharge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--serviceCharge');
         this.root.append(svg);
     }

package/icons/IconServiceChargeLarge.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--serviceChargeLarge"><path d="m7.355 12.727 3.911-5.556h2.135L9.49 12.727H7.355Z"></path><path fill-rule="evenodd" d="M26.622 12.553c0-.604-1.697-1.086-3.788-1.086-2.092 0-3.79.49-3.79 1.085v2.472c-.69-.208-1.666-.336-2.747-.336-2.091 0-3.789.49-3.789 1.085 0 .016.007.029.015.043l.012.026v3.02a10.902 10.902 0 0 0-2.205-.21c-2.091 0-3.789.49-3.789 1.084l.026 6.134c0 1.356 2.372 1.557 3.78 1.557.91 0 2.205-.087 3.028-.498.822.394 2.065.472 2.94.472.982 0 2.422-.1 3.214-.622.952.802 3.002.832 3.296.832.385 0 3.789-.052 3.789-1.82V12.552h.008Zm-5.8 5.94v-1.631c.669.163 1.43.206 2.02.206.595 0 1.365-.044 2.04-.21v1.645h-.01c-.14.087-.848.297-2.012.297-1.164 0-1.873-.21-2.013-.306h-.026Zm-.01 3.5v-1.65c.672.164 1.447.207 2.039.207.595 0 1.356-.044 2.03-.21v1.654c-.14.096-.849.306-2.012.306-1.164 0-1.873-.21-2.013-.306h-.044Zm4.07-6.973v-1.554c-.592.112-1.277.171-2.022.171-.753 0-1.453-.07-2.039-.175v1.55h.018c.14.095.848.306 2.012.306 1.164 0 1.873-.21 2.013-.298h.017Zm-2.04 10.841c-.98 0-1.723-.192-2.03-.341v-1.68c.683.175 1.462.219 2.057.219s1.347-.044 2.012-.201v1.67c-.306.15-1.05.342-2.039.342v-.009ZM12.37 22.046v-1.398c-.585.113-1.282.173-2.03.173-.753 0-1.444-.07-2.03-.175v1.392h.026c.14.096.849.306 2.012.306 1.164 0 1.873-.21 2.013-.298h.008Zm-2.022 3.623c-.936 0-1.662-.123-2.03-.228v-1.549c.665.167 1.435.21 2.021.21.587 0 1.366-.043 2.04-.21v1.558c-.368.105-1.103.236-2.04.236l.01-.017Zm8.015-.28c-.367.114-1.102.245-2.038.245-.937 0-1.672-.131-2.03-.245v-1.776c.682.175 1.46.218 2.056.218.595 0 1.347-.043 2.012-.201v1.759Zm0-3.623c-.14.097-.848.307-2.012.307-1.164 0-1.873-.21-2.013-.307h-.043v-1.653c.673.166 1.452.21 2.047.21.595 0 1.356-.044 2.03-.21v1.653h-.009Zm0-3.491h-.017c-.14.088-.849.298-2.013.298s-1.872-.21-2.012-.307h-.027v-1.592c.587.105 1.27.166 2.013.166.744 0 1.47-.07 2.065-.175v1.601l-.009.009Z" clip-rule="evenodd"></path><path d="M7.941 9.359a1.094 1.094 0 1 0 0-2.188 1.094 1.094 0 0 0 0 2.188Z"></path><path d="M13.803 11.8a1.094 1.094 0 1 1-2.187 0 1.094 1.094 0 0 1 2.188 0Z"></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--serviceChargeLarge"><path d="m7.355 12.727 3.911-5.556h2.135L9.49 12.727H7.355Z"></path><path fill-rule="evenodd" d="M26.622 12.553c0-.604-1.697-1.086-3.788-1.086-2.092 0-3.79.49-3.79 1.085v2.472c-.69-.208-1.666-.336-2.747-.336-2.091 0-3.789.49-3.789 1.085 0 .016.007.029.015.043l.012.026v3.02a10.902 10.902 0 0 0-2.205-.21c-2.091 0-3.789.49-3.789 1.084l.026 6.134c0 1.356 2.372 1.557 3.78 1.557.91 0 2.205-.087 3.028-.498.822.394 2.065.472 2.94.472.982 0 2.422-.1 3.214-.622.952.802 3.002.832 3.296.832.385 0 3.789-.052 3.789-1.82V12.552h.008Zm-5.8 5.94v-1.631c.669.163 1.43.206 2.02.206.595 0 1.365-.044 2.04-.21v1.645h-.01c-.14.087-.848.297-2.012.297-1.164 0-1.873-.21-2.013-.306h-.026Zm-.01 3.5v-1.65c.672.164 1.447.207 2.039.207.595 0 1.356-.044 2.03-.21v1.654c-.14.096-.849.306-2.012.306-1.164 0-1.873-.21-2.013-.306h-.044Zm4.07-6.973v-1.554c-.592.112-1.277.171-2.022.171-.753 0-1.453-.07-2.039-.175v1.55h.018c.14.095.848.306 2.012.306 1.164 0 1.873-.21 2.013-.298h.017Zm-2.04 10.841c-.98 0-1.723-.192-2.03-.341v-1.68c.683.175 1.462.219 2.057.219s1.347-.044 2.012-.201v1.67c-.306.15-1.05.342-2.039.342v-.009ZM12.37 22.046v-1.398c-.585.113-1.282.173-2.03.173-.753 0-1.444-.07-2.03-.175v1.392h.026c.14.096.849.306 2.012.306 1.164 0 1.873-.21 2.013-.298h.008Zm-2.022 3.623c-.936 0-1.662-.123-2.03-.228v-1.549c.665.167 1.435.21 2.021.21.587 0 1.366-.043 2.04-.21v1.558c-.368.105-1.103.236-2.04.236l.01-.017Zm8.015-.28c-.367.114-1.102.245-2.038.245-.937 0-1.672-.131-2.03-.245v-1.776c.682.175 1.46.218 2.056.218.595 0 1.347-.043 2.012-.201v1.759Zm0-3.623c-.14.097-.848.307-2.012.307-1.164 0-1.873-.21-2.013-.307h-.043v-1.653c.673.166 1.452.21 2.047.21.595 0 1.356-.044 2.03-.21v1.653h-.009Zm0-3.491h-.017c-.14.088-.849.298-2.013.298s-1.872-.21-2.012-.307h-.027v-1.592c.587.105 1.27.166 2.013.166.744 0 1.47-.07 2.065-.175v1.601l-.009.009Z" clip-rule="evenodd"></path><path d="M7.941 9.359a1.094 1.094 0 1 0 0-2.188 1.094 1.094 0 0 0 0 2.188Z"></path><path d="M13.803 11.8a1.094 1.094 0 1 1-2.187 0 1.094 1.094 0 0 1 2.188 0Z"></path></svg>';
 
 export class IconServiceChargeLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconServiceChargeLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--serviceChargeLarge', '', null, 'IconServiceChargeLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--serviceChargeLarge', '', null, 'IconServiceChargeLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--serviceChargeLarge');
         this.root.append(svg);
     }

package/icons/IconSettings.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--settings"><path d="M9.505 14.781h-3.01l-.341-1.207a1.645 1.645 0 0 0-.779-.963 1.697 1.697 0 0 0-1.277-.236l-1.217.306-1.505-2.625.875-.875c.288-.323.436-.748.412-1.181a1.68 1.68 0 0 0-.43-1.234l-.874-.875 1.505-2.625 1.234.359a1.68 1.68 0 0 0 1.277-.228c.39-.2.685-.546.823-.962l.297-1.216h3.01l.341 1.207c.125.41.404.756.78.963a1.689 1.689 0 0 0 1.277.236l1.216-.306 1.505 2.625-.875.875A1.637 1.637 0 0 0 13.338 8a1.636 1.636 0 0 0 .428 1.181l.875.875-1.505 2.625-1.233-.306a1.636 1.636 0 0 0-1.234.219c-.39.2-.685.546-.823.962l-.34 1.225ZM7.493 13.47h1.015l.078-.219a2.931 2.931 0 0 1 1.41-1.75c.666-.41 1.468-.54 2.23-.359l.254.062.508-.875-.167-.175A2.94 2.94 0 0 1 12.025 8a2.94 2.94 0 0 1 .796-2.091l.167-.175-.508-.875-.254.061a2.94 2.94 0 0 1-2.213-.42 2.94 2.94 0 0 1-1.427-1.75l-.078-.254H7.493l-.08.254A2.931 2.931 0 0 1 6.006 4.5c-.667.41-1.47.54-2.231.359l-.254-.061-.507.875.166.175A2.94 2.94 0 0 1 3.975 8a2.966 2.966 0 0 1-.796 2.135l-.166.175.507.875.254-.061a2.94 2.94 0 0 1 2.214.376 2.94 2.94 0 0 1 1.426 1.75l.079.219ZM8 10.625a2.626 2.626 0 0 1-1.855-4.48 2.625 2.625 0 1 1 3.71 3.71 2.625 2.625 0 0 1-1.855.77Zm0-3.938a1.313 1.313 0 1 0 .002 2.626A1.313 1.313 0 0 0 8 6.687Z"></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--settings"><path d="M9.505 14.781h-3.01l-.341-1.207a1.645 1.645 0 0 0-.779-.963 1.697 1.697 0 0 0-1.277-.236l-1.217.306-1.505-2.625.875-.875c.288-.323.436-.748.412-1.181a1.68 1.68 0 0 0-.43-1.234l-.874-.875 1.505-2.625 1.234.359a1.68 1.68 0 0 0 1.277-.228c.39-.2.685-.546.823-.962l.297-1.216h3.01l.341 1.207c.125.41.404.756.78.963a1.689 1.689 0 0 0 1.277.236l1.216-.306 1.505 2.625-.875.875A1.637 1.637 0 0 0 13.338 8a1.636 1.636 0 0 0 .428 1.181l.875.875-1.505 2.625-1.233-.306a1.636 1.636 0 0 0-1.234.219c-.39.2-.685.546-.823.962l-.34 1.225ZM7.493 13.47h1.015l.078-.219a2.931 2.931 0 0 1 1.41-1.75c.666-.41 1.468-.54 2.23-.359l.254.062.508-.875-.167-.175A2.94 2.94 0 0 1 12.025 8a2.94 2.94 0 0 1 .796-2.091l.167-.175-.508-.875-.254.061a2.94 2.94 0 0 1-2.213-.42 2.94 2.94 0 0 1-1.427-1.75l-.078-.254H7.493l-.08.254A2.931 2.931 0 0 1 6.006 4.5c-.667.41-1.47.54-2.231.359l-.254-.061-.507.875.166.175A2.94 2.94 0 0 1 3.975 8a2.966 2.966 0 0 1-.796 2.135l-.166.175.507.875.254-.061a2.94 2.94 0 0 1 2.214.376 2.94 2.94 0 0 1 1.426 1.75l.079.219ZM8 10.625a2.626 2.626 0 0 1-1.855-4.48 2.625 2.625 0 1 1 3.71 3.71 2.625 2.625 0 0 1-1.855.77Zm0-3.938a1.313 1.313 0 1 0 .002 2.626A1.313 1.313 0 0 0 8 6.687Z"></path></svg>';
 
 export class IconSettings extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSettings extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--settings', '', null, 'IconSettings');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--settings', '', null, 'IconSettings');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--settings');
         this.root.append(svg);
     }

package/icons/IconSettingsFilled.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--settingsFilled"><path d="M13.338 8a1.636 1.636 0 0 1 .428-1.181l.875-.875-1.505-2.625-1.233.306a1.688 1.688 0 0 1-1.278-.236 1.645 1.645 0 0 1-.805-.963L9.505 1.22h-3.01l-.341 1.216a1.671 1.671 0 0 1-.779.962 1.68 1.68 0 0 1-1.277.228L2.88 3.31 1.376 5.935l.875.875c.287.328.434.755.412 1.19a1.636 1.636 0 0 1-.43 1.181l-.874.875 1.505 2.625 1.234-.306c.44-.094.9-.009 1.277.236.385.202.675.548.805.963l.341 1.207h2.984l.341-1.216c.138-.416.433-.762.823-.963a1.638 1.638 0 0 1 1.234-.227l1.216.306 1.505-2.625-.875-.875A1.637 1.637 0 0 1 13.338 8ZM9.313 8a1.313 1.313 0 1 1-2.625.002A1.313 1.313 0 0 1 9.313 8Z"></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--settingsFilled"><path d="M13.338 8a1.636 1.636 0 0 1 .428-1.181l.875-.875-1.505-2.625-1.233.306a1.688 1.688 0 0 1-1.278-.236 1.645 1.645 0 0 1-.805-.963L9.505 1.22h-3.01l-.341 1.216a1.671 1.671 0 0 1-.779.962 1.68 1.68 0 0 1-1.277.228L2.88 3.31 1.376 5.935l.875.875c.287.328.434.755.412 1.19a1.636 1.636 0 0 1-.43 1.181l-.874.875 1.505 2.625 1.234-.306c.44-.094.9-.009 1.277.236.385.202.675.548.805.963l.341 1.207h2.984l.341-1.216c.138-.416.433-.762.823-.963a1.638 1.638 0 0 1 1.234-.227l1.216.306 1.505-2.625-.875-.875A1.637 1.637 0 0 1 13.338 8ZM9.313 8a1.313 1.313 0 1 1-2.625.002A1.313 1.313 0 0 1 9.313 8Z"></path></svg>';
 
 export class IconSettingsFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSettingsFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--settingsFilled', '', null, 'IconSettingsFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--settingsFilled', '', null, 'IconSettingsFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--settingsFilled');
         this.root.append(svg);
     }

package/icons/IconSettingsFilledLarge.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--settingsFilledLarge"><path d="M25.564 16.044v-.097a3.412 3.412 0 0 1 .875-2.423l1.409-1.453-2.529-4.375-2.012.517a3.5 3.5 0 0 1-2.582-.455 3.43 3.43 0 0 1-1.654-1.987L18.53 3.75h-5.057l-.57 2.004a3.5 3.5 0 0 1-1.68 2.004 3.5 3.5 0 0 1-2.554.437l-2.013-.516-2.529 4.375 1.374 1.47c.597.662.912 1.532.875 2.424v.104a3.412 3.412 0 0 1-.875 2.424L4.126 19.93l2.53 4.375 2.012-.516a3.5 3.5 0 0 1 2.625.454 3.43 3.43 0 0 1 1.654 1.987l.525 2.021h5.057l.569-2.004a3.78 3.78 0 0 1 4.235-2.441l2.012.516 2.529-4.375-1.374-1.47a3.421 3.421 0 0 1-.936-2.432ZM19.063 16a3.028 3.028 0 0 1-.875 2.17 3.132 3.132 0 0 1-4.323 0 3.063 3.063 0 1 1 5.25-2.17h-.052Z"></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--settingsFilledLarge"><path d="M25.564 16.044v-.097a3.412 3.412 0 0 1 .875-2.423l1.409-1.453-2.529-4.375-2.012.517a3.5 3.5 0 0 1-2.582-.455 3.43 3.43 0 0 1-1.654-1.987L18.53 3.75h-5.057l-.57 2.004a3.5 3.5 0 0 1-1.68 2.004 3.5 3.5 0 0 1-2.554.437l-2.013-.516-2.529 4.375 1.374 1.47c.597.662.912 1.532.875 2.424v.104a3.412 3.412 0 0 1-.875 2.424L4.126 19.93l2.53 4.375 2.012-.516a3.5 3.5 0 0 1 2.625.454 3.43 3.43 0 0 1 1.654 1.987l.525 2.021h5.057l.569-2.004a3.78 3.78 0 0 1 4.235-2.441l2.012.516 2.529-4.375-1.374-1.47a3.421 3.421 0 0 1-.936-2.432ZM19.063 16a3.028 3.028 0 0 1-.875 2.17 3.132 3.132 0 0 1-4.323 0 3.063 3.063 0 1 1 5.25-2.17h-.052Z"></path></svg>';
 
 export class IconSettingsFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSettingsFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--settingsFilledLarge', '', null, 'IconSettingsFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--settingsFilledLarge', '', null, 'IconSettingsFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--settingsFilledLarge');
         this.root.append(svg);
     }

package/icons/IconSettingsLarge.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--settingsLarge"><path d="M18.529 28.25h-5.057l-.57-2.004a3.43 3.43 0 0 0-1.653-1.986 3.5 3.5 0 0 0-2.581-.455l-2.013.516-2.529-4.375 1.374-1.47a3.412 3.412 0 0 0 .875-2.424v-.104a3.412 3.412 0 0 0-.875-2.424L4.126 12.07l2.53-4.375 2.012.517a3.5 3.5 0 0 0 2.555-.438 3.5 3.5 0 0 0 1.68-2.004l.569-2.021h5.057l.569 2.004a3.43 3.43 0 0 0 1.654 1.986 3.5 3.5 0 0 0 2.58.455l2.013-.516 2.529 4.375-1.374 1.47a3.412 3.412 0 0 0-.875 2.424v.096a3.421 3.421 0 0 0 .875 2.432l1.409 1.453-2.529 4.375-2.012-.516a3.78 3.78 0 0 0-4.235 2.44l-.604 2.022Zm-3.736-1.75h2.415l.21-.726a5.144 5.144 0 0 1 2.459-3.028 5.136 5.136 0 0 1 3.885-.621l.726.184 1.207-2.1-.49-.499a5.171 5.171 0 0 1-1.391-3.658V16a5.171 5.171 0 0 1 1.391-3.658l.49-.498L24.488 9.7l-.726.175a5.128 5.128 0 0 1-3.86-.613 5.18 5.18 0 0 1-2.484-3.045l-.21-.717h-2.415l-.21.726a5.145 5.145 0 0 1-2.459 3.028 5.137 5.137 0 0 1-3.885.621L7.513 9.7l-1.208 2.1.49.499A5.172 5.172 0 0 1 8.186 16a5.25 5.25 0 0 1-1.39 3.745l-.49.499L7.512 22.3l.726-.175a5.127 5.127 0 0 1 3.859.613 5.18 5.18 0 0 1 2.485 3.044l.21.718ZM16 20.812a4.813 4.813 0 1 1 3.404-1.408A4.777 4.777 0 0 1 16 20.813Zm0-7.875a3.062 3.062 0 0 0-2.161 5.25 3.132 3.132 0 0 0 4.322 0 3.063 3.063 0 0 0-2.16-5.25Z"></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--settingsLarge"><path d="M18.529 28.25h-5.057l-.57-2.004a3.43 3.43 0 0 0-1.653-1.986 3.5 3.5 0 0 0-2.581-.455l-2.013.516-2.529-4.375 1.374-1.47a3.412 3.412 0 0 0 .875-2.424v-.104a3.412 3.412 0 0 0-.875-2.424L4.126 12.07l2.53-4.375 2.012.517a3.5 3.5 0 0 0 2.555-.438 3.5 3.5 0 0 0 1.68-2.004l.569-2.021h5.057l.569 2.004a3.43 3.43 0 0 0 1.654 1.986 3.5 3.5 0 0 0 2.58.455l2.013-.516 2.529 4.375-1.374 1.47a3.412 3.412 0 0 0-.875 2.424v.096a3.421 3.421 0 0 0 .875 2.432l1.409 1.453-2.529 4.375-2.012-.516a3.78 3.78 0 0 0-4.235 2.44l-.604 2.022Zm-3.736-1.75h2.415l.21-.726a5.144 5.144 0 0 1 2.459-3.028 5.136 5.136 0 0 1 3.885-.621l.726.184 1.207-2.1-.49-.499a5.171 5.171 0 0 1-1.391-3.658V16a5.171 5.171 0 0 1 1.391-3.658l.49-.498L24.488 9.7l-.726.175a5.128 5.128 0 0 1-3.86-.613 5.18 5.18 0 0 1-2.484-3.045l-.21-.717h-2.415l-.21.726a5.145 5.145 0 0 1-2.459 3.028 5.137 5.137 0 0 1-3.885.621L7.513 9.7l-1.208 2.1.49.499A5.172 5.172 0 0 1 8.186 16a5.25 5.25 0 0 1-1.39 3.745l-.49.499L7.512 22.3l.726-.175a5.127 5.127 0 0 1 3.859.613 5.18 5.18 0 0 1 2.485 3.044l.21.718ZM16 20.812a4.813 4.813 0 1 1 3.404-1.408A4.777 4.777 0 0 1 16 20.813Zm0-7.875a3.062 3.062 0 0 0-2.161 5.25 3.132 3.132 0 0 0 4.322 0 3.063 3.063 0 0 0-2.16-5.25Z"></path></svg>';
 
 export class IconSettingsLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSettingsLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--settingsLarge', '', null, 'IconSettingsLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--settingsLarge', '', null, 'IconSettingsLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--settingsLarge');
         this.root.append(svg);
     }

package/icons/IconShare.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--share"><path d="M12.322 9.076a2.371 2.371 0 0 0-1.907.963L6.04 8.376a2.625 2.625 0 0 0 0-.376 2.625 2.625 0 0 0 0-.376l4.375-1.663a2.371 2.371 0 1 0-.481-1.417 1.68 1.68 0 0 0 0 .192L5.462 6.434a2.362 2.362 0 0 0-1.75-.823 2.389 2.389 0 1 0 0 4.778 2.362 2.362 0 0 0 1.75-.823l4.498 1.698a1.68 1.68 0 0 0 0 .192 2.39 2.39 0 1 0 2.389-2.38h-.027Zm0-5.608a1.076 1.076 0 1 1 0 2.152 1.076 1.076 0 0 1 0-2.152ZM3.678 9.076a1.076 1.076 0 1 1 0-2.152 1.076 1.076 0 0 1 0 2.152Zm8.646 3.457a1.076 1.076 0 1 1 .002-2.153 1.076 1.076 0 0 1-.002 2.153Z"></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--share"><path d="M12.322 9.076a2.371 2.371 0 0 0-1.907.963L6.04 8.376a2.625 2.625 0 0 0 0-.376 2.625 2.625 0 0 0 0-.376l4.375-1.663a2.371 2.371 0 1 0-.481-1.417 1.68 1.68 0 0 0 0 .192L5.462 6.434a2.362 2.362 0 0 0-1.75-.823 2.389 2.389 0 1 0 0 4.778 2.362 2.362 0 0 0 1.75-.823l4.498 1.698a1.68 1.68 0 0 0 0 .192 2.39 2.39 0 1 0 2.389-2.38h-.027Zm0-5.608a1.076 1.076 0 1 1 0 2.152 1.076 1.076 0 0 1 0-2.152ZM3.678 9.076a1.076 1.076 0 1 1 0-2.152 1.076 1.076 0 0 1 0 2.152Zm8.646 3.457a1.076 1.076 0 1 1 .002-2.153 1.076 1.076 0 0 1-.002 2.153Z"></path></svg>';
 
 export class IconShare extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconShare extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--share', '', null, 'IconShare');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--share', '', null, 'IconShare');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--share');
         this.root.append(svg);
     }

package/icons/IconShareLarge.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--shareLarge"><path d="M23.5 18.25a3.75 3.75 0 0 0-3.165 1.755L12.13 16.9c.074-.294.114-.596.12-.9a4.007 4.007 0 0 0-.12-.9l8.205-3.105A3.75 3.75 0 1 0 19.75 10c.005.199.025.397.06.592L11.5 13.75a3.749 3.749 0 1 0 0 4.5l8.332 3.15c-.043.198-.07.398-.082.6a3.75 3.75 0 1 0 3.75-3.75Zm0-10.5a2.25 2.25 0 1 1 0 4.5 2.25 2.25 0 0 1 0-4.5Zm-15 10.5a2.25 2.25 0 1 1 0-4.5 2.25 2.25 0 0 1 0 4.5Zm15 6a2.25 2.25 0 1 1 0-4.5 2.25 2.25 0 0 1 0 4.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--shareLarge"><path d="M23.5 18.25a3.75 3.75 0 0 0-3.165 1.755L12.13 16.9c.074-.294.114-.596.12-.9a4.007 4.007 0 0 0-.12-.9l8.205-3.105A3.75 3.75 0 1 0 19.75 10c.005.199.025.397.06.592L11.5 13.75a3.749 3.749 0 1 0 0 4.5l8.332 3.15c-.043.198-.07.398-.082.6a3.75 3.75 0 1 0 3.75-3.75Zm0-10.5a2.25 2.25 0 1 1 0 4.5 2.25 2.25 0 0 1 0-4.5Zm-15 10.5a2.25 2.25 0 1 1 0-4.5 2.25 2.25 0 0 1 0 4.5Zm15 6a2.25 2.25 0 1 1 0-4.5 2.25 2.25 0 0 1 0 4.5Z"></path></svg>';
 
 export class IconShareLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconShareLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--shareLarge', '', null, 'IconShareLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--shareLarge', '', null, 'IconShareLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--shareLarge');
         this.root.append(svg);
     }

package/icons/IconShekel.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--shekel"><path d="M8 5.156H3.406v8.094H2.094V3.844H8a2.406 2.406 0 0 1 2.406 2.406v3.5H9.094v-3.5A1.094 1.094 0 0 0 8 5.156Zm4.594-1.531v8.094H8a1.094 1.094 0 0 1-1.094-1.094v-3.5H5.594v3.5A2.406 2.406 0 0 0 8 13.031h5.906V3.625h-1.312Z"></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--shekel"><path d="M8 5.156H3.406v8.094H2.094V3.844H8a2.406 2.406 0 0 1 2.406 2.406v3.5H9.094v-3.5A1.094 1.094 0 0 0 8 5.156Zm4.594-1.531v8.094H8a1.094 1.094 0 0 1-1.094-1.094v-3.5H5.594v3.5A2.406 2.406 0 0 0 8 13.031h5.906V3.625h-1.312Z"></path></svg>';
 
 export class IconShekel extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconShekel extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--shekel', '', null, 'IconShekel');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--shekel', '', null, 'IconShekel');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--shekel');
         this.root.append(svg);
     }

package/icons/IconShekelLarge.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--shekelLarge"><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.5 10.5 0 1 1 0-21 10.5 10.5 0 0 1 0 21Zm0-14h-4.375v7.875h-1.75V10.75H16a2.625 2.625 0 0 1 2.625 2.625v3.5h-1.75v-3.5A.875.875 0 0 0 16 12.5Zm4.375-1.75h1.75v9.625H16a2.625 2.625 0 0 1-2.625-2.625v-3.5h1.75v3.5a.875.875 0 0 0 .875.875h4.375V10.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--shekelLarge"><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.5 10.5 0 1 1 0-21 10.5 10.5 0 0 1 0 21Zm0-14h-4.375v7.875h-1.75V10.75H16a2.625 2.625 0 0 1 2.625 2.625v3.5h-1.75v-3.5A.875.875 0 0 0 16 12.5Zm4.375-1.75h1.75v9.625H16a2.625 2.625 0 0 1-2.625-2.625v-3.5h1.75v3.5a.875.875 0 0 0 .875.875h4.375V10.75Z"></path></svg>';
 
 export class IconShekelLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconShekelLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--shekelLarge', '', null, 'IconShekelLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--shekelLarge', '', null, 'IconShekelLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--shekelLarge');
         this.root.append(svg);
     }

package/icons/IconSignClosed.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--signClosed"><path d="M13.25 4.719h-2.126L8.507 1.464H7.494L4.867 4.719H2.75A1.54 1.54 0 0 0 1.219 6.25v5.25a1.54 1.54 0 0 0 1.531 1.531h10.5a1.54 1.54 0 0 0 1.531-1.531V6.25a1.54 1.54 0 0 0-1.531-1.531ZM8 2.969l1.444 1.75H6.556L8 2.969Zm5.469 8.531a.219.219 0 0 1-.219.219H2.75a.219.219 0 0 1-.219-.219V6.25a.219.219 0 0 1 .219-.219h10.5a.219.219 0 0 1 .219.219v5.25Zm-3.5-3.692L8.928 8.874l1.076 1.068-.936.936L8 9.803l-1.067 1.076-.937-.936 1.076-1.068-1.076-1.067.936-.937L8 7.947l1.068-1.076.9.936Z"></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--signClosed"><path d="M13.25 4.719h-2.126L8.507 1.464H7.494L4.867 4.719H2.75A1.54 1.54 0 0 0 1.219 6.25v5.25a1.54 1.54 0 0 0 1.531 1.531h10.5a1.54 1.54 0 0 0 1.531-1.531V6.25a1.54 1.54 0 0 0-1.531-1.531ZM8 2.969l1.444 1.75H6.556L8 2.969Zm5.469 8.531a.219.219 0 0 1-.219.219H2.75a.219.219 0 0 1-.219-.219V6.25a.219.219 0 0 1 .219-.219h10.5a.219.219 0 0 1 .219.219v5.25Zm-3.5-3.692L8.928 8.874l1.076 1.068-.936.936L8 9.803l-1.067 1.076-.937-.936 1.076-1.068-1.076-1.067.936-.937L8 7.947l1.068-1.076.9.936Z"></path></svg>';
 
 export class IconSignClosed extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSignClosed extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--signClosed', '', null, 'IconSignClosed');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--signClosed', '', null, 'IconSignClosed');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--signClosed');
         this.root.append(svg);
     }

package/icons/IconSignClosedLarge.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--signClosedLarge"><path d="M26.5 11.625h-4.462l-5.355-6.676h-1.365l-5.355 6.676H5.5a2.625 2.625 0 0 0-2.625 2.625v10.5A2.625 2.625 0 0 0 5.5 27.375h21a2.625 2.625 0 0 0 2.625-2.625v-10.5a2.625 2.625 0 0 0-2.625-2.625ZM16 6.9l3.789 4.725H12.21L16 6.9Zm11.375 17.85a.875.875 0 0 1-.875.875h-21a.875.875 0 0 1-.875-.875v-10.5a.875.875 0 0 1 .875-.875h21a.875.875 0 0 1 .875.875v10.5Zm-7.691-7.691-2.45 2.441 2.45 2.441-1.243 1.243L16 20.734l-2.441 2.45-1.243-1.243 2.45-2.441-2.45-2.441 1.243-1.243L16 18.266l2.441-2.45 1.243 1.243Z"></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--signClosedLarge"><path d="M26.5 11.625h-4.462l-5.355-6.676h-1.365l-5.355 6.676H5.5a2.625 2.625 0 0 0-2.625 2.625v10.5A2.625 2.625 0 0 0 5.5 27.375h21a2.625 2.625 0 0 0 2.625-2.625v-10.5a2.625 2.625 0 0 0-2.625-2.625ZM16 6.9l3.789 4.725H12.21L16 6.9Zm11.375 17.85a.875.875 0 0 1-.875.875h-21a.875.875 0 0 1-.875-.875v-10.5a.875.875 0 0 1 .875-.875h21a.875.875 0 0 1 .875.875v10.5Zm-7.691-7.691-2.45 2.441 2.45 2.441-1.243 1.243L16 20.734l-2.441 2.45-1.243-1.243 2.45-2.441-2.45-2.441 1.243-1.243L16 18.266l2.441-2.45 1.243 1.243Z"></path></svg>';
 
 export class IconSignClosedLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSignClosedLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--signClosedLarge', '', null, 'IconSignClosedLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--signClosedLarge', '', null, 'IconSignClosedLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--signClosedLarge');
         this.root.append(svg);
     }

package/icons/IconSnowflake.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--snowflake"><path d="m13.749 8.779-1.62.849L9.313 8l2.818-1.627 1.619.848.612-1.163-1.575-.823.07-1.776-1.304-.053-.078 1.838-2.818 1.619V3.608l1.549-.98-.709-1.103L8 2.47l-1.496-.945-.71 1.103 1.55.98v3.255l-2.818-1.62-.079-1.837-1.303.053.07 1.776-1.575.823.612 1.163 1.619-.848L6.687 8 3.87 9.628l-1.619-.85-.612 1.165 1.575.822-.08 1.776 1.313.053.08-1.838 2.817-1.618v3.255l-1.55.98.71 1.102L8 13.53l1.496.945.709-1.102-1.549-.98V9.137l2.818 1.618.07 1.838 1.312-.053-.07-1.776 1.575-.822-.612-1.164Z"></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--snowflake"><path d="m13.749 8.779-1.62.849L9.313 8l2.818-1.627 1.619.848.612-1.163-1.575-.823.07-1.776-1.304-.053-.078 1.838-2.818 1.619V3.608l1.549-.98-.709-1.103L8 2.47l-1.496-.945-.71 1.103 1.55.98v3.255l-2.818-1.62-.079-1.837-1.303.053.07 1.776-1.575.823.612 1.163 1.619-.848L6.687 8 3.87 9.628l-1.619-.85-.612 1.165 1.575.822-.08 1.776 1.313.053.08-1.838 2.817-1.618v3.255l-1.55.98.71 1.102L8 13.53l1.496.945.709-1.102-1.549-.98V9.137l2.818 1.618.07 1.838 1.312-.053-.07-1.776 1.575-.822-.612-1.164Z"></path></svg>';
 
 export class IconSnowflake extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSnowflake extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--snowflake', '', null, 'IconSnowflake');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--snowflake', '', null, 'IconSnowflake');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--snowflake');
         this.root.append(svg);
     }

package/icons/IconSnowflakeLarge.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--snowflakeLarge"><path d="m27.707 17.942-3.456 1.803L17.75 16l6.501-3.745 3.456 1.802.814-1.548-3.395-1.777.158-3.823-1.75-.08-.158 3.912-6.501 3.745V6.98l3.299-2.083-.936-1.487L16 5.465l-3.238-2.056-.936 1.487 3.299 2.083v7.507l-6.501-3.745-.158-3.911-1.75.079.158 3.823-3.395 1.777.814 1.548 3.456-1.802L14.25 16l-6.501 3.745-3.456-1.803-.814 1.55 3.395 1.775-.158 3.824 1.75.079.158-3.911 6.501-3.745v7.507l-3.299 2.091.936 1.48L16 26.534l3.238 2.056.936-1.479-3.299-2.09v-7.508l6.501 3.745.158 3.91 1.75-.078-.158-3.824 3.395-1.776-.814-1.549Z"></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--snowflakeLarge"><path d="m27.707 17.942-3.456 1.803L17.75 16l6.501-3.745 3.456 1.802.814-1.548-3.395-1.777.158-3.823-1.75-.08-.158 3.912-6.501 3.745V6.98l3.299-2.083-.936-1.487L16 5.465l-3.238-2.056-.936 1.487 3.299 2.083v7.507l-6.501-3.745-.158-3.911-1.75.079.158 3.823-3.395 1.777.814 1.548 3.456-1.802L14.25 16l-6.501 3.745-3.456-1.803-.814 1.55 3.395 1.775-.158 3.824 1.75.079.158-3.911 6.501-3.745v7.507l-3.299 2.091.936 1.48L16 26.534l3.238 2.056.936-1.479-3.299-2.09v-7.508l6.501 3.745.158 3.91 1.75-.078-.158-3.824 3.395-1.776-.814-1.549Z"></path></svg>';
 
 export class IconSnowflakeLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSnowflakeLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--snowflakeLarge', '', null, 'IconSnowflakeLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--snowflakeLarge', '', null, 'IconSnowflakeLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--snowflakeLarge');
         this.root.append(svg);
     }

package/icons/IconSocialAndroidCircle.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--androidCircle"><g clip-path="url(#prefix__clip0_4814_3493)"><path fill-rule="evenodd" d="M6.637 5.144c.298-.28.7-.468 1.149-.513h.42a1.96 1.96 0 0 1 1.155.518l.345-.625s.038-.031.06-.018c.021.014.03.04.017.063l-.357.645c.282.295.454.679.46 1.1h-3.78c.006-.422.18-.808.465-1.105l-.354-.64s-.004-.05.017-.063c.022-.013.047-.004.06.018l.343.62Zm.802.389c0 .12-.099.223-.215.223a.22.22 0 0 1-.218-.219.22.22 0 0 1 .214-.223.22.22 0 0 1 .219.219Zm1.62 0c0 .12-.099.223-.215.223a.22.22 0 0 1-.218-.219.22.22 0 0 1 .214-.223.22.22 0 0 1 .219.219Z" clip-rule="evenodd"></path><path d="M7.473 9.942h1.054v1.12a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.437v-1.12h.022c.287 0 .518-.246.518-.554V6.5h-3.81V9.39c0 .303.232.553.519.553h.017v1.12a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.437v-1.12Z"></path><path d="M5.84 7.189a.43.43 0 0 0-.42-.438.43.43 0 0 0-.42.438v1.874a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.438V7.19Z"></path><path d="M10.58 6.751a.43.43 0 0 1 .42.438v1.874a.43.43 0 0 1-.42.438.43.43 0 0 1-.42-.438V7.19a.43.43 0 0 1 .42-.438Z"></path><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.315Zm.72 10.185a5.468 5.468 0 1 0 6.086-9.087A5.468 5.468 0 0 0 4.957 12.5Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_4814_3493"><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--androidCircle"><g clip-path="url(#prefix__clip0_4814_3493)"><path fill-rule="evenodd" d="M6.637 5.144c.298-.28.7-.468 1.149-.513h.42a1.96 1.96 0 0 1 1.155.518l.345-.625s.038-.031.06-.018c.021.014.03.04.017.063l-.357.645c.282.295.454.679.46 1.1h-3.78c.006-.422.18-.808.465-1.105l-.354-.64s-.004-.05.017-.063c.022-.013.047-.004.06.018l.343.62Zm.802.389c0 .12-.099.223-.215.223a.22.22 0 0 1-.218-.219.22.22 0 0 1 .214-.223.22.22 0 0 1 .219.219Zm1.62 0c0 .12-.099.223-.215.223a.22.22 0 0 1-.218-.219.22.22 0 0 1 .214-.223.22.22 0 0 1 .219.219Z" clip-rule="evenodd"></path><path d="M7.473 9.942h1.054v1.12a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.437v-1.12h.022c.287 0 .518-.246.518-.554V6.5h-3.81V9.39c0 .303.232.553.519.553h.017v1.12a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.437v-1.12Z"></path><path d="M5.84 7.189a.43.43 0 0 0-.42-.438.43.43 0 0 0-.42.438v1.874a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.438V7.19Z"></path><path d="M10.58 6.751a.43.43 0 0 1 .42.438v1.874a.43.43 0 0 1-.42.438.43.43 0 0 1-.42-.438V7.19a.43.43 0 0 1 .42-.438Z"></path><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.315Zm.72 10.185a5.468 5.468 0 1 0 6.086-9.087A5.468 5.468 0 0 0 4.957 12.5Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_4814_3493"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconSocialAndroidCircle extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialAndroidCircle extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--androidCircle', '', null, 'IconSocialAndroidCircle');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--androidCircle', '', null, 'IconSocialAndroidCircle');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--androidCircle');
         this.root.append(svg);
     }

package/icons/IconSocialAndroidCircleFilled.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--androidCircleFilled"><g clip-path="url(#prefix__clip0_5394_3957)"><path d="M7.439 5.533c0 .12-.099.223-.215.223a.22.22 0 0 1-.218-.219.22.22 0 0 1 .214-.223.22.22 0 0 1 .219.219Z"></path><path d="M9.059 5.533c0 .12-.099.223-.215.223a.22.22 0 0 1-.218-.219.22.22 0 0 1 .214-.223.22.22 0 0 1 .219.219Z"></path><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.315Zm2.4 2.83c.298-.28.7-.469 1.149-.514h.42a1.96 1.96 0 0 1 1.155.518l.345-.625s.038-.031.06-.018c.021.014.03.04.017.063l-.357.645c.282.295.454.679.46 1.1h-3.78c.006-.422.18-.808.465-1.105l-.354-.64s-.004-.05.017-.063c.022-.013.047-.004.06.018l.343.62Zm.836 4.797h1.054v1.12a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.437v-1.12h.022c.287 0 .518-.246.518-.554V6.5h-3.81V9.39c0 .303.232.553.519.553h.017v1.12a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.437v-1.12ZM5.84 7.19a.43.43 0 0 0-.42-.438.43.43 0 0 0-.42.438v1.874a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.438V7.19Zm4.74-.438a.43.43 0 0 1 .42.438v1.874a.43.43 0 0 1-.42.438.43.43 0 0 1-.42-.438V7.19a.43.43 0 0 1 .42-.438Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_5394_3957"><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--androidCircleFilled"><g clip-path="url(#prefix__clip0_5394_3957)"><path d="M7.439 5.533c0 .12-.099.223-.215.223a.22.22 0 0 1-.218-.219.22.22 0 0 1 .214-.223.22.22 0 0 1 .219.219Z"></path><path d="M9.059 5.533c0 .12-.099.223-.215.223a.22.22 0 0 1-.218-.219.22.22 0 0 1 .214-.223.22.22 0 0 1 .219.219Z"></path><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.315Zm2.4 2.83c.298-.28.7-.469 1.149-.514h.42a1.96 1.96 0 0 1 1.155.518l.345-.625s.038-.031.06-.018c.021.014.03.04.017.063l-.357.645c.282.295.454.679.46 1.1h-3.78c.006-.422.18-.808.465-1.105l-.354-.64s-.004-.05.017-.063c.022-.013.047-.004.06.018l.343.62Zm.836 4.797h1.054v1.12a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.437v-1.12h.022c.287 0 .518-.246.518-.554V6.5h-3.81V9.39c0 .303.232.553.519.553h.017v1.12a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.437v-1.12ZM5.84 7.19a.43.43 0 0 0-.42-.438.43.43 0 0 0-.42.438v1.874a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.438V7.19Zm4.74-.438a.43.43 0 0 1 .42.438v1.874a.43.43 0 0 1-.42.438.43.43 0 0 1-.42-.438V7.19a.43.43 0 0 1 .42-.438Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_5394_3957"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconSocialAndroidCircleFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialAndroidCircleFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--androidCircleFilled', '', null, 'IconSocialAndroidCircleFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--androidCircleFilled', '', null, 'IconSocialAndroidCircleFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--androidCircleFilled');
         this.root.append(svg);
     }

package/icons/IconSocialAndroidCircleFilledLarge.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--androidCircleFilledLarge"><path d="M14.873 11.208c0 .263-.194.474-.434.474s-.434-.211-.434-.474.194-.474.434-.48c.24 0 .434.212.434.475v.005Z"></path><path d="M18.11 11.208c0 .263-.193.474-.433.474s-.434-.211-.434-.474.194-.474.434-.48c.24 0 .434.212.434.475v.005Z"></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.37Zm4.077-15.807a3.816 3.816 0 0 1 2.309-1.104h.845c.9.097 1.705.5 2.302 1.099l.686-1.326a.084.084 0 0 1 .12-.036c.042.026.056.088.033.134l-.708 1.366c.57.634.918 1.46.93 2.366h-7.57a3.595 3.595 0 0 1 .922-2.36l-.71-1.372c-.024-.046-.01-.108.032-.134a.084.084 0 0 1 .12.036l.69 1.33Zm1.676 10.271h2.106v2.412c0 .52.374.938.84.938.467 0 .841-.423.841-.938V20.65h.037c.578 0 1.04-.526 1.04-1.18v-6.19h-7.617l-.002.054a.821.821 0 0 0-.003.054v6.082c0 .654.462 1.18 1.04 1.18h.037v2.412c0 .52.374.938.84.938.467 0 .84-.423.84-.938V20.65Zm-3.266-5.891c0-.52-.378-.938-.84-.938-.467 0-.841.423-.841.938v4.015c0 .52.374.938.84.938.467 0 .841-.423.841-.938v-4.015Zm9.478-.938c.462 0 .841.418.841.938v4.015c0 .515-.374.938-.84.938-.467 0-.841-.418-.841-.938v-4.015c0-.515.374-.938.84-.938Z" 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--androidCircleFilledLarge"><path d="M14.873 11.208c0 .263-.194.474-.434.474s-.434-.211-.434-.474.194-.474.434-.48c.24 0 .434.212.434.475v.005Z"></path><path d="M18.11 11.208c0 .263-.193.474-.433.474s-.434-.211-.434-.474.194-.474.434-.48c.24 0 .434.212.434.475v.005Z"></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.37Zm4.077-15.807a3.816 3.816 0 0 1 2.309-1.104h.845c.9.097 1.705.5 2.302 1.099l.686-1.326a.084.084 0 0 1 .12-.036c.042.026.056.088.033.134l-.708 1.366c.57.634.918 1.46.93 2.366h-7.57a3.595 3.595 0 0 1 .922-2.36l-.71-1.372c-.024-.046-.01-.108.032-.134a.084.084 0 0 1 .12.036l.69 1.33Zm1.676 10.271h2.106v2.412c0 .52.374.938.84.938.467 0 .841-.423.841-.938V20.65h.037c.578 0 1.04-.526 1.04-1.18v-6.19h-7.617l-.002.054a.821.821 0 0 0-.003.054v6.082c0 .654.462 1.18 1.04 1.18h.037v2.412c0 .52.374.938.84.938.467 0 .84-.423.84-.938V20.65Zm-3.266-5.891c0-.52-.378-.938-.84-.938-.467 0-.841.423-.841.938v4.015c0 .52.374.938.84.938.467 0 .841-.423.841-.938v-4.015Zm9.478-.938c.462 0 .841.418.841.938v4.015c0 .515-.374.938-.84.938-.467 0-.841-.418-.841-.938v-4.015c0-.515.374-.938.84-.938Z" clip-rule="evenodd"></path></svg>';
 
 export class IconSocialAndroidCircleFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialAndroidCircleFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--androidCircleFilledLarge', '', null, 'IconSocialAndroidCircleFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--androidCircleFilledLarge', '', null, 'IconSocialAndroidCircleFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--androidCircleFilledLarge');
         this.root.append(svg);
     }