@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/icons/IconStarHalfFilledLarge.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--starHalfFilledLarge"><path d="m23.289 19.133 6.623-6.467-9.16-1.33a.875.875 0 0 1-.657-.48L16 2.56l-4.095 8.295a.875.875 0 0 1-.656.481l-9.162 1.33 6.624 6.467a.874.874 0 0 1 .254.77l-1.566 9.126 8.19-4.279a.874.874 0 0 1 .813 0l8.2 4.314L23 19.903a.875.875 0 0 1 .289-.77Zm-6.064 4.033A2.625 2.625 0 0 0 16 22.87V6.515l2.529 5.11a2.624 2.624 0 0 0 1.977 1.435l5.644.823-4.086 3.98a2.624 2.624 0 0 0-.753 2.328l.963 5.627-5.05-2.652Z"></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--starHalfFilledLarge"><path d="m23.289 19.133 6.623-6.467-9.16-1.33a.875.875 0 0 1-.657-.48L16 2.56l-4.095 8.295a.875.875 0 0 1-.656.481l-9.162 1.33 6.624 6.467a.874.874 0 0 1 .254.77l-1.566 9.126 8.19-4.279a.874.874 0 0 1 .813 0l8.2 4.314L23 19.903a.875.875 0 0 1 .289-.77Zm-6.064 4.033A2.625 2.625 0 0 0 16 22.87V6.515l2.529 5.11a2.624 2.624 0 0 0 1.977 1.435l5.644.823-4.086 3.98a2.624 2.624 0 0 0-.753 2.328l.963 5.627-5.05-2.652Z"></path></svg>';
 
 export class IconStarHalfFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStarHalfFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--starHalfFilledLarge', '', null, 'IconStarHalfFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--starHalfFilledLarge', '', null, 'IconStarHalfFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--starHalfFilledLarge');
         this.root.append(svg);
     }

package/icons/IconStarLarge.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--starLarge"><path d="m24.601 29.029-8.199-4.279a.874.874 0 0 0-.813 0l-8.19 4.279 1.6-9.126a.875.875 0 0 0-.253-.77l-6.659-6.467 9.162-1.33a.875.875 0 0 0 .656-.48L16 2.56l4.095 8.295a.875.875 0 0 0 .656.481l9.161 1.33-6.623 6.467a.874.874 0 0 0-.254.77l1.566 9.126ZM16 22.904c.426-.002.847.1 1.225.297l5.049 2.625-.963-5.626a2.624 2.624 0 0 1 .753-2.327l4.086-3.982-5.644-.822a2.624 2.624 0 0 1-1.977-1.444l-2.53-5.11-2.528 5.11a2.625 2.625 0 0 1-1.977 1.435l-5.644.823 4.086 3.98a2.625 2.625 0 0 1 .753 2.328l-.963 5.627 5.049-2.625A2.625 2.625 0 0 1 16 22.869v.035Z"></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--starLarge"><path d="m24.601 29.029-8.199-4.279a.874.874 0 0 0-.813 0l-8.19 4.279 1.6-9.126a.875.875 0 0 0-.253-.77l-6.659-6.467 9.162-1.33a.875.875 0 0 0 .656-.48L16 2.56l4.095 8.295a.875.875 0 0 0 .656.481l9.161 1.33-6.623 6.467a.874.874 0 0 0-.254.77l1.566 9.126ZM16 22.904c.426-.002.847.1 1.225.297l5.049 2.625-.963-5.626a2.624 2.624 0 0 1 .753-2.327l4.086-3.982-5.644-.822a2.624 2.624 0 0 1-1.977-1.444l-2.53-5.11-2.528 5.11a2.625 2.625 0 0 1-1.977 1.435l-5.644.823 4.086 3.98a2.625 2.625 0 0 1 .753 2.328l-.963 5.627 5.049-2.625A2.625 2.625 0 0 1 16 22.869v.035Z"></path></svg>';
 
 export class IconStarLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStarLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--starLarge', '', null, 'IconStarLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--starLarge', '', null, 'IconStarLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--starLarge');
         this.root.append(svg);
     }

package/icons/IconStopwatch.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--stopwatch"><path d="M13.547 9.234a5.547 5.547 0 0 1-10.114 3.141h1.75A4.165 4.165 0 0 0 8 13.469a4.235 4.235 0 1 0 0-8.461A4.191 4.191 0 0 0 5.008 6.25H3.336a5.539 5.539 0 0 1 10.212 2.984ZM7.344 6.705v2.966L9.67 11.23l.727-1.094-1.75-1.164V6.705H7.344ZM5.375 9.969H2.531l.438 1.312h2.406V9.97Zm0-2.625H1l.438 1.312h3.937V7.344Zm4.804-4.83-.315-1.295H6.136l-.315 1.295h4.375-.017Z"></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--stopwatch"><path d="M13.547 9.234a5.547 5.547 0 0 1-10.114 3.141h1.75A4.165 4.165 0 0 0 8 13.469a4.235 4.235 0 1 0 0-8.461A4.191 4.191 0 0 0 5.008 6.25H3.336a5.539 5.539 0 0 1 10.212 2.984ZM7.344 6.705v2.966L9.67 11.23l.727-1.094-1.75-1.164V6.705H7.344ZM5.375 9.969H2.531l.438 1.312h2.406V9.97Zm0-2.625H1l.438 1.312h3.937V7.344Zm4.804-4.83-.315-1.295H6.136l-.315 1.295h4.375-.017Z"></path></svg>';
 
 export class IconStopwatch extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStopwatch extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--stopwatch', '', null, 'IconStopwatch');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--stopwatch', '', null, 'IconStopwatch');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--stopwatch');
         this.root.append(svg);
     }

package/icons/IconStopwatchFilled.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--stopwatchFilled"><path d="M8 3.695A5.547 5.547 0 0 0 3.336 6.25H5.83a.665.665 0 0 1 .656.656v4.821a.665.665 0 0 1-.656.657H3.433A5.546 5.546 0 0 0 13.55 9.076 5.548 5.548 0 0 0 8 3.695Zm2.398 6.44-.727 1.094L7.344 9.67V6.705h1.312V8.97l1.742 1.164Z"></path><path d="m10.179 2.514-.315-1.295H6.136l-.315 1.295v.017h4.358v-.017Z"></path><path d="M5.375 8.656V7.344H1l.438 1.312h3.937Z"></path><path d="M5.375 11.281V9.97H2.531l.438 1.312h2.406Z"></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--stopwatchFilled"><path d="M8 3.695A5.547 5.547 0 0 0 3.336 6.25H5.83a.665.665 0 0 1 .656.656v4.821a.665.665 0 0 1-.656.657H3.433A5.546 5.546 0 0 0 13.55 9.076 5.548 5.548 0 0 0 8 3.695Zm2.398 6.44-.727 1.094L7.344 9.67V6.705h1.312V8.97l1.742 1.164Z"></path><path d="m10.179 2.514-.315-1.295H6.136l-.315 1.295v.017h4.358v-.017Z"></path><path d="M5.375 8.656V7.344H1l.438 1.312h3.937Z"></path><path d="M5.375 11.281V9.97H2.531l.438 1.312h2.406Z"></path></svg>';
 
 export class IconStopwatchFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStopwatchFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--stopwatchFilled', '', null, 'IconStopwatchFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--stopwatchFilled', '', null, 'IconStopwatchFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--stopwatchFilled');
         this.root.append(svg);
     }

package/icons/IconStopwatchFilledLarge.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--stopwatchFilledLarge"><path d="M17.75 6.419V4.625h3.5l-.604-1.75h-7.542l-.604 1.75H16v1.794a11.375 11.375 0 0 0-9.625 6.956h4.375a.875.875 0 0 1 .875.875v7a.875.875 0 0 1-.875.875H6.375A11.375 11.375 0 1 0 17.75 6.419ZM16 11.669h1.75v5.626l3.946 2.371-.875 1.505L16 18.25v-6.58Z"></path><path d="M9.875 16.875v-1.75H2l.788 1.75h7.087Z"></path><path d="M9.875 20.375v-1.75h-5.25l.787 1.75h4.463Z"></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--stopwatchFilledLarge"><path d="M17.75 6.419V4.625h3.5l-.604-1.75h-7.542l-.604 1.75H16v1.794a11.375 11.375 0 0 0-9.625 6.956h4.375a.875.875 0 0 1 .875.875v7a.875.875 0 0 1-.875.875H6.375A11.375 11.375 0 1 0 17.75 6.419ZM16 11.669h1.75v5.626l3.946 2.371-.875 1.505L16 18.25v-6.58Z"></path><path d="M9.875 16.875v-1.75H2l.788 1.75h7.087Z"></path><path d="M9.875 20.375v-1.75h-5.25l.787 1.75h4.463Z"></path></svg>';
 
 export class IconStopwatchFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStopwatchFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--stopwatchFilledLarge', '', null, 'IconStopwatchFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--stopwatchFilledLarge', '', null, 'IconStopwatchFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--stopwatchFilledLarge');
         this.root.append(svg);
     }

package/icons/IconStopwatchLarge.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--stopwatchLarge"><path d="M28.25 17.75a11.375 11.375 0 0 1-21.875 4.375h1.934a9.625 9.625 0 1 0 0-8.75H6.375a11.375 11.375 0 0 1 9.625-7v-1.75h-3.5l.604-1.75h7.542l.604 1.75h-3.5v1.794a11.375 11.375 0 0 1 10.5 11.331ZM16 11.625v6.624l4.804 2.879.875-1.506-3.929-2.37v-5.627H16Zm-6.125 7h-5.25l.787 1.75h4.463v-1.75Zm0-3.5H2l.788 1.75h7.087v-1.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--stopwatchLarge"><path d="M28.25 17.75a11.375 11.375 0 0 1-21.875 4.375h1.934a9.625 9.625 0 1 0 0-8.75H6.375a11.375 11.375 0 0 1 9.625-7v-1.75h-3.5l.604-1.75h7.542l.604 1.75h-3.5v1.794a11.375 11.375 0 0 1 10.5 11.331ZM16 11.625v6.624l4.804 2.879.875-1.506-3.929-2.37v-5.627H16Zm-6.125 7h-5.25l.787 1.75h4.463v-1.75Zm0-3.5H2l.788 1.75h7.087v-1.75Z"></path></svg>';
 
 export class IconStopwatchLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStopwatchLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--stopwatchLarge', '', null, 'IconStopwatchLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--stopwatchLarge', '', null, 'IconStopwatchLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--stopwatchLarge');
         this.root.append(svg);
     }

package/icons/IconSun.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--sun"><path d="M7.344 13.425v1.137h1.312v-1.137a5.538 5.538 0 0 1-.656.044 5.538 5.538 0 0 1-.656-.044Z"></path><path d="M8.656 2.575V1.411H7.344v1.164c.217-.028.436-.042.656-.044.22.002.438.016.656.044Z"></path><path d="M13.425 8.639h1.155V7.326h-1.155c.027.224.042.449.044.674a5.11 5.11 0 0 1-.044.639Z"></path><path d="M2.575 7.326H1.42V8.64h1.155A5.11 5.11 0 0 1 2.53 8a5.81 5.81 0 0 1 .044-.674Z"></path><path d="m4.64 3.695-.823-.822-.927.927.814.822c.276-.343.59-.654.936-.927Z"></path><path d="m11.377 12.296.805.805.928-.927-.805-.814c-.273.346-.584.66-.928.936Z"></path><path d="M11.377 12.287c.344-.276.655-.59.928-.936-.27.349-.582.663-.928.936Z"></path><path d="M3.704 4.622c.276-.343.59-.654.936-.927-.348.27-.663.582-.936.927Z"></path><path d="m12.296 4.622.814-.822-.928-.927-.822.822c.346.273.66.584.936.927Z"></path><path d="m3.695 11.36-.805.814.927.927.805-.805a5.863 5.863 0 0 1-.927-.936Z"></path><path d="M4.622 12.296a5.863 5.863 0 0 1-.927-.936c.27.348.582.663.927.936Z"></path><path d="M12.287 4.622a5.863 5.863 0 0 0-.936-.927c.348.27.663.582.936.927Z"></path><path d="M8 3.844a4.156 4.156 0 1 0 0 8.312 4.156 4.156 0 0 0 0-8.312Zm0 7A2.844 2.844 0 1 1 10.844 8 2.853 2.853 0 0 1 8 10.844Z"></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--sun"><path d="M7.344 13.425v1.137h1.312v-1.137a5.538 5.538 0 0 1-.656.044 5.538 5.538 0 0 1-.656-.044Z"></path><path d="M8.656 2.575V1.411H7.344v1.164c.217-.028.436-.042.656-.044.22.002.438.016.656.044Z"></path><path d="M13.425 8.639h1.155V7.326h-1.155c.027.224.042.449.044.674a5.11 5.11 0 0 1-.044.639Z"></path><path d="M2.575 7.326H1.42V8.64h1.155A5.11 5.11 0 0 1 2.53 8a5.81 5.81 0 0 1 .044-.674Z"></path><path d="m4.64 3.695-.823-.822-.927.927.814.822c.276-.343.59-.654.936-.927Z"></path><path d="m11.377 12.296.805.805.928-.927-.805-.814c-.273.346-.584.66-.928.936Z"></path><path d="M11.377 12.287c.344-.276.655-.59.928-.936-.27.349-.582.663-.928.936Z"></path><path d="M3.704 4.622c.276-.343.59-.654.936-.927-.348.27-.663.582-.936.927Z"></path><path d="m12.296 4.622.814-.822-.928-.927-.822.822c.346.273.66.584.936.927Z"></path><path d="m3.695 11.36-.805.814.927.927.805-.805a5.863 5.863 0 0 1-.927-.936Z"></path><path d="M4.622 12.296a5.863 5.863 0 0 1-.927-.936c.27.348.582.663.927.936Z"></path><path d="M12.287 4.622a5.863 5.863 0 0 0-.936-.927c.348.27.663.582.936.927Z"></path><path d="M8 3.844a4.156 4.156 0 1 0 0 8.312 4.156 4.156 0 0 0 0-8.312Zm0 7A2.844 2.844 0 1 1 10.844 8 2.853 2.853 0 0 1 8 10.844Z"></path></svg>';
 
 export class IconSun extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSun extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--sun', '', null, 'IconSun');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--sun', '', null, 'IconSun');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sun');
         this.root.append(svg);
     }

package/icons/IconSunLarge.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--sunLarge"><path d="M15.125 26.5v2.625h1.75V26.5c-.289 0-.578.044-.875.044-.297 0-.586-.044-.875-.044Z"></path><path d="M16.875 5.544V2.875h-1.75v2.669H16c.297 0 .586-.044.875 0Z"></path><path d="M2.875 15.125v1.75h2.669v-1.75H2.875Z"></path><path d="M26.5 15.125c0 .289.044.578.044.875 0 .297 0 .586-.044.875h2.625v-1.75H26.5Z"></path><path d="M22.773 7.994c.445.375.858.788 1.233 1.233l1.89-1.89-1.233-1.233-1.89 1.89Z"></path><path d="m7.994 22.773-1.89 1.89 1.234 1.233 1.89-1.89a10.278 10.278 0 0 1-1.234-1.233Z"></path><path d="m22.773 24.006 1.89 1.89 1.233-1.233-1.89-1.89c-.375.445-.788.858-1.233 1.233Z"></path><path d="m9.228 7.994-1.89-1.89-1.234 1.234 1.89 1.89c.375-.446.788-.859 1.234-1.234Z"></path><path d="M24.75 16c0-.297 0-.586-.044-.875a8.75 8.75 0 0 0-7.831-7.831h-1.75a8.75 8.75 0 0 0-7.831 7.875v1.75a8.75 8.75 0 0 0 7.875 7.875c.288 0 .577.043.875.043.297 0 .586 0 .875-.043a8.75 8.75 0 0 0 7.831-7.919V16Zm-1.986 1.75v.061a6.785 6.785 0 0 1-.726 1.689 7.14 7.14 0 0 1-2.538 2.538c-.526.31-1.09.549-1.68.708h-.061a7 7 0 1 1-.009-13.51h.061a6.78 6.78 0 0 1 1.689.726 7.14 7.14 0 0 1 2.538 2.538c.31.525.549 1.09.708 1.68v.061a6.8 6.8 0 0 1 0 3.553l.018-.044Z"></path><path d="M20.288 21.521a7.14 7.14 0 0 0 1.75-2.021c-.16.26-.332.51-.517.753-.355.474-.77.9-1.233 1.268Z"></path><path d="M22.764 17.75Z"></path><path d="M17.75 9.236Z"></path><path d="M16 23Z"></path><path d="M22.939 15.125a7.002 7.002 0 0 0 0 0Z"></path><path d="M21.521 11.713a7.14 7.14 0 0 0-2.021-1.75c.26.158.51.33.753.516.474.355.9.77 1.268 1.234Z"></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--sunLarge"><path d="M15.125 26.5v2.625h1.75V26.5c-.289 0-.578.044-.875.044-.297 0-.586-.044-.875-.044Z"></path><path d="M16.875 5.544V2.875h-1.75v2.669H16c.297 0 .586-.044.875 0Z"></path><path d="M2.875 15.125v1.75h2.669v-1.75H2.875Z"></path><path d="M26.5 15.125c0 .289.044.578.044.875 0 .297 0 .586-.044.875h2.625v-1.75H26.5Z"></path><path d="M22.773 7.994c.445.375.858.788 1.233 1.233l1.89-1.89-1.233-1.233-1.89 1.89Z"></path><path d="m7.994 22.773-1.89 1.89 1.234 1.233 1.89-1.89a10.278 10.278 0 0 1-1.234-1.233Z"></path><path d="m22.773 24.006 1.89 1.89 1.233-1.233-1.89-1.89c-.375.445-.788.858-1.233 1.233Z"></path><path d="m9.228 7.994-1.89-1.89-1.234 1.234 1.89 1.89c.375-.446.788-.859 1.234-1.234Z"></path><path d="M24.75 16c0-.297 0-.586-.044-.875a8.75 8.75 0 0 0-7.831-7.831h-1.75a8.75 8.75 0 0 0-7.831 7.875v1.75a8.75 8.75 0 0 0 7.875 7.875c.288 0 .577.043.875.043.297 0 .586 0 .875-.043a8.75 8.75 0 0 0 7.831-7.919V16Zm-1.986 1.75v.061a6.785 6.785 0 0 1-.726 1.689 7.14 7.14 0 0 1-2.538 2.538c-.526.31-1.09.549-1.68.708h-.061a7 7 0 1 1-.009-13.51h.061a6.78 6.78 0 0 1 1.689.726 7.14 7.14 0 0 1 2.538 2.538c.31.525.549 1.09.708 1.68v.061a6.8 6.8 0 0 1 0 3.553l.018-.044Z"></path><path d="M20.288 21.521a7.14 7.14 0 0 0 1.75-2.021c-.16.26-.332.51-.517.753-.355.474-.77.9-1.233 1.268Z"></path><path d="M22.764 17.75Z"></path><path d="M17.75 9.236Z"></path><path d="M16 23Z"></path><path d="M22.939 15.125a7.002 7.002 0 0 0 0 0Z"></path><path d="M21.521 11.713a7.14 7.14 0 0 0-2.021-1.75c.26.158.51.33.753.516.474.355.9.77 1.268 1.234Z"></path></svg>';
 
 export class IconSunLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSunLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--sunLarge', '', null, 'IconSunLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--sunLarge', '', null, 'IconSunLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sunLarge');
         this.root.append(svg);
     }

package/icons/IconSushi.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--sushi"><g clip-path="url(#prefix__clip0_4_481)"><path d="m1.875 11.412 3.841-1.18-1.295 3.893h1.383L7.256 9.75 15 7.379l-.385-1.26h-.114a3.15 3.15 0 0 0-.586-3.684l-.359-.359a3.272 3.272 0 0 0-3.587-.612L8.76 1.105 6.25 8.7l-4.375 1.339v1.373Zm7.726-8.015.359-.358a1.899 1.899 0 0 1 2.045-.403c.226.093.432.23.606.403l.359.358a1.863 1.863 0 0 1 .551 1.33 1.83 1.83 0 0 1-.551 1.322l-.359.358a1.916 1.916 0 0 1-2.625 0l-.359-.358a1.881 1.881 0 0 1-.026-2.652Zm-1.269 3.16c.1.15.213.292.342.42l.359.358c.138.134.287.257.446.367l-1.706.525.56-1.67Z"></path><path d="m10.695 3.971-.16.161a.84.84 0 0 0-.001 1.188l.16.161a.84.84 0 0 0 1.189 0l.16-.16a.84.84 0 0 0 0-1.189l-.16-.16a.84.84 0 0 0-1.188 0Z"></path></g><defs><clipPath id="prefix__clip0_4_481"><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--sushi"><g clip-path="url(#prefix__clip0_4_481)"><path d="m1.875 11.412 3.841-1.18-1.295 3.893h1.383L7.256 9.75 15 7.379l-.385-1.26h-.114a3.15 3.15 0 0 0-.586-3.684l-.359-.359a3.272 3.272 0 0 0-3.587-.612L8.76 1.105 6.25 8.7l-4.375 1.339v1.373Zm7.726-8.015.359-.358a1.899 1.899 0 0 1 2.045-.403c.226.093.432.23.606.403l.359.358a1.863 1.863 0 0 1 .551 1.33 1.83 1.83 0 0 1-.551 1.322l-.359.358a1.916 1.916 0 0 1-2.625 0l-.359-.358a1.881 1.881 0 0 1-.026-2.652Zm-1.269 3.16c.1.15.213.292.342.42l.359.358c.138.134.287.257.446.367l-1.706.525.56-1.67Z"></path><path d="m10.695 3.971-.16.161a.84.84 0 0 0-.001 1.188l.16.161a.84.84 0 0 0 1.189 0l.16-.16a.84.84 0 0 0 0-1.189l-.16-.16a.84.84 0 0 0-1.188 0Z"></path></g><defs><clipPath id="prefix__clip0_4_481"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconSushi extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSushi extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--sushi', '', null, 'IconSushi');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--sushi', '', null, 'IconSushi');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sushi');
         this.root.append(svg);
     }

package/icons/IconSushiLarge.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--sushiLarge"><path d="M25.293 6.375a2.818 2.818 0 0 0-3.894 0l-.368.359a2.748 2.748 0 0 0 0 3.893l.368.368a2.73 2.73 0 0 0 1.942.805c.732 0 1.433-.29 1.951-.805l.333-.385a2.765 2.765 0 0 0 0-3.902l-.332-.333Zm-.875 3.019-.368.358a1.015 1.015 0 0 1-1.418 0l-.358-.358a.998.998 0 0 1 0-1.418l.358-.367a1.015 1.015 0 0 1 1.418 0l.367.367a.997.997 0 0 1 .29.709c-.008.256-.11.5-.29.682v.027Z"></path><path d="m28.031 13.06.219-.219a5.915 5.915 0 0 0 0-8.373l-.718-.718a5.933 5.933 0 0 0-8.207-.158l.341-1.014L18.004 2l-5.25 15.75-9.879 3.063v1.828l9.196-2.835L9 29.125h1.838l3.325-9.949 15.54-4.786-.578-1.671-1.094.341ZM14.81 17.137l2.205-6.606a5.749 5.749 0 0 0 1.426 2.31l.709.718a5.96 5.96 0 0 0 2.468 1.479l-6.808 2.1Zm11.48-4.812a4.174 4.174 0 0 1-5.898 0l-.717-.7a4.183 4.183 0 0 1 0-5.897l.7-.736a4.182 4.182 0 0 1 5.898 0l.717.718a4.165 4.165 0 0 1 0 5.897l-.7.718Z"></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--sushiLarge"><path d="M25.293 6.375a2.818 2.818 0 0 0-3.894 0l-.368.359a2.748 2.748 0 0 0 0 3.893l.368.368a2.73 2.73 0 0 0 1.942.805c.732 0 1.433-.29 1.951-.805l.333-.385a2.765 2.765 0 0 0 0-3.902l-.332-.333Zm-.875 3.019-.368.358a1.015 1.015 0 0 1-1.418 0l-.358-.358a.998.998 0 0 1 0-1.418l.358-.367a1.015 1.015 0 0 1 1.418 0l.367.367a.997.997 0 0 1 .29.709c-.008.256-.11.5-.29.682v.027Z"></path><path d="m28.031 13.06.219-.219a5.915 5.915 0 0 0 0-8.373l-.718-.718a5.933 5.933 0 0 0-8.207-.158l.341-1.014L18.004 2l-5.25 15.75-9.879 3.063v1.828l9.196-2.835L9 29.125h1.838l3.325-9.949 15.54-4.786-.578-1.671-1.094.341ZM14.81 17.137l2.205-6.606a5.749 5.749 0 0 0 1.426 2.31l.709.718a5.96 5.96 0 0 0 2.468 1.479l-6.808 2.1Zm11.48-4.812a4.174 4.174 0 0 1-5.898 0l-.717-.7a4.183 4.183 0 0 1 0-5.897l.7-.736a4.182 4.182 0 0 1 5.898 0l.717.718a4.165 4.165 0 0 1 0 5.897l-.7.718Z"></path></svg>';
 
 export class IconSushiLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSushiLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--sushiLarge', '', null, 'IconSushiLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--sushiLarge', '', null, 'IconSushiLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sushiLarge');
         this.root.append(svg);
     }

package/icons/IconSwissFranc.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--swissFranc"><path d="M2.295 8.131A1.444 1.444 0 0 0 4.29 9.537a1.54 1.54 0 0 0 .508-.33l.06-.06.788.795-.052.062a2.52 2.52 0 0 1-1.89.77 2.563 2.563 0 0 1-2.625-2.625 2.564 2.564 0 0 1 2.625-2.625 2.573 2.573 0 0 1 1.89.726l.052.061-.787.814-.061-.088A1.531 1.531 0 0 0 3.695 6.6a1.435 1.435 0 0 0-1.4 1.531Zm7.236-.586H7.545V5.559H6.329v5.127h1.216V8.612h1.986v2.074h1.225V5.56H9.531v1.986Zm5.425-.875V5.559H11.79v5.127h1.225V8.822h1.864V7.755h-1.864v-1.12l1.942.035Z"></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--swissFranc"><path d="M2.295 8.131A1.444 1.444 0 0 0 4.29 9.537a1.54 1.54 0 0 0 .508-.33l.06-.06.788.795-.052.062a2.52 2.52 0 0 1-1.89.77 2.563 2.563 0 0 1-2.625-2.625 2.564 2.564 0 0 1 2.625-2.625 2.573 2.573 0 0 1 1.89.726l.052.061-.787.814-.061-.088A1.531 1.531 0 0 0 3.695 6.6a1.435 1.435 0 0 0-1.4 1.531Zm7.236-.586H7.545V5.559H6.329v5.127h1.216V8.612h1.986v2.074h1.225V5.56H9.531v1.986Zm5.425-.875V5.559H11.79v5.127h1.225V8.822h1.864V7.755h-1.864v-1.12l1.942.035Z"></path></svg>';
 
 export class IconSwissFranc extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSwissFranc extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--swissFranc', '', null, 'IconSwissFranc');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--swissFranc', '', null, 'IconSwissFranc');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--swissFranc');
         this.root.append(svg);
     }

package/icons/IconSwissFrancLarge.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--swissFrancLarge"><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 21ZM8.825 15.659a1.89 1.89 0 0 0 1.838 1.977 2.022 2.022 0 0 0 1.426-.569l.061-.07.98.99-.061.06a3.185 3.185 0 0 1-2.398.99A3.288 3.288 0 0 1 7.25 15.65a3.29 3.29 0 0 1 3.404-3.386 3.246 3.246 0 0 1 2.397.98l.062.061-.963.989-.061-.044a1.97 1.97 0 0 0-1.435-.569 1.872 1.872 0 0 0-1.829 1.978Zm9.17-3.282H19.5v6.537h-1.505v-2.625H15.37v2.625h-1.505v-6.537h1.522v2.547h2.625l-.017-2.546Zm4.226 1.33v1.488h2.398v1.33H22.22v2.389h-1.514v-6.537h4.043v1.33h-2.529Z"></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--swissFrancLarge"><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 21ZM8.825 15.659a1.89 1.89 0 0 0 1.838 1.977 2.022 2.022 0 0 0 1.426-.569l.061-.07.98.99-.061.06a3.185 3.185 0 0 1-2.398.99A3.288 3.288 0 0 1 7.25 15.65a3.29 3.29 0 0 1 3.404-3.386 3.246 3.246 0 0 1 2.397.98l.062.061-.963.989-.061-.044a1.97 1.97 0 0 0-1.435-.569 1.872 1.872 0 0 0-1.829 1.978Zm9.17-3.282H19.5v6.537h-1.505v-2.625H15.37v2.625h-1.505v-6.537h1.522v2.547h2.625l-.017-2.546Zm4.226 1.33v1.488h2.398v1.33H22.22v2.389h-1.514v-6.537h4.043v1.33h-2.529Z"></path></svg>';
 
 export class IconSwissFrancLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSwissFrancLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--swissFrancLarge', '', null, 'IconSwissFrancLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--swissFrancLarge', '', null, 'IconSwissFrancLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--swissFrancLarge');
         this.root.append(svg);
     }

package/icons/IconSwitchProduct.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--switchProduct"><path d="M5.261 2.094H2.094V5.26H5.26V2.094Z"></path><path d="M5.261 6.407H2.094v3.168H5.26V6.408Z"></path><path d="M9.584 2.094H6.416V5.26h3.168V2.094Z"></path><path d="M9.584 6.407H6.416v3.168h3.168V6.408Z"></path><path d="M5.261 10.73H2.094v3.168H5.26V10.73Z"></path><path d="M9.584 10.73H6.416v3.168h3.168V10.73Z"></path><path d="M13.898 2.094H10.73V5.26h3.168V2.094Z"></path><path d="M13.898 6.407H10.73v3.168h3.168V6.408Z"></path><path d="M13.898 10.73H10.73v3.168h3.168V10.73Z"></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--switchProduct"><path d="M5.261 2.094H2.094V5.26H5.26V2.094Z"></path><path d="M5.261 6.407H2.094v3.168H5.26V6.408Z"></path><path d="M9.584 2.094H6.416V5.26h3.168V2.094Z"></path><path d="M9.584 6.407H6.416v3.168h3.168V6.408Z"></path><path d="M5.261 10.73H2.094v3.168H5.26V10.73Z"></path><path d="M9.584 10.73H6.416v3.168h3.168V10.73Z"></path><path d="M13.898 2.094H10.73V5.26h3.168V2.094Z"></path><path d="M13.898 6.407H10.73v3.168h3.168V6.408Z"></path><path d="M13.898 10.73H10.73v3.168h3.168V10.73Z"></path></svg>';
 
 export class IconSwitchProduct extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSwitchProduct extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--switchProduct', '', null, 'IconSwitchProduct');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--switchProduct', '', null, 'IconSwitchProduct');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--switchProduct');
         this.root.append(svg);
     }

package/icons/IconSwitchProductLarge.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--switchProductLarge"><path d="M8.974 6.375v2.599H6.375V6.375h2.599Zm1.75-1.75H4.625v6.099h6.099V4.625Z"></path><path d="M8.974 14.696v2.599H6.375v-2.599h2.599Zm1.75-1.75H4.625v6.099h6.099v-6.099Z"></path><path d="M17.295 6.375v2.599h-2.599V6.375h2.599Zm1.75-1.75h-6.099v6.099h6.099V4.625Z"></path><path d="M17.295 14.696v2.599h-2.599v-2.599h2.599Zm1.75-1.75h-6.099v6.099h6.099v-6.099Z"></path><path d="M8.974 23.017v2.6H6.375v-2.6h2.599Zm1.75-1.75H4.625v6.1h6.099v-6.1Z"></path><path d="M17.295 23.017v2.6h-2.599v-2.6h2.599Zm1.75-1.75h-6.099v6.1h6.099v-6.1Z"></path><path d="M25.616 6.375v2.599h-2.599V6.375h2.6Zm1.75-1.75h-6.099v6.099h6.1V4.625Z"></path><path d="M25.616 14.696v2.599h-2.599v-2.599h2.6Zm1.75-1.75h-6.099v6.099h6.1v-6.099Z"></path><path d="M25.616 23.017v2.6h-2.599v-2.6h2.6Zm1.75-1.75h-6.099v6.1h6.1v-6.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 32 32" class="c-pieIcon c-pieIcon--switchProductLarge"><path d="M8.974 6.375v2.599H6.375V6.375h2.599Zm1.75-1.75H4.625v6.099h6.099V4.625Z"></path><path d="M8.974 14.696v2.599H6.375v-2.599h2.599Zm1.75-1.75H4.625v6.099h6.099v-6.099Z"></path><path d="M17.295 6.375v2.599h-2.599V6.375h2.599Zm1.75-1.75h-6.099v6.099h6.099V4.625Z"></path><path d="M17.295 14.696v2.599h-2.599v-2.599h2.599Zm1.75-1.75h-6.099v6.099h6.099v-6.099Z"></path><path d="M8.974 23.017v2.6H6.375v-2.6h2.599Zm1.75-1.75H4.625v6.1h6.099v-6.1Z"></path><path d="M17.295 23.017v2.6h-2.599v-2.6h2.599Zm1.75-1.75h-6.099v6.1h6.099v-6.1Z"></path><path d="M25.616 6.375v2.599h-2.599V6.375h2.6Zm1.75-1.75h-6.099v6.099h6.1V4.625Z"></path><path d="M25.616 14.696v2.599h-2.599v-2.599h2.6Zm1.75-1.75h-6.099v6.099h6.1v-6.099Z"></path><path d="M25.616 23.017v2.6h-2.599v-2.6h2.6Zm1.75-1.75h-6.099v6.1h6.1v-6.1Z"></path></svg>';
 
 export class IconSwitchProductLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSwitchProductLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--switchProductLarge', '', null, 'IconSwitchProductLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--switchProductLarge', '', null, 'IconSwitchProductLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--switchProductLarge');
         this.root.append(svg);
     }

package/icons/IconSync.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--sync"><path d="M8.875 2.164A5.906 5.906 0 0 1 13.906 8a5.845 5.845 0 0 1-1.75 4.174l-.927-.928a4.587 4.587 0 0 0 0-6.492 4.507 4.507 0 0 0-2.354-1.251V4.78L6.25 2.75 8.875 1v1.164ZM3.406 8a4.568 4.568 0 0 0 1.348 3.246 4.506 4.506 0 0 0 2.371 1.252V11.22l2.625 2.03L7.125 15v-1.164A5.906 5.906 0 0 1 2.094 8a5.845 5.845 0 0 1 1.75-4.174l.91.928A4.567 4.567 0 0 0 3.406 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--sync"><path d="M8.875 2.164A5.906 5.906 0 0 1 13.906 8a5.845 5.845 0 0 1-1.75 4.174l-.927-.928a4.587 4.587 0 0 0 0-6.492 4.507 4.507 0 0 0-2.354-1.251V4.78L6.25 2.75 8.875 1v1.164ZM3.406 8a4.568 4.568 0 0 0 1.348 3.246 4.506 4.506 0 0 0 2.371 1.252V11.22l2.625 2.03L7.125 15v-1.164A5.906 5.906 0 0 1 2.094 8a5.845 5.845 0 0 1 1.75-4.174l.91.928A4.567 4.567 0 0 0 3.406 8Z"></path></svg>';
 
 export class IconSync extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSync extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--sync', '', null, 'IconSync');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--sync', '', null, 'IconSync');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sync');
         this.root.append(svg);
     }

package/icons/IconSyncLarge.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--syncLarge"><path d="M19.762 4.056 18.1 5.72a10.403 10.403 0 0 1 5.32 2.852 10.499 10.499 0 0 1 0 14.875l-1.234-1.234A8.751 8.751 0 0 0 18.205 7.54l1.557 1.557-1.242 1.243-3.141-3.142a.875.875 0 0 1 0-1.242l3.14-3.141 1.243 1.242Zm-9.948 18.13a8.697 8.697 0 0 0 3.98 2.275l-1.557-1.557 1.243-1.243 3.141 3.141a.874.874 0 0 1 0 1.243l-3.141 3.141-1.243-1.242L13.9 26.28A10.5 10.5 0 0 1 8.57 8.571l1.243 1.243a8.75 8.75 0 0 0 0 12.372Z"></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--syncLarge"><path d="M19.762 4.056 18.1 5.72a10.403 10.403 0 0 1 5.32 2.852 10.499 10.499 0 0 1 0 14.875l-1.234-1.234A8.751 8.751 0 0 0 18.205 7.54l1.557 1.557-1.242 1.243-3.141-3.142a.875.875 0 0 1 0-1.242l3.14-3.141 1.243 1.242Zm-9.948 18.13a8.697 8.697 0 0 0 3.98 2.275l-1.557-1.557 1.243-1.243 3.141 3.141a.874.874 0 0 1 0 1.243l-3.141 3.141-1.243-1.242L13.9 26.28A10.5 10.5 0 0 1 8.57 8.571l1.243 1.243a8.75 8.75 0 0 0 0 12.372Z"></path></svg>';
 
 export class IconSyncLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSyncLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--syncLarge', '', null, 'IconSyncLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--syncLarge', '', null, 'IconSyncLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--syncLarge');
         this.root.append(svg);
     }

package/icons/IconTaco.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--taco"><path d="m14.466 9.094-1.216.437c.257.627.282 1.325.07 1.969 0 .053-.131.193-.534.193-.402 0-.534-.272-.875-.875l-.114-.193-.06-.105c-.193-.315-.368-.683-.552-1.059a4.611 4.611 0 0 0 2.625-1.864 1.488 1.488 0 0 0 .053-1.19 1.75 1.75 0 0 0-1.584-.936 2.16 2.16 0 0 1-.543-.096c0-.088.044-.228.061-.324a1.75 1.75 0 0 0-.62-2.047 2.363 2.363 0 0 0-2.302.157c-.647.28-.875.315-.945.201a2.319 2.319 0 0 0-1.846-.945 1.864 1.864 0 0 0-1.453.744c-.726 1.006-1.163.928-1.662.875a1.461 1.461 0 0 0-1.208.158 1.488 1.488 0 0 0-.63 1.032c.024.935.367 1.834.972 2.546a7.516 7.516 0 0 0-.875 3.5 1.75 1.75 0 0 0 .463 1.27 1.539 1.539 0 0 0 1.12.49h9.975a1.854 1.854 0 0 0 1.61-.753c.779-1.111.14-2.975.07-3.185ZM2.461 5.252a1.4 1.4 0 0 1 .272 0c.875.15 1.846.184 2.966-1.365a.551.551 0 0 1 .429-.2 1.067 1.067 0 0 1 .813.463c.744.919 1.75.464 2.477.166.42-.175.875-.367 1.058-.245.184.123.166.105.044.656a1.497 1.497 0 0 0 .271 1.54c.375.302.84.468 1.322.473.176.014.35.052.516.114a.15.15 0 0 1 0 .148 3.71 3.71 0 0 1-2.004 1.278 4.375 4.375 0 0 0-4.13-2.686 6.352 6.352 0 0 0-1.75.227 4.419 4.419 0 0 0-1.75.875 2.564 2.564 0 0 1-.56-1.321c.009-.07.035-.105.026-.123Zm.342 6.467a.226.226 0 0 1-.167-.079.41.41 0 0 1-.105-.306c.114-2.459.893-3.798 2.538-4.209.465-.121.945-.18 1.426-.175 2.039 0 2.678 1.365 3.421 2.94.216.502.467.987.753 1.452l.122.21c0 .07.07.14.114.21l-8.102-.043Z"></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--taco"><path d="m14.466 9.094-1.216.437c.257.627.282 1.325.07 1.969 0 .053-.131.193-.534.193-.402 0-.534-.272-.875-.875l-.114-.193-.06-.105c-.193-.315-.368-.683-.552-1.059a4.611 4.611 0 0 0 2.625-1.864 1.488 1.488 0 0 0 .053-1.19 1.75 1.75 0 0 0-1.584-.936 2.16 2.16 0 0 1-.543-.096c0-.088.044-.228.061-.324a1.75 1.75 0 0 0-.62-2.047 2.363 2.363 0 0 0-2.302.157c-.647.28-.875.315-.945.201a2.319 2.319 0 0 0-1.846-.945 1.864 1.864 0 0 0-1.453.744c-.726 1.006-1.163.928-1.662.875a1.461 1.461 0 0 0-1.208.158 1.488 1.488 0 0 0-.63 1.032c.024.935.367 1.834.972 2.546a7.516 7.516 0 0 0-.875 3.5 1.75 1.75 0 0 0 .463 1.27 1.539 1.539 0 0 0 1.12.49h9.975a1.854 1.854 0 0 0 1.61-.753c.779-1.111.14-2.975.07-3.185ZM2.461 5.252a1.4 1.4 0 0 1 .272 0c.875.15 1.846.184 2.966-1.365a.551.551 0 0 1 .429-.2 1.067 1.067 0 0 1 .813.463c.744.919 1.75.464 2.477.166.42-.175.875-.367 1.058-.245.184.123.166.105.044.656a1.497 1.497 0 0 0 .271 1.54c.375.302.84.468 1.322.473.176.014.35.052.516.114a.15.15 0 0 1 0 .148 3.71 3.71 0 0 1-2.004 1.278 4.375 4.375 0 0 0-4.13-2.686 6.352 6.352 0 0 0-1.75.227 4.419 4.419 0 0 0-1.75.875 2.564 2.564 0 0 1-.56-1.321c.009-.07.035-.105.026-.123Zm.342 6.467a.226.226 0 0 1-.167-.079.41.41 0 0 1-.105-.306c.114-2.459.893-3.798 2.538-4.209.465-.121.945-.18 1.426-.175 2.039 0 2.678 1.365 3.421 2.94.216.502.467.987.753 1.452l.122.21c0 .07.07.14.114.21l-8.102-.043Z"></path></svg>';
 
 export class IconTaco extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconTaco extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--taco', '', null, 'IconTaco');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--taco', '', null, 'IconTaco');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--taco');
         this.root.append(svg);
     }

package/icons/IconTacoLarge.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--tacoLarge"><path d="m28.163 18.231-1.576.779c.386.779 1.015 2.625.5 3.5-.21.341-.683.516-1.41.516-.962 0-1.452-.761-2.09-1.925l-.263-.463-.123-.193a15.919 15.919 0 0 1-.621-1.146c2.905-1.138 4.305-2.774 3.85-4.568-.35-1.382-1.619-1.662-2.546-1.872a2.625 2.625 0 0 1-1.252-.49c-.087-.105.114-.744.22-1.05.323-1.015.822-2.555-.605-3.736-1.25-1.033-2.817-.49-4.068-.053-1.523.534-1.943.551-2.223.096A3.965 3.965 0 0 0 12.911 5.5a3.194 3.194 0 0 0-2.625 1.103C8.501 8.71 7.521 8.413 6.568 8.125a2.354 2.354 0 0 0-2.065.053C2 9.753 3.75 13.47 4.625 15.038a14.71 14.71 0 0 0-1.636 6.65 3.002 3.002 0 0 0 .761 2.187 2.625 2.625 0 0 0 1.916.875h20.011a3.15 3.15 0 0 0 2.905-1.348c1.155-1.863-.262-4.838-.42-5.17ZM5.413 9.683c.219.005.435.05.638.13 1.199.342 3.054.937 5.574-2.082a1.4 1.4 0 0 1 1.155-.481 2.266 2.266 0 0 1 1.68 1.243c1.085 1.75 2.931 1.12 4.287.647 1.138-.402 1.917-.63 2.372-.254.455.377.402.762.052 1.855-.262.823-.595 1.838.096 2.695.6.599 1.382.98 2.223 1.085.875.193 1.155.306 1.234.595.21.832-.875 1.803-2.914 2.555-1.435-3.132-3.377-6.921-8.724-6.921a12.437 12.437 0 0 0-3.447.438 8.251 8.251 0 0 0-3.868 2.274c-.682-1.417-1.242-3.22-.341-3.78h-.018ZM5.7 23a.876.876 0 0 1-.647-.289 1.26 1.26 0 0 1-.324-.945c.079-1.75.341-4.375 1.68-6.317a6.388 6.388 0 0 1 3.701-2.582c.97-.256 1.971-.38 2.975-.367 4.375 0 5.758 2.984 7.245 6.125l.289.613c.35.765.745 1.51 1.181 2.23l.079.106.175.323c.184.324.394.71.648 1.077L5.7 23Zm2.424-3.5a.875.875 0 1 1-1.75 0 .875.875 0 0 1 1.75 0ZM10.75 16a.874.874 0 1 1-1.748 0 .874.874 0 0 1 1.748 0Zm7.875 3.5a.874.874 0 1 1-1.748 0 .874.874 0 0 1 1.748 0Zm-5.25 0a.874.874 0 1 1-1.748 0 .874.874 0 0 1 1.748 0ZM16 16a.874.874 0 1 1-1.748 0A.874.874 0 0 1 16 16Z"></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--tacoLarge"><path d="m28.163 18.231-1.576.779c.386.779 1.015 2.625.5 3.5-.21.341-.683.516-1.41.516-.962 0-1.452-.761-2.09-1.925l-.263-.463-.123-.193a15.919 15.919 0 0 1-.621-1.146c2.905-1.138 4.305-2.774 3.85-4.568-.35-1.382-1.619-1.662-2.546-1.872a2.625 2.625 0 0 1-1.252-.49c-.087-.105.114-.744.22-1.05.323-1.015.822-2.555-.605-3.736-1.25-1.033-2.817-.49-4.068-.053-1.523.534-1.943.551-2.223.096A3.965 3.965 0 0 0 12.911 5.5a3.194 3.194 0 0 0-2.625 1.103C8.501 8.71 7.521 8.413 6.568 8.125a2.354 2.354 0 0 0-2.065.053C2 9.753 3.75 13.47 4.625 15.038a14.71 14.71 0 0 0-1.636 6.65 3.002 3.002 0 0 0 .761 2.187 2.625 2.625 0 0 0 1.916.875h20.011a3.15 3.15 0 0 0 2.905-1.348c1.155-1.863-.262-4.838-.42-5.17ZM5.413 9.683c.219.005.435.05.638.13 1.199.342 3.054.937 5.574-2.082a1.4 1.4 0 0 1 1.155-.481 2.266 2.266 0 0 1 1.68 1.243c1.085 1.75 2.931 1.12 4.287.647 1.138-.402 1.917-.63 2.372-.254.455.377.402.762.052 1.855-.262.823-.595 1.838.096 2.695.6.599 1.382.98 2.223 1.085.875.193 1.155.306 1.234.595.21.832-.875 1.803-2.914 2.555-1.435-3.132-3.377-6.921-8.724-6.921a12.437 12.437 0 0 0-3.447.438 8.251 8.251 0 0 0-3.868 2.274c-.682-1.417-1.242-3.22-.341-3.78h-.018ZM5.7 23a.876.876 0 0 1-.647-.289 1.26 1.26 0 0 1-.324-.945c.079-1.75.341-4.375 1.68-6.317a6.388 6.388 0 0 1 3.701-2.582c.97-.256 1.971-.38 2.975-.367 4.375 0 5.758 2.984 7.245 6.125l.289.613c.35.765.745 1.51 1.181 2.23l.079.106.175.323c.184.324.394.71.648 1.077L5.7 23Zm2.424-3.5a.875.875 0 1 1-1.75 0 .875.875 0 0 1 1.75 0ZM10.75 16a.874.874 0 1 1-1.748 0 .874.874 0 0 1 1.748 0Zm7.875 3.5a.874.874 0 1 1-1.748 0 .874.874 0 0 1 1.748 0Zm-5.25 0a.874.874 0 1 1-1.748 0 .874.874 0 0 1 1.748 0ZM16 16a.874.874 0 1 1-1.748 0A.874.874 0 0 1 16 16Z"></path></svg>';
 
 export class IconTacoLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconTacoLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--tacoLarge', '', null, 'IconTacoLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--tacoLarge', '', null, 'IconTacoLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--tacoLarge');
         this.root.append(svg);
     }

package/icons/IconTakeawayPay.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--takeawayPay"><path d="M13.25 2.969H2.75c-.84 0-1.531.691-1.531 1.531v7c0 .84.691 1.531 1.531 1.531h10.5c.84 0 1.531-.691 1.531-1.531v-7c0-.84-.691-1.531-1.531-1.531Zm.219 8.531a.217.217 0 0 1-.219.219H2.75a.217.217 0 0 1-.219-.219v-7c0-.122.096-.219.219-.219h10.5c.123 0 .219.097.219.219v7Z"></path><path d="M8.359 6.933h-.84v2.082h.446v-.691h.394c.428 0 .743-.289.743-.7s-.306-.7-.743-.7v.008Zm-.044 1.014h-.359V7.31h.359c.193 0 .333.122.333.315 0 .192-.132.315-.333.315v.008Z"></path><path d="M6.128 7.282s-.01-.017-.01-.026a8.258 8.258 0 0 0-.078-.621c0-.035-.044-.061-.079-.07L5.7 6.539s-.053.026-.053.052v.306s-.35-.393-.525-.498A.2.2 0 0 0 5 6.364c-.044 0-.088.017-.131.035a4.163 4.163 0 0 0-1.4 1.444v.035c0 .043.026.07.07.078L3.79 8s.062.035.062.07c0 .044.052 1.024.113 1.277.009.036.044.062.088.062h1.898s.08-.035.088-.07c.061-.254.105-1.234.114-1.278 0-.035.026-.061.061-.07l.254-.043s.07-.044.07-.08v-.026a3.194 3.194 0 0 0-.394-.568l-.017.008Z"></path><path d="M9.977 7.396c-.315 0-.542.114-.656.254l.254.245c.07-.079.201-.131.368-.131.192 0 .332.087.332.288v.027l-.411.017c-.429.027-.648.193-.648.482 0 .297.245.48.587.48.218 0 .393-.078.48-.21v.167h.395v-.989c0-.358-.246-.63-.71-.63h.01Zm.298 1.033c0 .192-.166.323-.385.323-.14 0-.254-.06-.254-.183 0-.114.105-.175.28-.184l.368-.026v.07h-.009Z"></path><path d="M11.693 8.525 11.28 7.44h-.455l.639 1.593c-.079.175-.14.236-.315.236-.053 0-.105 0-.14-.018v.368c.044.008.123.017.175.017.402 0 .551-.218.717-.621l.64-1.584h-.447l-.411 1.085.009.009Z"></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--takeawayPay"><path d="M13.25 2.969H2.75c-.84 0-1.531.691-1.531 1.531v7c0 .84.691 1.531 1.531 1.531h10.5c.84 0 1.531-.691 1.531-1.531v-7c0-.84-.691-1.531-1.531-1.531Zm.219 8.531a.217.217 0 0 1-.219.219H2.75a.217.217 0 0 1-.219-.219v-7c0-.122.096-.219.219-.219h10.5c.123 0 .219.097.219.219v7Z"></path><path d="M8.359 6.933h-.84v2.082h.446v-.691h.394c.428 0 .743-.289.743-.7s-.306-.7-.743-.7v.008Zm-.044 1.014h-.359V7.31h.359c.193 0 .333.122.333.315 0 .192-.132.315-.333.315v.008Z"></path><path d="M6.128 7.282s-.01-.017-.01-.026a8.258 8.258 0 0 0-.078-.621c0-.035-.044-.061-.079-.07L5.7 6.539s-.053.026-.053.052v.306s-.35-.393-.525-.498A.2.2 0 0 0 5 6.364c-.044 0-.088.017-.131.035a4.163 4.163 0 0 0-1.4 1.444v.035c0 .043.026.07.07.078L3.79 8s.062.035.062.07c0 .044.052 1.024.113 1.277.009.036.044.062.088.062h1.898s.08-.035.088-.07c.061-.254.105-1.234.114-1.278 0-.035.026-.061.061-.07l.254-.043s.07-.044.07-.08v-.026a3.194 3.194 0 0 0-.394-.568l-.017.008Z"></path><path d="M9.977 7.396c-.315 0-.542.114-.656.254l.254.245c.07-.079.201-.131.368-.131.192 0 .332.087.332.288v.027l-.411.017c-.429.027-.648.193-.648.482 0 .297.245.48.587.48.218 0 .393-.078.48-.21v.167h.395v-.989c0-.358-.246-.63-.71-.63h.01Zm.298 1.033c0 .192-.166.323-.385.323-.14 0-.254-.06-.254-.183 0-.114.105-.175.28-.184l.368-.026v.07h-.009Z"></path><path d="M11.693 8.525 11.28 7.44h-.455l.639 1.593c-.079.175-.14.236-.315.236-.053 0-.105 0-.14-.018v.368c.044.008.123.017.175.017.402 0 .551-.218.717-.621l.64-1.584h-.447l-.411 1.085.009.009Z"></path></svg>';
 
 export class IconTakeawayPay extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconTakeawayPay extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--takeawayPay', '', null, 'IconTakeawayPay');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--takeawayPay', '', null, 'IconTakeawayPay');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--takeawayPay');
         this.root.append(svg);
     }