@justeattakeaway/pie-icons-webc 0.2.0 → 0.4.0

package/icons/IconStarCircleFilledLarge.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--starCircleFilledLarge"><path d="m17.829 16.866.656-.639 1.164-1.128-1.602-.236-.91-.132-.41-.822-.718-1.453-.718 1.453-.411.822-.91.132-1.601.236 1.163 1.128.657.64-.158.91-.271 1.6 1.435-.752.814-.429.813.429 1.435.753-.27-1.602-.158-.91Z"></path><path fill-rule="evenodd" d="M16 3.75C9.245 3.75 3.75 9.245 3.75 16S9.245 28.25 16 28.25 28.25 22.755 28.25 16 22.755 3.75 16 3.75Zm2.292 9.38 3.36.49h-.017a.873.873 0 0 1 .49 1.488l-2.433 2.37.578 3.343a.877.877 0 0 1-1.278.919l-3-1.575-3.002 1.575a.871.871 0 0 1-.928-.061.884.884 0 0 1-.35-.858l.578-3.342-2.433-2.371a.873.873 0 0 1 .49-1.488l3.36-.49 1.505-3.045c.15-.297.464-.446.788-.446s.639.149.787.446l1.505 3.045Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--starCircleFilledLarge"><path d="m17.829 16.866.656-.639 1.164-1.128-1.602-.236-.91-.132-.41-.822-.718-1.453-.718 1.453-.411.822-.91.132-1.601.236 1.163 1.128.657.64-.158.91-.271 1.6 1.435-.752.814-.429.813.429 1.435.753-.27-1.602-.158-.91Z"></path><path fill-rule="evenodd" d="M16 3.75C9.245 3.75 3.75 9.245 3.75 16S9.245 28.25 16 28.25 28.25 22.755 28.25 16 22.755 3.75 16 3.75Zm2.292 9.38 3.36.49h-.017a.873.873 0 0 1 .49 1.488l-2.433 2.37.578 3.343a.877.877 0 0 1-1.278.919l-3-1.575-3.002 1.575a.871.871 0 0 1-.928-.061.884.884 0 0 1-.35-.858l.578-3.342-2.433-2.371a.873.873 0 0 1 .49-1.488l3.36-.49 1.505-3.045c.15-.297.464-.446.788-.446s.639.149.787.446l1.505 3.045Z" clip-rule="evenodd"></path></svg>';
 
 export class IconStarCircleFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStarCircleFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--starCircleFilledLarge', '', null, 'IconStarCircleFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--starCircleFilledLarge', '', null, 'IconStarCircleFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--starCircleFilledLarge');
         this.root.append(svg);
     }

package/icons/IconStarCircleLarge.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--starCircleLarge"><path d="M16 3.75C9.245 3.75 3.75 9.245 3.75 16S9.245 28.25 16 28.25 28.25 22.755 28.25 16 22.755 3.75 16 3.75Zm0 22.75c-5.793 0-10.5-4.707-10.5-10.5S10.216 5.5 16 5.5 26.5 10.207 26.5 16 21.793 26.5 16 26.5Z"></path><path d="m21.652 13.62-3.36-.49-1.505-3.045c-.148-.298-.463-.446-.787-.446s-.639.149-.787.446l-1.505 3.045-3.36.49a.873.873 0 0 0-.49 1.488l2.432 2.37-.577 3.343a.884.884 0 0 0 .35.858.871.871 0 0 0 .928.061l3-1.575 3.002 1.575a.87.87 0 0 0 .927-.061.877.877 0 0 0 .35-.858l-.578-3.342 2.433-2.371a.873.873 0 0 0-.49-1.488h.017Zm-3.167 2.607-.656.64.157.91.271 1.6-1.434-.752-.814-.429-.814.429-1.435.753.271-1.602.158-.91-.656-.639-1.164-1.128 1.601-.236.91-.132.411-.822.718-1.453.717 1.453.412.822.91.132 1.6.236-1.163 1.128Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--starCircleLarge"><path d="M16 3.75C9.245 3.75 3.75 9.245 3.75 16S9.245 28.25 16 28.25 28.25 22.755 28.25 16 22.755 3.75 16 3.75Zm0 22.75c-5.793 0-10.5-4.707-10.5-10.5S10.216 5.5 16 5.5 26.5 10.207 26.5 16 21.793 26.5 16 26.5Z"></path><path d="m21.652 13.62-3.36-.49-1.505-3.045c-.148-.298-.463-.446-.787-.446s-.639.149-.787.446l-1.505 3.045-3.36.49a.873.873 0 0 0-.49 1.488l2.432 2.37-.577 3.343a.884.884 0 0 0 .35.858.871.871 0 0 0 .928.061l3-1.575 3.002 1.575a.87.87 0 0 0 .927-.061.877.877 0 0 0 .35-.858l-.578-3.342 2.433-2.371a.873.873 0 0 0-.49-1.488h.017Zm-3.167 2.607-.656.64.157.91.271 1.6-1.434-.752-.814-.429-.814.429-1.435.753.271-1.602.158-.91-.656-.639-1.164-1.128 1.601-.236.91-.132.411-.822.718-1.453.717 1.453.412.822.91.132 1.6.236-1.163 1.128Z"></path></svg>';
 
 export class IconStarCircleLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStarCircleLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--starCircleLarge', '', null, 'IconStarCircleLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--starCircleLarge', '', null, 'IconStarCircleLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--starCircleLarge');
         this.root.append(svg);
     }

package/icons/IconStarFilled.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--starFilled"><path d="m12.288 14.449-4.183-2.197a.219.219 0 0 0-.21 0L3.713 14.45 4.5 9.794a.254.254 0 0 0 0-.193L1.07 6.302l4.673-.682a.228.228 0 0 0 .166-.114L8 1.271l2.091 4.235a.227.227 0 0 0 .167.114l4.672.682-3.386 3.3a.254.254 0 0 0-.061.192l.805 4.655Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--starFilled"><path d="m12.288 14.449-4.183-2.197a.219.219 0 0 0-.21 0L3.713 14.45 4.5 9.794a.254.254 0 0 0 0-.193L1.07 6.302l4.673-.682a.228.228 0 0 0 .166-.114L8 1.271l2.091 4.235a.227.227 0 0 0 .167.114l4.672.682-3.386 3.3a.254.254 0 0 0-.061.192l.805 4.655Z"></path></svg>';
 
 export class IconStarFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStarFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--starFilled', '', null, 'IconStarFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--starFilled', '', null, 'IconStarFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--starFilled');
         this.root.append(svg);
     }

package/icons/IconStarFilledLarge.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--starFilledLarge"><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.874.874 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.126Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--starFilledLarge"><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.874.874 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.126Z"></path></svg>';
 
 export class IconStarFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStarFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--starFilledLarge', '', null, 'IconStarFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--starFilledLarge', '', null, 'IconStarFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--starFilledLarge');
         this.root.append(svg);
     }

package/icons/IconStarHalfFilled.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--starHalfFilled"><path d="m11.544 9.601 3.386-3.299-4.672-.682a.227.227 0 0 1-.167-.114l-2.09-4.235-2.092 4.235a.228.228 0 0 1-.166.114l-4.673.682 3.43 3.3a.254.254 0 0 1 .061.192l-.848 4.655 4.182-2.197a.219.219 0 0 1 .21 0l4.183 2.197-.788-4.655a.251.251 0 0 1 .044-.193Zm-1.356.411.35 2.04-1.83-.963A1.54 1.54 0 0 0 8 10.914V4.229l.875 1.855a1.531 1.531 0 0 0 1.155.875l2.048.297-1.453 1.4a1.54 1.54 0 0 0-.437 1.356Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--starHalfFilled"><path d="m11.544 9.601 3.386-3.299-4.672-.682a.227.227 0 0 1-.167-.114l-2.09-4.235-2.092 4.235a.228.228 0 0 1-.166.114l-4.673.682 3.43 3.3a.254.254 0 0 1 .061.192l-.848 4.655 4.182-2.197a.219.219 0 0 1 .21 0l4.183 2.197-.788-4.655a.251.251 0 0 1 .044-.193Zm-1.356.411.35 2.04-1.83-.963A1.54 1.54 0 0 0 8 10.914V4.229l.875 1.855a1.531 1.531 0 0 0 1.155.875l2.048.297-1.453 1.4a1.54 1.54 0 0 0-.437 1.356Z"></path></svg>';
 
 export class IconStarHalfFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStarHalfFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--starHalfFilled', '', null, 'IconStarHalfFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--starHalfFilled', '', null, 'IconStarHalfFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--starHalfFilled');
         this.root.append(svg);
     }

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, :host-context(pie-button) svg { display:block; 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, :host-context(pie-button) svg { display:block; 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, :host-context(pie-button) svg { display:block; 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, :host-context(pie-button) svg { display:block; 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, :host-context(pie-button) svg { display:block; 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, :host-context(pie-button) svg { display:block; 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, :host-context(pie-button) svg { display:block; 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, :host-context(pie-button) svg { display:block; 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, :host-context(pie-button) svg { display:block; 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, :host-context(pie-button) svg { display:block; 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, :host-context(pie-button) svg { display:block; 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, :host-context(pie-button) svg { display:block; 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, :host-context(pie-button) svg { display:block; 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, :host-context(pie-button) svg { display:block; 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, :host-context(pie-button) svg { display:block; 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);
     }