@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/icons/IconNumeroSymbol.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--numeroSymbol"><path d="M12.183 9.015a2.827 2.827 0 0 1-1.13-.21 2.371 2.371 0 0 1-.813-.56 2.17 2.17 0 0 1-.49-.823 3.001 3.001 0 0 1-.166-1.006 2.923 2.923 0 0 1 .166-1.041c.096-.325.264-.623.49-.875.229-.242.506-.433.814-.56a2.827 2.827 0 0 1 1.129-.21c.39-.009.776.063 1.137.21.305.127.58.318.805.56.218.255.379.553.473.875.114.323.17.664.166 1.006.002.343-.054.683-.166 1.006a2.248 2.248 0 0 1-.473.823c-.225.242-.5.433-.805.56-.358.16-.745.243-1.137.245ZM10.93 6.39a1.83 1.83 0 0 0 .333 1.155 1.198 1.198 0 0 0 1.837 0c.235-.338.35-.745.324-1.155a1.838 1.838 0 0 0-.324-1.164 1.199 1.199 0 0 0-1.837 0 1.838 1.838 0 0 0-.333 1.19V6.39Z"></path><path d="M6.661 2.986v7.464L3.18 2.986H1.236v10.028h1.357V4.806l3.84 8.208h1.585V2.986H6.66Z"></path><path d="M14.361 11.281V9.97H9.986v1.312h4.375Z"></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--numeroSymbol"><path d="M12.183 9.015a2.827 2.827 0 0 1-1.13-.21 2.371 2.371 0 0 1-.813-.56 2.17 2.17 0 0 1-.49-.823 3.001 3.001 0 0 1-.166-1.006 2.923 2.923 0 0 1 .166-1.041c.096-.325.264-.623.49-.875.229-.242.506-.433.814-.56a2.827 2.827 0 0 1 1.129-.21c.39-.009.776.063 1.137.21.305.127.58.318.805.56.218.255.379.553.473.875.114.323.17.664.166 1.006.002.343-.054.683-.166 1.006a2.248 2.248 0 0 1-.473.823c-.225.242-.5.433-.805.56-.358.16-.745.243-1.137.245ZM10.93 6.39a1.83 1.83 0 0 0 .333 1.155 1.198 1.198 0 0 0 1.837 0c.235-.338.35-.745.324-1.155a1.838 1.838 0 0 0-.324-1.164 1.199 1.199 0 0 0-1.837 0 1.838 1.838 0 0 0-.333 1.19V6.39Z"></path><path d="M6.661 2.986v7.464L3.18 2.986H1.236v10.028h1.357V4.806l3.84 8.208h1.585V2.986H6.66Z"></path><path d="M14.361 11.281V9.97H9.986v1.312h4.375Z"></path></svg>';
 
 export class IconNumeroSymbol extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNumeroSymbol extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--numeroSymbol', '', null, 'IconNumeroSymbol');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--numeroSymbol', '', null, 'IconNumeroSymbol');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--numeroSymbol');
         this.root.append(svg);
     }

package/icons/IconNumeroSymbolLarge.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--numeroSymbolLarge"><path d="M26.5 21.25V19.5h-7v1.75h7Z"></path><path d="M23 17.75a5.11 5.11 0 0 1-1.978-.359 4.374 4.374 0 0 1-1.417-.971 4.006 4.006 0 0 1-.875-1.444 5.608 5.608 0 0 1 0-3.5 3.99 3.99 0 0 1 2.275-2.423A4.952 4.952 0 0 1 23 8.703a4.953 4.953 0 0 1 1.977.358 3.78 3.78 0 0 1 1.4.98c.386.418.684.909.875 1.444.189.564.283 1.155.28 1.75 0 .595-.094 1.185-.28 1.75a4.235 4.235 0 0 1-.875 1.444c-.393.418-.87.75-1.4.971a5.108 5.108 0 0 1-1.977.35Zm-2.188-4.533c-.04.72.164 1.432.578 2.022A1.934 1.934 0 0 0 23 16a1.916 1.916 0 0 0 1.592-.744c.414-.59.617-1.302.578-2.021a3.22 3.22 0 0 0-.578-2.03A1.909 1.909 0 0 0 23 10.47a1.925 1.925 0 0 0-1.61.735 3.22 3.22 0 0 0-.56 2.03l-.018-.018Z"></path><path d="M14.092 7.25v13.02L8.002 7.25H4.625v17.5h2.362V10.435l6.694 14.315h2.774V7.25h-2.362Z"></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--numeroSymbolLarge"><path d="M26.5 21.25V19.5h-7v1.75h7Z"></path><path d="M23 17.75a5.11 5.11 0 0 1-1.978-.359 4.374 4.374 0 0 1-1.417-.971 4.006 4.006 0 0 1-.875-1.444 5.608 5.608 0 0 1 0-3.5 3.99 3.99 0 0 1 2.275-2.423A4.952 4.952 0 0 1 23 8.703a4.953 4.953 0 0 1 1.977.358 3.78 3.78 0 0 1 1.4.98c.386.418.684.909.875 1.444.189.564.283 1.155.28 1.75 0 .595-.094 1.185-.28 1.75a4.235 4.235 0 0 1-.875 1.444c-.393.418-.87.75-1.4.971a5.108 5.108 0 0 1-1.977.35Zm-2.188-4.533c-.04.72.164 1.432.578 2.022A1.934 1.934 0 0 0 23 16a1.916 1.916 0 0 0 1.592-.744c.414-.59.617-1.302.578-2.021a3.22 3.22 0 0 0-.578-2.03A1.909 1.909 0 0 0 23 10.47a1.925 1.925 0 0 0-1.61.735 3.22 3.22 0 0 0-.56 2.03l-.018-.018Z"></path><path d="M14.092 7.25v13.02L8.002 7.25H4.625v17.5h2.362V10.435l6.694 14.315h2.774V7.25h-2.362Z"></path></svg>';
 
 export class IconNumeroSymbolLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNumeroSymbolLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--numeroSymbolLarge', '', null, 'IconNumeroSymbolLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--numeroSymbolLarge', '', null, 'IconNumeroSymbolLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--numeroSymbolLarge');
         this.root.append(svg);
     }

package/icons/IconNuts.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--nuts"><g clip-path="url(#prefix__clip0_8387_3604)"><path d="M14.695 9.102a4.806 4.806 0 0 0-.157-.871 5.523 5.523 0 0 0-1.376-2.344L11.62 4.345c.252-.47.2-1.054-.2-1.455a4.464 4.464 0 0 0-6.3 0l-.417.419c-.767-.636-2.013-1.455-3.39-1.403v1.368c.907-.052 1.813.522 2.414 1.02l-.34.339A4.421 4.421 0 0 0 2.08 7.787a4.42 4.42 0 0 0 1.307 3.153c.235.236.54.366.871.366.21 0 .401-.07.584-.165l1.516 1.515a5.415 5.415 0 0 0 2.317 1.368c.279.079.566.14.871.166.131.008.262.017.392.017.697 0 1.438-.165 2.152-.496l1.499-.715.583-1.272c.418-.862.601-1.768.532-2.605l-.009-.017ZM3.387 7.778c0-.845.331-1.63.923-2.23l1.734-1.734a3.169 3.169 0 0 1 2.23-.924c.81 0 1.569.288 2.178.872L4.267 9.947a3.122 3.122 0 0 1-.871-2.178l-.009.009Zm9.592 3.371-.392.854-1.063.505c-.636.288-1.29.41-1.873.358a3.633 3.633 0 0 1-.627-.114 4.11 4.11 0 0 1-1.76-1.036L5.8 10.252l4.931-4.922 1.49 1.49a4.138 4.138 0 0 1 1.045 1.777c.061.2.096.41.114.627.052.601-.088 1.263-.41 1.934l.009-.009Z"></path></g><defs><clipPath id="prefix__clip0_8387_3604"><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--nuts"><g clip-path="url(#prefix__clip0_8387_3604)"><path d="M14.695 9.102a4.806 4.806 0 0 0-.157-.871 5.523 5.523 0 0 0-1.376-2.344L11.62 4.345c.252-.47.2-1.054-.2-1.455a4.464 4.464 0 0 0-6.3 0l-.417.419c-.767-.636-2.013-1.455-3.39-1.403v1.368c.907-.052 1.813.522 2.414 1.02l-.34.339A4.421 4.421 0 0 0 2.08 7.787a4.42 4.42 0 0 0 1.307 3.153c.235.236.54.366.871.366.21 0 .401-.07.584-.165l1.516 1.515a5.415 5.415 0 0 0 2.317 1.368c.279.079.566.14.871.166.131.008.262.017.392.017.697 0 1.438-.165 2.152-.496l1.499-.715.583-1.272c.418-.862.601-1.768.532-2.605l-.009-.017ZM3.387 7.778c0-.845.331-1.63.923-2.23l1.734-1.734a3.169 3.169 0 0 1 2.23-.924c.81 0 1.569.288 2.178.872L4.267 9.947a3.122 3.122 0 0 1-.871-2.178l-.009.009Zm9.592 3.371-.392.854-1.063.505c-.636.288-1.29.41-1.873.358a3.633 3.633 0 0 1-.627-.114 4.11 4.11 0 0 1-1.76-1.036L5.8 10.252l4.931-4.922 1.49 1.49a4.138 4.138 0 0 1 1.045 1.777c.061.2.096.41.114.627.052.601-.088 1.263-.41 1.934l.009-.009Z"></path></g><defs><clipPath id="prefix__clip0_8387_3604"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconNuts extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNuts extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--nuts', '', null, 'IconNuts');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--nuts', '', null, 'IconNuts');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--nuts');
         this.root.append(svg);
     }

package/icons/IconNutsLarge.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--nutsLarge"><path d="M27.168 19.464a8.038 8.038 0 0 0-.28-1.542 9.684 9.684 0 0 0-2.457-4.175l-3.015-3.006c.244-.331.375-.724.375-1.142 0-.523-.2-1.01-.575-1.377-3.077-3.076-8.079-3.076-11.155 0l-.784.785C7.935 7.673 5.582 5.826 2.88 5.86v1.734c2.074-.044 4.026 1.516 5.16 2.64L6.87 11.403a7.83 7.83 0 0 0-2.309 5.577 7.83 7.83 0 0 0 2.31 5.578c.365.366.853.575 1.376.575.419 0 .81-.13 1.142-.375l2.954 2.954a9.78 9.78 0 0 0 4.13 2.44 8.05 8.05 0 0 0 1.543.288c.227.017.462.035.698.035 1.237 0 2.544-.296 3.825-.88l2.658-1.273 1.02-2.24c.75-1.542 1.072-3.145.941-4.627l.009.009ZM8.405 21.329a.195.195 0 0 1-.148.061.195.195 0 0 1-.148-.061 6.11 6.11 0 0 1-1.804-4.349 6.09 6.09 0 0 1 1.804-4.348l2.213-2.214.14-.104s-.009-.018-.018-.018l.854-.854a6.15 6.15 0 0 1 4.349-1.795 6.15 6.15 0 0 1 4.349 1.795.195.195 0 0 1 .06.148.195.195 0 0 1-.06.149l-11.59 11.59Zm16.244 2.022-.767 1.682-2.074.984c-1.229.558-2.492.802-3.625.698a6.287 6.287 0 0 1-1.22-.227 7.834 7.834 0 0 1-3.381-2.004l-2.937-2.937 9.56-9.56 2.989 2.989a7.97 7.97 0 0 1 2.013 3.416c.113.384.183.793.218 1.22.104 1.168-.166 2.458-.785 3.739h.01Z"></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--nutsLarge"><path d="M27.168 19.464a8.038 8.038 0 0 0-.28-1.542 9.684 9.684 0 0 0-2.457-4.175l-3.015-3.006c.244-.331.375-.724.375-1.142 0-.523-.2-1.01-.575-1.377-3.077-3.076-8.079-3.076-11.155 0l-.784.785C7.935 7.673 5.582 5.826 2.88 5.86v1.734c2.074-.044 4.026 1.516 5.16 2.64L6.87 11.403a7.83 7.83 0 0 0-2.309 5.577 7.83 7.83 0 0 0 2.31 5.578c.365.366.853.575 1.376.575.419 0 .81-.13 1.142-.375l2.954 2.954a9.78 9.78 0 0 0 4.13 2.44 8.05 8.05 0 0 0 1.543.288c.227.017.462.035.698.035 1.237 0 2.544-.296 3.825-.88l2.658-1.273 1.02-2.24c.75-1.542 1.072-3.145.941-4.627l.009.009ZM8.405 21.329a.195.195 0 0 1-.148.061.195.195 0 0 1-.148-.061 6.11 6.11 0 0 1-1.804-4.349 6.09 6.09 0 0 1 1.804-4.348l2.213-2.214.14-.104s-.009-.018-.018-.018l.854-.854a6.15 6.15 0 0 1 4.349-1.795 6.15 6.15 0 0 1 4.349 1.795.195.195 0 0 1 .06.148.195.195 0 0 1-.06.149l-11.59 11.59Zm16.244 2.022-.767 1.682-2.074.984c-1.229.558-2.492.802-3.625.698a6.287 6.287 0 0 1-1.22-.227 7.834 7.834 0 0 1-3.381-2.004l-2.937-2.937 9.56-9.56 2.989 2.989a7.97 7.97 0 0 1 2.013 3.416c.113.384.183.793.218 1.22.104 1.168-.166 2.458-.785 3.739h.01Z"></path></svg>';
 
 export class IconNutsLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNutsLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--nutsLarge', '', null, 'IconNutsLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--nutsLarge', '', null, 'IconNutsLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--nutsLarge');
         this.root.append(svg);
     }

package/icons/IconOffer.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--offer"><path d="M7.676 14.939 1.087 8.35l6.38-6.388a1.409 1.409 0 0 1 1.12-.402l5.337.534.533 5.346a1.373 1.373 0 0 1-.393 1.111L7.676 14.94ZM2.942 8.35l4.734 4.734 5.46-5.46-.411-4.332-4.27-.42L2.942 8.35Zm7.683-3.85a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-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 16 16" class="c-pieIcon c-pieIcon--offer"><path d="M7.676 14.939 1.087 8.35l6.38-6.388a1.409 1.409 0 0 1 1.12-.402l5.337.534.533 5.346a1.373 1.373 0 0 1-.393 1.111L7.676 14.94ZM2.942 8.35l4.734 4.734 5.46-5.46-.411-4.332-4.27-.42L2.942 8.35Zm7.683-3.85a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-1.75Z"></path></svg>';
 
 export class IconOffer extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconOffer extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--offer', '', null, 'IconOffer');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--offer', '', null, 'IconOffer');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--offer');
         this.root.append(svg);
     }

package/icons/IconOfferLarge.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--offerLarge"><path d="M22.125 5.211c.113-.169.242-.327.385-.472a3.369 3.369 0 0 1 4.76 0l1.242-1.234a5.136 5.136 0 0 0-7.245 0c-.43.44-.78.953-1.032 1.514l-4.156-.394a2.31 2.31 0 0 0-1.83.656L2.692 16.796l11.944 13.125 12.092-12.127a2.336 2.336 0 0 0 .648-1.873L26.369 5.64l-4.244-.429Zm3.377 11.375L14.696 27.375l-9.625-10.5L15.44 6.515a.586.586 0 0 1 .472-.14l3.877.385a5.25 5.25 0 0 0 .472 2.573A1.75 1.75 0 1 0 23 10.75a1.75 1.75 0 0 0-.516-1.242 3.35 3.35 0 0 1-.972-2.625l3.238.367.875 8.864a.577.577 0 0 1-.14.446l.017.026Z"></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--offerLarge"><path d="M22.125 5.211c.113-.169.242-.327.385-.472a3.369 3.369 0 0 1 4.76 0l1.242-1.234a5.136 5.136 0 0 0-7.245 0c-.43.44-.78.953-1.032 1.514l-4.156-.394a2.31 2.31 0 0 0-1.83.656L2.692 16.796l11.944 13.125 12.092-12.127a2.336 2.336 0 0 0 .648-1.873L26.369 5.64l-4.244-.429Zm3.377 11.375L14.696 27.375l-9.625-10.5L15.44 6.515a.586.586 0 0 1 .472-.14l3.877.385a5.25 5.25 0 0 0 .472 2.573A1.75 1.75 0 1 0 23 10.75a1.75 1.75 0 0 0-.516-1.242 3.35 3.35 0 0 1-.972-2.625l3.238.367.875 8.864a.577.577 0 0 1-.14.446l.017.026Z"></path></svg>';
 
 export class IconOfferLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconOfferLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--offerLarge', '', null, 'IconOfferLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--offerLarge', '', null, 'IconOfferLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--offerLarge');
         this.root.append(svg);
     }

package/icons/IconOfferStar.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--offerStar"><path d="M13.871 6.355a2.456 2.456 0 0 1-.472-.586c-.07-.26-.1-.528-.088-.796a2.467 2.467 0 0 0-.516-1.75 2.467 2.467 0 0 0-1.75-.517 2.626 2.626 0 0 1-.796-.087 2.283 2.283 0 0 1-.578-.473A2.45 2.45 0 0 0 8 1.22a2.45 2.45 0 0 0-1.654.875c-.165.188-.36.347-.577.472-.26.07-.528.1-.796.088a2.415 2.415 0 0 0-1.75.516 2.467 2.467 0 0 0-.517 1.75c.012.268-.018.537-.087.796a2.459 2.459 0 0 1-.473.587A2.415 2.415 0 0 0 1.22 8a2.415 2.415 0 0 0 .875 1.645c.186.17.346.368.472.586.07.26.1.528.088.796a2.467 2.467 0 0 0 .516 1.75c.496.39 1.122.575 1.75.517.268-.012.537.018.796.087.217.125.412.285.578.473a2.45 2.45 0 0 0 1.654.875 2.45 2.45 0 0 0 1.653-.875c.166-.188.36-.348.578-.473.26-.07.528-.099.796-.087a2.415 2.415 0 0 0 1.75-.517c.39-.495.574-1.122.516-1.75a2.621 2.621 0 0 1 .088-.796c.126-.218.286-.416.472-.586A2.415 2.415 0 0 0 14.676 8a2.415 2.415 0 0 0-.805-1.645Zm-.936 2.38a3.37 3.37 0 0 0-.753 1.015A3.503 3.503 0 0 0 12 11.019a1.89 1.89 0 0 1-.132.875 1.89 1.89 0 0 1-.875.131c-.43-.017-.86.045-1.268.184a3.367 3.367 0 0 0-.998.752c-.245.236-.551.534-.735.534-.183 0-.49-.297-.735-.534a3.368 3.368 0 0 0-1.006-.779A3.503 3.503 0 0 0 4.981 12a1.89 1.89 0 0 1-.875-.132 1.89 1.89 0 0 1-.131-.875 3.5 3.5 0 0 0-.158-1.242 3.369 3.369 0 0 0-.752-.998c-.236-.245-.534-.55-.534-.735 0-.183.298-.49.534-.734.314-.294.57-.644.752-1.033a3.5 3.5 0 0 0 .184-1.269 1.89 1.89 0 0 1 .131-.875 1.89 1.89 0 0 1 .876-.131 3.5 3.5 0 0 0 1.242-.158c.377-.186.715-.441.997-.752.245-.236.552-.534.736-.534.183 0 .49.298.734.534.294.314.644.57 1.033.752a3.5 3.5 0 0 0 1.269.184 1.89 1.89 0 0 1 .875.131c.112.278.157.578.131.876a3.5 3.5 0 0 0 .157 1.242c.187.377.442.715.753.997.236.245.534.552.534.736 0 .183-.298.507-.534.752ZM10.73 8A4.821 4.821 0 0 0 8 10.73 4.821 4.821 0 0 0 5.27 8 4.821 4.821 0 0 0 8 5.27 4.821 4.821 0 0 0 10.73 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--offerStar"><path d="M13.871 6.355a2.456 2.456 0 0 1-.472-.586c-.07-.26-.1-.528-.088-.796a2.467 2.467 0 0 0-.516-1.75 2.467 2.467 0 0 0-1.75-.517 2.626 2.626 0 0 1-.796-.087 2.283 2.283 0 0 1-.578-.473A2.45 2.45 0 0 0 8 1.22a2.45 2.45 0 0 0-1.654.875c-.165.188-.36.347-.577.472-.26.07-.528.1-.796.088a2.415 2.415 0 0 0-1.75.516 2.467 2.467 0 0 0-.517 1.75c.012.268-.018.537-.087.796a2.459 2.459 0 0 1-.473.587A2.415 2.415 0 0 0 1.22 8a2.415 2.415 0 0 0 .875 1.645c.186.17.346.368.472.586.07.26.1.528.088.796a2.467 2.467 0 0 0 .516 1.75c.496.39 1.122.575 1.75.517.268-.012.537.018.796.087.217.125.412.285.578.473a2.45 2.45 0 0 0 1.654.875 2.45 2.45 0 0 0 1.653-.875c.166-.188.36-.348.578-.473.26-.07.528-.099.796-.087a2.415 2.415 0 0 0 1.75-.517c.39-.495.574-1.122.516-1.75a2.621 2.621 0 0 1 .088-.796c.126-.218.286-.416.472-.586A2.415 2.415 0 0 0 14.676 8a2.415 2.415 0 0 0-.805-1.645Zm-.936 2.38a3.37 3.37 0 0 0-.753 1.015A3.503 3.503 0 0 0 12 11.019a1.89 1.89 0 0 1-.132.875 1.89 1.89 0 0 1-.875.131c-.43-.017-.86.045-1.268.184a3.367 3.367 0 0 0-.998.752c-.245.236-.551.534-.735.534-.183 0-.49-.297-.735-.534a3.368 3.368 0 0 0-1.006-.779A3.503 3.503 0 0 0 4.981 12a1.89 1.89 0 0 1-.875-.132 1.89 1.89 0 0 1-.131-.875 3.5 3.5 0 0 0-.158-1.242 3.369 3.369 0 0 0-.752-.998c-.236-.245-.534-.55-.534-.735 0-.183.298-.49.534-.734.314-.294.57-.644.752-1.033a3.5 3.5 0 0 0 .184-1.269 1.89 1.89 0 0 1 .131-.875 1.89 1.89 0 0 1 .876-.131 3.5 3.5 0 0 0 1.242-.158c.377-.186.715-.441.997-.752.245-.236.552-.534.736-.534.183 0 .49.298.734.534.294.314.644.57 1.033.752a3.5 3.5 0 0 0 1.269.184 1.89 1.89 0 0 1 .875.131c.112.278.157.578.131.876a3.5 3.5 0 0 0 .157 1.242c.187.377.442.715.753.997.236.245.534.552.534.736 0 .183-.298.507-.534.752ZM10.73 8A4.821 4.821 0 0 0 8 10.73 4.821 4.821 0 0 0 5.27 8 4.821 4.821 0 0 0 8 5.27 4.821 4.821 0 0 0 10.73 8Z"></path></svg>';
 
 export class IconOfferStar extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconOfferStar extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--offerStar', '', null, 'IconOfferStar');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--offerStar', '', null, 'IconOfferStar');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--offerStar');
         this.root.append(svg);
     }

package/icons/IconOfferStarFilled.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--offerStarFilled"><g clip-path="url(#prefix__clip0_7019_3733)"><path fill-rule="evenodd" d="M13.871 6.355a2.456 2.456 0 0 1-.472-.586c-.07-.26-.1-.528-.088-.796a2.467 2.467 0 0 0-.516-1.75 2.467 2.467 0 0 0-1.75-.517 2.626 2.626 0 0 1-.796-.087 2.283 2.283 0 0 1-.578-.473A2.45 2.45 0 0 0 8 1.22a2.45 2.45 0 0 0-1.654.875c-.165.188-.36.347-.577.472-.26.07-.528.1-.796.088a2.415 2.415 0 0 0-1.75.516 2.467 2.467 0 0 0-.517 1.75c.012.268-.018.537-.087.796a2.459 2.459 0 0 1-.473.587A2.415 2.415 0 0 0 1.22 8a2.415 2.415 0 0 0 .875 1.645c.186.17.346.368.472.586.07.26.1.528.088.796a2.467 2.467 0 0 0 .516 1.75c.496.39 1.122.575 1.75.517.268-.012.537.018.796.087.217.125.412.285.578.473a2.45 2.45 0 0 0 1.654.875 2.45 2.45 0 0 0 1.653-.875c.166-.188.36-.348.578-.473.26-.07.528-.099.796-.087a2.415 2.415 0 0 0 1.75-.517c.39-.495.574-1.122.516-1.75a2.621 2.621 0 0 1 .088-.796c.126-.218.286-.416.472-.586A2.415 2.415 0 0 0 14.676 8a2.415 2.415 0 0 0-.805-1.645ZM10.73 8A4.821 4.821 0 0 0 8 10.73 4.821 4.821 0 0 0 5.27 8 4.821 4.821 0 0 0 8 5.27 4.821 4.821 0 0 0 10.73 8Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_7019_3733"><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--offerStarFilled"><g clip-path="url(#prefix__clip0_7019_3733)"><path fill-rule="evenodd" d="M13.871 6.355a2.456 2.456 0 0 1-.472-.586c-.07-.26-.1-.528-.088-.796a2.467 2.467 0 0 0-.516-1.75 2.467 2.467 0 0 0-1.75-.517 2.626 2.626 0 0 1-.796-.087 2.283 2.283 0 0 1-.578-.473A2.45 2.45 0 0 0 8 1.22a2.45 2.45 0 0 0-1.654.875c-.165.188-.36.347-.577.472-.26.07-.528.1-.796.088a2.415 2.415 0 0 0-1.75.516 2.467 2.467 0 0 0-.517 1.75c.012.268-.018.537-.087.796a2.459 2.459 0 0 1-.473.587A2.415 2.415 0 0 0 1.22 8a2.415 2.415 0 0 0 .875 1.645c.186.17.346.368.472.586.07.26.1.528.088.796a2.467 2.467 0 0 0 .516 1.75c.496.39 1.122.575 1.75.517.268-.012.537.018.796.087.217.125.412.285.578.473a2.45 2.45 0 0 0 1.654.875 2.45 2.45 0 0 0 1.653-.875c.166-.188.36-.348.578-.473.26-.07.528-.099.796-.087a2.415 2.415 0 0 0 1.75-.517c.39-.495.574-1.122.516-1.75a2.621 2.621 0 0 1 .088-.796c.126-.218.286-.416.472-.586A2.415 2.415 0 0 0 14.676 8a2.415 2.415 0 0 0-.805-1.645ZM10.73 8A4.821 4.821 0 0 0 8 10.73 4.821 4.821 0 0 0 5.27 8 4.821 4.821 0 0 0 8 5.27 4.821 4.821 0 0 0 10.73 8Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_7019_3733"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconOfferStarFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconOfferStarFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--offerStarFilled', '', null, 'IconOfferStarFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--offerStarFilled', '', null, 'IconOfferStarFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--offerStarFilled');
         this.root.append(svg);
     }

package/icons/IconOfferStarFilledLarge.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--offerStarFilledLarge"><g clip-path="url(#prefix__clip0_7019_3730)"><path d="M12.693 16A10.298 10.298 0 0 1 16 19.308 10.298 10.298 0 0 1 19.308 16 10.298 10.298 0 0 1 16 12.693 10.298 10.298 0 0 1 12.693 16Z"></path><path fill-rule="evenodd" d="M27.436 13.008a5.102 5.102 0 0 1-1.05-1.313 5.433 5.433 0 0 1-.201-1.75c0-1.111-.052-2.371-.875-3.229-.822-.857-2.117-.875-3.229-.875a5.434 5.434 0 0 1-1.75-.201 5.1 5.1 0 0 1-1.312-1.05c-.84-.84-1.768-1.715-3.019-1.715-1.251 0-2.179.875-2.992 1.689-.377.42-.82.775-1.313 1.05-.569.162-1.16.23-1.75.201-1.111 0-2.371.052-3.229.875-.857.822-.875 2.117-.875 3.229.029.59-.04 1.181-.201 1.75a5.1 5.1 0 0 1-1.05 1.312c-.84.84-1.715 1.768-1.715 3.019 0 1.251.875 2.179 1.689 2.992.42.377.775.82 1.05 1.313.162.569.23 1.16.201 1.75 0 1.111.052 2.371.875 3.229.822.857 2.117.875 3.229.875.59-.029 1.181.04 1.75.201.492.275.936.63 1.312 1.05.814.788 1.75 1.689 2.993 1.689 1.242 0 2.178-.875 2.992-1.689.377-.42.82-.775 1.313-1.05a5.433 5.433 0 0 1 1.75-.201c1.111 0 2.371-.053 3.229-.875.857-.823.875-2.118.875-3.229-.029-.59.039-1.181.2-1.75.276-.492.63-.936 1.05-1.313.867-.813 1.742-1.74 1.742-2.992 0-1.251-.875-2.179-1.689-2.992Zm-8.734.29a8.487 8.487 0 0 0 2.872 1.888.875.875 0 0 1 0 1.628 8.489 8.489 0 0 0-4.76 4.76.874.874 0 0 1-1.628 0 8.487 8.487 0 0 0-4.76-4.76.874.874 0 0 1 0-1.628 8.487 8.487 0 0 0 4.76-4.76.875.875 0 0 1 1.628 0 8.488 8.488 0 0 0 1.888 2.872Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_7019_3730"><rect width="28" height="28" transform="translate(2 2)"></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 32 32" class="c-pieIcon c-pieIcon--offerStarFilledLarge"><g clip-path="url(#prefix__clip0_7019_3730)"><path d="M12.693 16A10.298 10.298 0 0 1 16 19.308 10.298 10.298 0 0 1 19.308 16 10.298 10.298 0 0 1 16 12.693 10.298 10.298 0 0 1 12.693 16Z"></path><path fill-rule="evenodd" d="M27.436 13.008a5.102 5.102 0 0 1-1.05-1.313 5.433 5.433 0 0 1-.201-1.75c0-1.111-.052-2.371-.875-3.229-.822-.857-2.117-.875-3.229-.875a5.434 5.434 0 0 1-1.75-.201 5.1 5.1 0 0 1-1.312-1.05c-.84-.84-1.768-1.715-3.019-1.715-1.251 0-2.179.875-2.992 1.689-.377.42-.82.775-1.313 1.05-.569.162-1.16.23-1.75.201-1.111 0-2.371.052-3.229.875-.857.822-.875 2.117-.875 3.229.029.59-.04 1.181-.201 1.75a5.1 5.1 0 0 1-1.05 1.312c-.84.84-1.715 1.768-1.715 3.019 0 1.251.875 2.179 1.689 2.992.42.377.775.82 1.05 1.313.162.569.23 1.16.201 1.75 0 1.111.052 2.371.875 3.229.822.857 2.117.875 3.229.875.59-.029 1.181.04 1.75.201.492.275.936.63 1.312 1.05.814.788 1.75 1.689 2.993 1.689 1.242 0 2.178-.875 2.992-1.689.377-.42.82-.775 1.313-1.05a5.433 5.433 0 0 1 1.75-.201c1.111 0 2.371-.053 3.229-.875.857-.823.875-2.118.875-3.229-.029-.59.039-1.181.2-1.75.276-.492.63-.936 1.05-1.313.867-.813 1.742-1.74 1.742-2.992 0-1.251-.875-2.179-1.689-2.992Zm-8.734.29a8.487 8.487 0 0 0 2.872 1.888.875.875 0 0 1 0 1.628 8.489 8.489 0 0 0-4.76 4.76.874.874 0 0 1-1.628 0 8.487 8.487 0 0 0-4.76-4.76.874.874 0 0 1 0-1.628 8.487 8.487 0 0 0 4.76-4.76.875.875 0 0 1 1.628 0 8.488 8.488 0 0 0 1.888 2.872Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_7019_3730"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
 
 export class IconOfferStarFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconOfferStarFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--offerStarFilledLarge', '', null, 'IconOfferStarFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--offerStarFilledLarge', '', null, 'IconOfferStarFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--offerStarFilledLarge');
         this.root.append(svg);
     }

package/icons/IconOfferStarLarge.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--offerStarLarge"><path d="M21.574 15.186a8.487 8.487 0 0 1-4.76-4.76.875.875 0 0 0-1.628 0 8.487 8.487 0 0 1-4.76 4.76.875.875 0 0 0 0 1.628 8.487 8.487 0 0 1 4.76 4.76.875.875 0 0 0 1.628 0 8.487 8.487 0 0 1 4.76-4.76.875.875 0 0 0 0-1.628ZM16 19.308A10.298 10.298 0 0 0 12.693 16 10.298 10.298 0 0 0 16 12.693 10.298 10.298 0 0 0 19.308 16 10.298 10.298 0 0 0 16 19.308Zm11.436-6.3a5.102 5.102 0 0 1-1.05-1.313 5.433 5.433 0 0 1-.201-1.75c0-1.111-.052-2.371-.875-3.229-.822-.857-2.117-.875-3.229-.875a5.434 5.434 0 0 1-1.75-.201 5.1 5.1 0 0 1-1.312-1.05c-.84-.84-1.768-1.715-3.019-1.715-1.251 0-2.179.875-2.992 1.689-.377.42-.82.775-1.313 1.05-.569.162-1.16.23-1.75.201-1.111 0-2.371.052-3.229.875-.857.822-.875 2.117-.875 3.229.029.59-.04 1.181-.201 1.75a5.1 5.1 0 0 1-1.05 1.312c-.84.84-1.715 1.768-1.715 3.019 0 1.251.875 2.179 1.689 2.992.42.377.775.82 1.05 1.313.162.569.23 1.16.201 1.75 0 1.111.052 2.371.875 3.229.822.857 2.117.875 3.229.875.59-.029 1.181.04 1.75.201.492.275.936.63 1.312 1.05.814.788 1.75 1.689 2.993 1.689 1.242 0 2.178-.875 2.992-1.689.377-.42.82-.775 1.313-1.05a5.433 5.433 0 0 1 1.75-.201c1.111 0 2.371-.053 3.229-.875.857-.823.875-2.118.875-3.229-.029-.59.039-1.181.2-1.75.276-.492.63-.936 1.05-1.313.867-.813 1.742-1.74 1.742-2.992 0-1.251-.875-2.179-1.689-2.992Zm-1.26 4.742a6.52 6.52 0 0 0-1.426 1.881 6.78 6.78 0 0 0-.332 2.389c0 .823 0 1.671-.394 2.021-.394.35-1.208.377-2.03.394a6.563 6.563 0 0 0-2.38.332 6.52 6.52 0 0 0-1.864 1.41c-.604.594-1.234 1.198-1.75 1.198s-1.172-.604-1.75-1.199a6.521 6.521 0 0 0-1.881-1.426 6.563 6.563 0 0 0-2.38-.332c-.875 0-1.68 0-2.03-.394-.35-.394-.377-1.199-.394-2.021a6.781 6.781 0 0 0-.315-2.372 6.52 6.52 0 0 0-1.426-1.881c-.595-.578-1.199-1.207-1.199-1.75 0-.543.604-1.172 1.199-1.75a6.52 6.52 0 0 0 1.426-1.881c.253-.77.365-1.58.332-2.389 0-.822 0-1.671.394-2.021.394-.35 1.208-.377 2.03-.394.8.04 1.601-.067 2.363-.315a6.52 6.52 0 0 0 1.881-1.426c.578-.595 1.207-1.199 1.75-1.199.543 0 1.172.604 1.75 1.199a6.52 6.52 0 0 0 1.881 1.426c.766.256 1.573.37 2.38.332.832 0 1.68 0 2.03.394.35.394.377 1.199.394 2.022-.036.802.07 1.605.315 2.37.357.71.84 1.347 1.426 1.882.595.604 1.199 1.234 1.199 1.75s-.604 1.172-1.199 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--offerStarLarge"><path d="M21.574 15.186a8.487 8.487 0 0 1-4.76-4.76.875.875 0 0 0-1.628 0 8.487 8.487 0 0 1-4.76 4.76.875.875 0 0 0 0 1.628 8.487 8.487 0 0 1 4.76 4.76.875.875 0 0 0 1.628 0 8.487 8.487 0 0 1 4.76-4.76.875.875 0 0 0 0-1.628ZM16 19.308A10.298 10.298 0 0 0 12.693 16 10.298 10.298 0 0 0 16 12.693 10.298 10.298 0 0 0 19.308 16 10.298 10.298 0 0 0 16 19.308Zm11.436-6.3a5.102 5.102 0 0 1-1.05-1.313 5.433 5.433 0 0 1-.201-1.75c0-1.111-.052-2.371-.875-3.229-.822-.857-2.117-.875-3.229-.875a5.434 5.434 0 0 1-1.75-.201 5.1 5.1 0 0 1-1.312-1.05c-.84-.84-1.768-1.715-3.019-1.715-1.251 0-2.179.875-2.992 1.689-.377.42-.82.775-1.313 1.05-.569.162-1.16.23-1.75.201-1.111 0-2.371.052-3.229.875-.857.822-.875 2.117-.875 3.229.029.59-.04 1.181-.201 1.75a5.1 5.1 0 0 1-1.05 1.312c-.84.84-1.715 1.768-1.715 3.019 0 1.251.875 2.179 1.689 2.992.42.377.775.82 1.05 1.313.162.569.23 1.16.201 1.75 0 1.111.052 2.371.875 3.229.822.857 2.117.875 3.229.875.59-.029 1.181.04 1.75.201.492.275.936.63 1.312 1.05.814.788 1.75 1.689 2.993 1.689 1.242 0 2.178-.875 2.992-1.689.377-.42.82-.775 1.313-1.05a5.433 5.433 0 0 1 1.75-.201c1.111 0 2.371-.053 3.229-.875.857-.823.875-2.118.875-3.229-.029-.59.039-1.181.2-1.75.276-.492.63-.936 1.05-1.313.867-.813 1.742-1.74 1.742-2.992 0-1.251-.875-2.179-1.689-2.992Zm-1.26 4.742a6.52 6.52 0 0 0-1.426 1.881 6.78 6.78 0 0 0-.332 2.389c0 .823 0 1.671-.394 2.021-.394.35-1.208.377-2.03.394a6.563 6.563 0 0 0-2.38.332 6.52 6.52 0 0 0-1.864 1.41c-.604.594-1.234 1.198-1.75 1.198s-1.172-.604-1.75-1.199a6.521 6.521 0 0 0-1.881-1.426 6.563 6.563 0 0 0-2.38-.332c-.875 0-1.68 0-2.03-.394-.35-.394-.377-1.199-.394-2.021a6.781 6.781 0 0 0-.315-2.372 6.52 6.52 0 0 0-1.426-1.881c-.595-.578-1.199-1.207-1.199-1.75 0-.543.604-1.172 1.199-1.75a6.52 6.52 0 0 0 1.426-1.881c.253-.77.365-1.58.332-2.389 0-.822 0-1.671.394-2.021.394-.35 1.208-.377 2.03-.394.8.04 1.601-.067 2.363-.315a6.52 6.52 0 0 0 1.881-1.426c.578-.595 1.207-1.199 1.75-1.199.543 0 1.172.604 1.75 1.199a6.52 6.52 0 0 0 1.881 1.426c.766.256 1.573.37 2.38.332.832 0 1.68 0 2.03.394.35.394.377 1.199.394 2.022-.036.802.07 1.605.315 2.37.357.71.84 1.347 1.426 1.882.595.604 1.199 1.234 1.199 1.75s-.604 1.172-1.199 1.75Z"></path></svg>';
 
 export class IconOfferStarLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconOfferStarLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--offerStarLarge', '', null, 'IconOfferStarLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--offerStarLarge', '', null, 'IconOfferStarLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--offerStarLarge');
         this.root.append(svg);
     }

package/icons/IconOffice.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--office"><path d="M12.375 2.094h-8.75a1.54 1.54 0 0 0-1.531 1.531v10.281h11.812V3.625a1.54 1.54 0 0 0-1.531-1.531Zm.219 10.5H8.656v-1.969H7.344v1.969H3.406V3.625a.219.219 0 0 1 .219-.219h8.75a.219.219 0 0 1 .219.219v8.969Zm-3.719-7h1.75v1.312h-1.75V5.594Zm-3.5 0h1.75v1.312h-1.75V5.594Zm3.5 2.625h1.75V9.53h-1.75V8.22Zm-3.5 0h1.75V9.53h-1.75V8.22Z"></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--office"><path d="M12.375 2.094h-8.75a1.54 1.54 0 0 0-1.531 1.531v10.281h11.812V3.625a1.54 1.54 0 0 0-1.531-1.531Zm.219 10.5H8.656v-1.969H7.344v1.969H3.406V3.625a.219.219 0 0 1 .219-.219h8.75a.219.219 0 0 1 .219.219v8.969Zm-3.719-7h1.75v1.312h-1.75V5.594Zm-3.5 0h1.75v1.312h-1.75V5.594Zm3.5 2.625h1.75V9.53h-1.75V8.22Zm-3.5 0h1.75V9.53h-1.75V8.22Z"></path></svg>';
 
 export class IconOffice extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconOffice extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--office', '', null, 'IconOffice');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--office', '', null, 'IconOffice');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--office');
         this.root.append(svg);
     }

package/icons/IconOfficeLarge.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--officeLarge"><path d="M24.75 4.625H7.25A2.625 2.625 0 0 0 4.625 7.25v20.125h22.75V7.25a2.625 2.625 0 0 0-2.625-2.625Zm-10.5 21v-3.5h3.5v3.5h-3.5Zm11.375 0H19.5v-3.5h1.75v-1.75h-10.5v1.75h1.75v3.5H6.375V7.25a.875.875 0 0 1 .875-.875h17.5a.875.875 0 0 1 .875.875v18.375ZM17.75 9.875h3.5v1.75h-3.5v-1.75Zm-7 0h3.5v1.75h-3.5v-1.75Zm7 5.25h3.5v1.75h-3.5v-1.75Zm-7 0h3.5v1.75h-3.5v-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--officeLarge"><path d="M24.75 4.625H7.25A2.625 2.625 0 0 0 4.625 7.25v20.125h22.75V7.25a2.625 2.625 0 0 0-2.625-2.625Zm-10.5 21v-3.5h3.5v3.5h-3.5Zm11.375 0H19.5v-3.5h1.75v-1.75h-10.5v1.75h1.75v3.5H6.375V7.25a.875.875 0 0 1 .875-.875h17.5a.875.875 0 0 1 .875.875v18.375ZM17.75 9.875h3.5v1.75h-3.5v-1.75Zm-7 0h3.5v1.75h-3.5v-1.75Zm7 5.25h3.5v1.75h-3.5v-1.75Zm-7 0h3.5v1.75h-3.5v-1.75Z"></path></svg>';
 
 export class IconOfficeLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconOfficeLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--officeLarge', '', null, 'IconOfficeLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--officeLarge', '', null, 'IconOfficeLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--officeLarge');
         this.root.append(svg);
     }

package/icons/IconOrder.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--order"><path d="M12.375 2.094h-8.75a1.54 1.54 0 0 0-1.531 1.531v10.64l3.193-1.444a.202.202 0 0 1 .176 0L8 13.967l2.537-1.146a.202.202 0 0 1 .175 0l3.194 1.444V3.625a1.54 1.54 0 0 0-1.531-1.531Zm.219 10.141-1.339-.604a1.506 1.506 0 0 0-1.26 0L8 12.533l-1.995-.875a1.488 1.488 0 0 0-1.26 0l-1.339.603V3.625a.219.219 0 0 1 .219-.219h8.75a.219.219 0 0 1 .219.219v8.61ZM5.375 5.594h5.25v1.312h-5.25V5.594Zm.875 2.625h3.5V9.53h-3.5V8.22Z"></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--order"><path d="M12.375 2.094h-8.75a1.54 1.54 0 0 0-1.531 1.531v10.64l3.193-1.444a.202.202 0 0 1 .176 0L8 13.967l2.537-1.146a.202.202 0 0 1 .175 0l3.194 1.444V3.625a1.54 1.54 0 0 0-1.531-1.531Zm.219 10.141-1.339-.604a1.506 1.506 0 0 0-1.26 0L8 12.533l-1.995-.875a1.488 1.488 0 0 0-1.26 0l-1.339.603V3.625a.219.219 0 0 1 .219-.219h8.75a.219.219 0 0 1 .219.219v8.61ZM5.375 5.594h5.25v1.312h-5.25V5.594Zm.875 2.625h3.5V9.53h-3.5V8.22Z"></path></svg>';
 
 export class IconOrder extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconOrder extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--order', '', null, 'IconOrder');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--order', '', null, 'IconOrder');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--order');
         this.root.append(svg);
     }

package/icons/IconOrderFilled.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--orderFilled"><path d="M12.375 2.094h-8.75a1.54 1.54 0 0 0-1.531 1.531v10.64l3.193-1.444a.202.202 0 0 1 .176 0L8 13.967l2.537-1.146a.202.202 0 0 1 .175 0l3.194 1.444V3.625a1.54 1.54 0 0 0-1.531-1.531Zm-1.75 4.812h-5.25V5.594h5.25v1.312ZM9.75 9.531h-3.5V8.22h3.5V9.53Z"></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--orderFilled"><path d="M12.375 2.094h-8.75a1.54 1.54 0 0 0-1.531 1.531v10.64l3.193-1.444a.202.202 0 0 1 .176 0L8 13.967l2.537-1.146a.202.202 0 0 1 .175 0l3.194 1.444V3.625a1.54 1.54 0 0 0-1.531-1.531Zm-1.75 4.812h-5.25V5.594h5.25v1.312ZM9.75 9.531h-3.5V8.22h3.5V9.53Z"></path></svg>';
 
 export class IconOrderFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconOrderFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--orderFilled', '', null, 'IconOrderFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--orderFilled', '', null, 'IconOrderFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--orderFilled');
         this.root.append(svg);
     }

package/icons/IconOrderFilledLarge.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--orderFilledLarge"><path d="M23.875 3.75H8.125A2.625 2.625 0 0 0 5.5 6.375v21.927l3.561-1.898L12.5 28.38l3.5-1.968 3.5 1.968 3.43-1.977 3.57 1.898V6.375a2.625 2.625 0 0 0-2.625-2.625ZM19.5 21.25h-7V19.5h7v1.75Zm1.75-3.5h-10.5V16h10.5v1.75Zm-8.75-6.816 1.242-1.243 1.567 1.575 3.754-3.762 1.312 1.242-4.996 4.988-2.879-2.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 32 32" class="c-pieIcon c-pieIcon--orderFilledLarge"><path d="M23.875 3.75H8.125A2.625 2.625 0 0 0 5.5 6.375v21.927l3.561-1.898L12.5 28.38l3.5-1.968 3.5 1.968 3.43-1.977 3.57 1.898V6.375a2.625 2.625 0 0 0-2.625-2.625ZM19.5 21.25h-7V19.5h7v1.75Zm1.75-3.5h-10.5V16h10.5v1.75Zm-8.75-6.816 1.242-1.243 1.567 1.575 3.754-3.762 1.312 1.242-4.996 4.988-2.879-2.8Z"></path></svg>';
 
 export class IconOrderFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconOrderFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--orderFilledLarge', '', null, 'IconOrderFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--orderFilledLarge', '', null, 'IconOrderFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--orderFilledLarge');
         this.root.append(svg);
     }

package/icons/IconOrderLarge.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--orderLarge"><path d="M23.875 3.75H8.125A2.625 2.625 0 0 0 5.5 6.375v21.927l3.561-1.898L12.5 28.38l3.5-1.968 3.5 1.968 3.43-1.977 3.57 1.898V6.375a2.625 2.625 0 0 0-2.625-2.625Zm.875 21.639-.989-.525a1.751 1.751 0 0 0-1.688 0l-2.625 1.479-2.625-1.488a1.75 1.75 0 0 0-1.75 0l-2.626 1.488-2.52-1.453a1.75 1.75 0 0 0-1.688 0l-.989.499V6.375a.875.875 0 0 1 .875-.875h15.75a.875.875 0 0 1 .875.875v19.014ZM10.75 16h10.5v1.75h-10.5V16Zm1.75 3.5h7v1.75h-7V19.5Zm2.844-5.766-2.844-2.8 1.242-1.243 1.567 1.575 3.754-3.762 1.312 1.242-5.031 4.988Z"></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--orderLarge"><path d="M23.875 3.75H8.125A2.625 2.625 0 0 0 5.5 6.375v21.927l3.561-1.898L12.5 28.38l3.5-1.968 3.5 1.968 3.43-1.977 3.57 1.898V6.375a2.625 2.625 0 0 0-2.625-2.625Zm.875 21.639-.989-.525a1.751 1.751 0 0 0-1.688 0l-2.625 1.479-2.625-1.488a1.75 1.75 0 0 0-1.75 0l-2.626 1.488-2.52-1.453a1.75 1.75 0 0 0-1.688 0l-.989.499V6.375a.875.875 0 0 1 .875-.875h15.75a.875.875 0 0 1 .875.875v19.014ZM10.75 16h10.5v1.75h-10.5V16Zm1.75 3.5h7v1.75h-7V19.5Zm2.844-5.766-2.844-2.8 1.242-1.243 1.567 1.575 3.754-3.762 1.312 1.242-5.031 4.988Z"></path></svg>';
 
 export class IconOrderLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconOrderLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--orderLarge', '', null, 'IconOrderLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--orderLarge', '', null, 'IconOrderLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--orderLarge');
         this.root.append(svg);
     }

package/icons/IconOver16Filled.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--over16Filled"><path d="M7.29 7.987c.087-.03.18-.04.273-.03a.652.652 0 0 1 .717.677.665.665 0 0 1-.717.679.665.665 0 0 1-.718-.692.652.652 0 0 1 .445-.634Z"></path><path fill-rule="evenodd" d="M3.625 2.313h8.75a1.313 1.313 0 0 1 1.313 1.312v8.75a1.313 1.313 0 0 1-1.313 1.313h-8.75a1.313 1.313 0 0 1-1.313-1.313v-8.75a1.313 1.313 0 0 1 1.313-1.313Zm.595 7.634h.831V5.813h-.595l-1.199.538.28.704.683-.254v3.146Zm1.754-1.969c0 1.365.626 2.043 1.61 2.043a1.43 1.43 0 0 0 1.527-1.435 1.313 1.313 0 0 0-1.37-1.334 1.111 1.111 0 0 0-.935.407c0-.713.34-1.15.875-1.15a1.024 1.024 0 0 1 .756.318l.526-.577a1.597 1.597 0 0 0-1.278-.512c-.94 0-1.71.726-1.71 2.24Zm5.526.46h.875v-.876H11.5v-.875h-.875v.875H9.75v.875h.875v.876h.875v-.876Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--over16Filled"><path d="M7.29 7.987c.087-.03.18-.04.273-.03a.652.652 0 0 1 .717.677.665.665 0 0 1-.717.679.665.665 0 0 1-.718-.692.652.652 0 0 1 .445-.634Z"></path><path fill-rule="evenodd" d="M3.625 2.313h8.75a1.313 1.313 0 0 1 1.313 1.312v8.75a1.313 1.313 0 0 1-1.313 1.313h-8.75a1.313 1.313 0 0 1-1.313-1.313v-8.75a1.313 1.313 0 0 1 1.313-1.313Zm.595 7.634h.831V5.813h-.595l-1.199.538.28.704.683-.254v3.146Zm1.754-1.969c0 1.365.626 2.043 1.61 2.043a1.43 1.43 0 0 0 1.527-1.435 1.313 1.313 0 0 0-1.37-1.334 1.111 1.111 0 0 0-.935.407c0-.713.34-1.15.875-1.15a1.024 1.024 0 0 1 .756.318l.526-.577a1.597 1.597 0 0 0-1.278-.512c-.94 0-1.71.726-1.71 2.24Zm5.526.46h.875v-.876H11.5v-.875h-.875v.875H9.75v.875h.875v.876h.875v-.876Z" clip-rule="evenodd"></path></svg>';
 
 export class IconOver16Filled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconOver16Filled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--over16Filled', '', null, 'IconOver16Filled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--over16Filled', '', null, 'IconOver16Filled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--over16Filled');
         this.root.append(svg);
     }

package/icons/IconOver16FilledLarge.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--over16FilledLarge"><path d="M14.58 15.973c.175-.058.36-.08.545-.06a1.304 1.304 0 0 1 1.435 1.356 1.33 1.33 0 0 1-1.435 1.356 1.33 1.33 0 0 1-1.435-1.383 1.304 1.304 0 0 1 .89-1.269Z"></path><path fill-rule="evenodd" d="M7.25 4.625h17.5a2.625 2.625 0 0 1 2.625 2.625v17.5a2.625 2.625 0 0 1-2.625 2.625H7.25a2.625 2.625 0 0 1-2.625-2.625V7.25A2.625 2.625 0 0 1 7.25 4.625Zm1.19 15.269h1.662v-8.269h-1.19l-2.397 1.076.56 1.409 1.365-.508v6.292Zm3.509-3.938c0 2.73 1.251 4.087 3.22 4.087a2.86 2.86 0 0 0 3.053-2.87 2.625 2.625 0 0 0-2.738-2.67 2.223 2.223 0 0 0-1.873.815c0-1.427.683-2.302 1.75-2.302a2.047 2.047 0 0 1 1.514.639l1.05-1.155a3.194 3.194 0 0 0-2.555-1.024c-1.881 0-3.421 1.453-3.421 4.48ZM23 16.875h1.75v-1.75H23v-1.75h-1.75v1.75H19.5v1.75h1.75v1.75H23v-1.75Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--over16FilledLarge"><path d="M14.58 15.973c.175-.058.36-.08.545-.06a1.304 1.304 0 0 1 1.435 1.356 1.33 1.33 0 0 1-1.435 1.356 1.33 1.33 0 0 1-1.435-1.383 1.304 1.304 0 0 1 .89-1.269Z"></path><path fill-rule="evenodd" d="M7.25 4.625h17.5a2.625 2.625 0 0 1 2.625 2.625v17.5a2.625 2.625 0 0 1-2.625 2.625H7.25a2.625 2.625 0 0 1-2.625-2.625V7.25A2.625 2.625 0 0 1 7.25 4.625Zm1.19 15.269h1.662v-8.269h-1.19l-2.397 1.076.56 1.409 1.365-.508v6.292Zm3.509-3.938c0 2.73 1.251 4.087 3.22 4.087a2.86 2.86 0 0 0 3.053-2.87 2.625 2.625 0 0 0-2.738-2.67 2.223 2.223 0 0 0-1.873.815c0-1.427.683-2.302 1.75-2.302a2.047 2.047 0 0 1 1.514.639l1.05-1.155a3.194 3.194 0 0 0-2.555-1.024c-1.881 0-3.421 1.453-3.421 4.48ZM23 16.875h1.75v-1.75H23v-1.75h-1.75v1.75H19.5v1.75h1.75v1.75H23v-1.75Z" clip-rule="evenodd"></path></svg>';
 
 export class IconOver16FilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconOver16FilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--over16FilledLarge', '', null, 'IconOver16FilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--over16FilledLarge', '', null, 'IconOver16FilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--over16FilledLarge');
         this.root.append(svg);
     }

package/icons/IconOver18Filled.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--over18Filled"><path d="M7.497 9.304c.403 0 .73-.253.73-.565 0-.311-.327-.564-.73-.564-.404 0-.73.253-.73.564 0 .312.326.565.73.565Z"></path><path d="M7.716 7.486a.555.555 0 0 1-.22.028.547.547 0 0 1-.59-.529.538.538 0 0 1 .59-.525.542.542 0 0 1 .596.525.555.555 0 0 1-.376.501Z"></path><path fill-rule="evenodd" d="M12.375 2.313h-8.75a1.313 1.313 0 0 0-1.313 1.312v8.75a1.313 1.313 0 0 0 1.313 1.313h8.75a1.313 1.313 0 0 0 1.313-1.313v-8.75a1.313 1.313 0 0 0-1.313-1.313ZM5.051 9.947H4.22V6.8l-.682.254-.28-.704 1.198-.538h.595v4.134Zm2.446.074c-1.085 0-1.606-.564-1.606-1.212a1.01 1.01 0 0 1 .713-.984 1.01 1.01 0 0 1-.555-.914c0-.6.494-1.173 1.448-1.173s1.452.573 1.452 1.173a1.028 1.028 0 0 1-.564.914 1.015 1.015 0 0 1 .722.984c0 .648-.525 1.212-1.61 1.212Zm4.878-1.584H11.5v.876h-.875v-.876H9.75v-.874h.875v-.875h.875v.875h.875v.875Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--over18Filled"><path d="M7.497 9.304c.403 0 .73-.253.73-.565 0-.311-.327-.564-.73-.564-.404 0-.73.253-.73.564 0 .312.326.565.73.565Z"></path><path d="M7.716 7.486a.555.555 0 0 1-.22.028.547.547 0 0 1-.59-.529.538.538 0 0 1 .59-.525.542.542 0 0 1 .596.525.555.555 0 0 1-.376.501Z"></path><path fill-rule="evenodd" d="M12.375 2.313h-8.75a1.313 1.313 0 0 0-1.313 1.312v8.75a1.313 1.313 0 0 0 1.313 1.313h8.75a1.313 1.313 0 0 0 1.313-1.313v-8.75a1.313 1.313 0 0 0-1.313-1.313ZM5.051 9.947H4.22V6.8l-.682.254-.28-.704 1.198-.538h.595v4.134Zm2.446.074c-1.085 0-1.606-.564-1.606-1.212a1.01 1.01 0 0 1 .713-.984 1.01 1.01 0 0 1-.555-.914c0-.6.494-1.173 1.448-1.173s1.452.573 1.452 1.173a1.028 1.028 0 0 1-.564.914 1.015 1.015 0 0 1 .722.984c0 .648-.525 1.212-1.61 1.212Zm4.878-1.584H11.5v.876h-.875v-.876H9.75v-.874h.875v-.875h.875v.875h.875v.875Z" clip-rule="evenodd"></path></svg>';
 
 export class IconOver18Filled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconOver18Filled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--over18Filled', '', null, 'IconOver18Filled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--over18Filled', '', null, 'IconOver18Filled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--over18Filled');
         this.root.append(svg);
     }