@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/icons/IconLogOut.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--logOut"><path d="M13.906 8a5.906 5.906 0 1 1-8.531-5.25v1.487a4.594 4.594 0 1 0 5.25 0V2.75A5.915 5.915 0 0 1 13.906 8Zm-5.25-7H7.344v5.25h1.312V1Z"></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--logOut"><path d="M13.906 8a5.906 5.906 0 1 1-8.531-5.25v1.487a4.594 4.594 0 1 0 5.25 0V2.75A5.915 5.915 0 0 1 13.906 8Zm-5.25-7H7.344v5.25h1.312V1Z"></path></svg>';
 
 export class IconLogOut extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconLogOut extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--logOut', '', null, 'IconLogOut');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--logOut', '', null, 'IconLogOut');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--logOut');
         this.root.append(svg);
     }

package/icons/IconLogOutLarge.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--logOutLarge"><path d="M27.375 16.875a11.375 11.375 0 1 1-15.75-10.5v1.934a9.625 9.625 0 1 0 8.75 0V6.375a11.375 11.375 0 0 1 7 10.5Zm-10.5-14h-1.75v10.5h1.75v-10.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--logOutLarge"><path d="M27.375 16.875a11.375 11.375 0 1 1-15.75-10.5v1.934a9.625 9.625 0 1 0 8.75 0V6.375a11.375 11.375 0 0 1 7 10.5Zm-10.5-14h-1.75v10.5h1.75v-10.5Z"></path></svg>';
 
 export class IconLogOutLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconLogOutLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--logOutLarge', '', null, 'IconLogOutLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--logOutLarge', '', null, 'IconLogOutLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--logOutLarge');
         this.root.append(svg);
     }

package/icons/IconLogoPoints.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--points"><path d="M14.125 6.066c0-.84-.639-1.522-1.452-1.618.192-.254.332-.552.393-.875a1.743 1.743 0 0 0-.866-1.838c-1.4-.796-2.642.306-3.071.683-.446.393-.831.752-1.155 1.076A27.011 27.011 0 0 0 6.8 2.409c-.41-.368-1.653-1.47-3.053-.665A1.743 1.743 0 0 0 2.88 3.58c.062.324.202.622.403.884a1.637 1.637 0 0 0-1.391 1.61V8.84h1.11v4.043c0 .892.727 1.627 1.628 1.636l6.72.026a1.629 1.629 0 0 0 1.636-1.627V8.84h1.147V6.075l-.009-.009Zm-1.312 0V7.52H8.62V5.743h3.877c.175 0 .323.148.323.323h-.008Zm-2.8-2.686c.49-.437 1.015-.805 1.54-.507a.463.463 0 0 1 .227.455c-.07.35-.315.507-.359.542-.656.394-1.662.446-2.37.411.28-.271.603-.568.97-.892l-.008-.009Zm-5.627-.507a.824.824 0 0 1 .385-.105c.394 0 .78.288 1.164.63.35.315.674.603.954.875-.718.035-1.715-.018-2.371-.412a.777.777 0 0 1-.36-.533.445.445 0 0 1 .228-.455Zm-1.19 3.193c0-.175.15-.323.324-.323H7.3v1.776H3.188V6.066h.008Zm1.112 6.817V8.84h3v4.375H4.624a.343.343 0 0 1-.324-.332h.009Zm7.367.026a.326.326 0 0 1-.096.227.325.325 0 0 1-.228.097h-2.73V8.84h3.045v4.078l.01-.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 16 16" class="c-pieIcon c-pieIcon--points"><path d="M14.125 6.066c0-.84-.639-1.522-1.452-1.618.192-.254.332-.552.393-.875a1.743 1.743 0 0 0-.866-1.838c-1.4-.796-2.642.306-3.071.683-.446.393-.831.752-1.155 1.076A27.011 27.011 0 0 0 6.8 2.409c-.41-.368-1.653-1.47-3.053-.665A1.743 1.743 0 0 0 2.88 3.58c.062.324.202.622.403.884a1.637 1.637 0 0 0-1.391 1.61V8.84h1.11v4.043c0 .892.727 1.627 1.628 1.636l6.72.026a1.629 1.629 0 0 0 1.636-1.627V8.84h1.147V6.075l-.009-.009Zm-1.312 0V7.52H8.62V5.743h3.877c.175 0 .323.148.323.323h-.008Zm-2.8-2.686c.49-.437 1.015-.805 1.54-.507a.463.463 0 0 1 .227.455c-.07.35-.315.507-.359.542-.656.394-1.662.446-2.37.411.28-.271.603-.568.97-.892l-.008-.009Zm-5.627-.507a.824.824 0 0 1 .385-.105c.394 0 .78.288 1.164.63.35.315.674.603.954.875-.718.035-1.715-.018-2.371-.412a.777.777 0 0 1-.36-.533.445.445 0 0 1 .228-.455Zm-1.19 3.193c0-.175.15-.323.324-.323H7.3v1.776H3.188V6.066h.008Zm1.112 6.817V8.84h3v4.375H4.624a.343.343 0 0 1-.324-.332h.009Zm7.367.026a.326.326 0 0 1-.096.227.325.325 0 0 1-.228.097h-2.73V8.84h3.045v4.078l.01-.01Z"></path></svg>';
 
 export class IconLogoPoints extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconLogoPoints extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--points', '', null, 'IconLogoPoints');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--points', '', null, 'IconLogoPoints');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--points');
         this.root.append(svg);
     }

package/icons/IconLogoPointsLarge.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--pointsLarge"><path d="M26.614 12.535a2.627 2.627 0 0 0-2.625-2.625h-.298a3.602 3.602 0 0 0 1.033-1.89c.218-1.155-.35-2.38-1.4-2.975-2.328-1.321-4.428.542-5.154 1.19a45.752 45.752 0 0 0-2.266 2.117 48.599 48.599 0 0 0-2.31-2.152c-.692-.613-2.792-2.476-5.12-1.155-1.05.595-1.627 1.82-1.4 2.975.14.726.508 1.391 1.033 1.89h-.166a2.627 2.627 0 0 0-2.625 2.625v4.646h1.986v7.543a2.63 2.63 0 0 0 2.617 2.625l12.03.043h.01c.7 0 1.356-.27 1.855-.76.498-.5.77-1.156.77-1.856V17.19h2.056v-4.646l-.026-.009ZM19.36 7.504c.919-.814 2.004-1.558 3.089-.945.472.271.612.77.542 1.128-.114.578-.481.98-.787 1.164-1.514.901-3.824.858-5.067.718a49.913 49.913 0 0 1 2.223-2.065ZM9.332 6.559c.28-.158.56-.228.832-.228.805 0 1.583.578 2.3 1.208a51.69 51.69 0 0 1 2.18 2.03c-1.252.14-3.553.183-5.067-.718a1.781 1.781 0 0 1-.787-1.164c-.07-.35.07-.857.542-1.128ZM7.05 12.535c0-.481.393-.875.875-.875h7.087v3.78H7.05v-2.905Zm1.986 12.189V17.18h5.976v8.435L9.91 25.6a.87.87 0 0 1-.866-.875h-.01Zm13.781.043a.866.866 0 0 1-.866.875l-5.18-.017v-8.444h6.055v7.586h-.009Zm2.056-9.336h-8.11v-3.78h7.227c.48 0 .875.394.875.875v2.896l.008.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--pointsLarge"><path d="M26.614 12.535a2.627 2.627 0 0 0-2.625-2.625h-.298a3.602 3.602 0 0 0 1.033-1.89c.218-1.155-.35-2.38-1.4-2.975-2.328-1.321-4.428.542-5.154 1.19a45.752 45.752 0 0 0-2.266 2.117 48.599 48.599 0 0 0-2.31-2.152c-.692-.613-2.792-2.476-5.12-1.155-1.05.595-1.627 1.82-1.4 2.975.14.726.508 1.391 1.033 1.89h-.166a2.627 2.627 0 0 0-2.625 2.625v4.646h1.986v7.543a2.63 2.63 0 0 0 2.617 2.625l12.03.043h.01c.7 0 1.356-.27 1.855-.76.498-.5.77-1.156.77-1.856V17.19h2.056v-4.646l-.026-.009ZM19.36 7.504c.919-.814 2.004-1.558 3.089-.945.472.271.612.77.542 1.128-.114.578-.481.98-.787 1.164-1.514.901-3.824.858-5.067.718a49.913 49.913 0 0 1 2.223-2.065ZM9.332 6.559c.28-.158.56-.228.832-.228.805 0 1.583.578 2.3 1.208a51.69 51.69 0 0 1 2.18 2.03c-1.252.14-3.553.183-5.067-.718a1.781 1.781 0 0 1-.787-1.164c-.07-.35.07-.857.542-1.128ZM7.05 12.535c0-.481.393-.875.875-.875h7.087v3.78H7.05v-2.905Zm1.986 12.189V17.18h5.976v8.435L9.91 25.6a.87.87 0 0 1-.866-.875h-.01Zm13.781.043a.866.866 0 0 1-.866.875l-5.18-.017v-8.444h6.055v7.586h-.009Zm2.056-9.336h-8.11v-3.78h7.227c.48 0 .875.394.875.875v2.896l.008.01Z"></path></svg>';
 
 export class IconLogoPointsLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconLogoPointsLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pointsLarge', '', null, 'IconLogoPointsLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pointsLarge', '', null, 'IconLogoPointsLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pointsLarge');
         this.root.append(svg);
     }

package/icons/IconLogoSkip.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--skip"><path fill-rule="evenodd" d="M9.421 6.878c-.439-.542-.721-.928-.655-1.353.08-.529.429-1.063 1.04-1.063.672 0 .846.15 1.222.346a.303.303 0 0 0 .14.036c.129 0 .243-.09.28-.222L12 2.548l-.382-.198-.056-.028-.018-.01A3.245 3.245 0 0 0 10.105 2C8.024 2 6.131 3.655 5.82 5.69c-.218 1.423.603 2.427 1.202 3.16l.053.064c.433.516.737.917.663 1.382-.124.807-.721 1.073-1.22 1.073-.79 0-1.02-.137-1.455-.364-.061-.032-.176-.091-.274-.056a.308.308 0 0 0-.194.211l-.526 2-.068.257S5.035 14 6.233 14c1.774 0 3.307-.755 4.217-2.58.228-.467.363-.977.396-1.5.046-1.333-.884-2.38-1.425-3.042Z" 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--skip"><path fill-rule="evenodd" d="M9.421 6.878c-.439-.542-.721-.928-.655-1.353.08-.529.429-1.063 1.04-1.063.672 0 .846.15 1.222.346a.303.303 0 0 0 .14.036c.129 0 .243-.09.28-.222L12 2.548l-.382-.198-.056-.028-.018-.01A3.245 3.245 0 0 0 10.105 2C8.024 2 6.131 3.655 5.82 5.69c-.218 1.423.603 2.427 1.202 3.16l.053.064c.433.516.737.917.663 1.382-.124.807-.721 1.073-1.22 1.073-.79 0-1.02-.137-1.455-.364-.061-.032-.176-.091-.274-.056a.308.308 0 0 0-.194.211l-.526 2-.068.257S5.035 14 6.233 14c1.774 0 3.307-.755 4.217-2.58.228-.467.363-.977.396-1.5.046-1.333-.884-2.38-1.425-3.042Z" clip-rule="evenodd"></path></svg>';
 
 export class IconLogoSkip extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconLogoSkip extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--skip', '', null, 'IconLogoSkip');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--skip', '', null, 'IconLogoSkip');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--skip');
         this.root.append(svg);
     }

package/icons/IconLogoSkipCircle.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--skipCircle"><path d="M8 1a7 7 0 1 0 7 7 7.01 7.01 0 0 0-7-7Zm0 12.645a5.645 5.645 0 1 1 0-11.29 5.645 5.645 0 0 1 0 11.29Z"></path><path fill-rule="evenodd" d="M8.86 7.368c-.268-.315-.442-.54-.401-.786.05-.307.263-.617.637-.617.412 0 .518.087.75.2a.18.18 0 0 0 .257-.108l.338-1.204-.234-.114-.035-.017-.01-.005a2.082 2.082 0 0 0-.882-.182c-1.276 0-2.436.961-2.627 2.142-.134.827.37 1.41.737 1.836l.032.036c.265.3.452.533.406.803-.076.469-.442.623-.747.623-.484 0-.625-.08-.892-.211-.038-.019-.108-.053-.168-.033a.183.183 0 0 0-.119.123l-.322 1.161-.042.149s.635.34 1.369.34c1.087 0 2.026-.44 2.584-1.5.14-.27.222-.566.243-.87.028-.774-.542-1.382-.873-1.766Z" 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--skipCircle"><path d="M8 1a7 7 0 1 0 7 7 7.01 7.01 0 0 0-7-7Zm0 12.645a5.645 5.645 0 1 1 0-11.29 5.645 5.645 0 0 1 0 11.29Z"></path><path fill-rule="evenodd" d="M8.86 7.368c-.268-.315-.442-.54-.401-.786.05-.307.263-.617.637-.617.412 0 .518.087.75.2a.18.18 0 0 0 .257-.108l.338-1.204-.234-.114-.035-.017-.01-.005a2.082 2.082 0 0 0-.882-.182c-1.276 0-2.436.961-2.627 2.142-.134.827.37 1.41.737 1.836l.032.036c.265.3.452.533.406.803-.076.469-.442.623-.747.623-.484 0-.625-.08-.892-.211-.038-.019-.108-.053-.168-.033a.183.183 0 0 0-.119.123l-.322 1.161-.042.149s.635.34 1.369.34c1.087 0 2.026-.44 2.584-1.5.14-.27.222-.566.243-.87.028-.774-.542-1.382-.873-1.766Z" clip-rule="evenodd"></path></svg>';
 
 export class IconLogoSkipCircle extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconLogoSkipCircle extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--skipCircle', '', null, 'IconLogoSkipCircle');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--skipCircle', '', null, 'IconLogoSkipCircle');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--skipCircle');
         this.root.append(svg);
     }

package/icons/IconLogoSkipCircleFilled.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--skipCircleFilled"><g clip-path="url(#prefix__clip0_4813_3340)"><path fill-rule="evenodd" d="M8 1a7 7 0 1 0 7 7 7.01 7.01 0 0 0-7-7Zm.459 5.582c-.04.247.133.47.402.786l.059.068c.335.386.84.968.814 1.698-.02.304-.103.6-.243.87-.558 1.06-1.497 1.5-2.584 1.5-.734 0-1.369-.34-1.369-.34l.042-.149.322-1.161a.183.183 0 0 1 .119-.123c.06-.02.13.014.168.033l.032.016c.247.122.396.195.86.195.305 0 .671-.154.747-.623.046-.27-.14-.503-.406-.803l-.032-.036-.001-.001c-.367-.426-.87-1.01-.736-1.835.19-1.18 1.351-2.142 2.627-2.142.303-.004.604.058.881.182l.011.005.035.017.234.114-.339 1.205a.18.18 0 0 1-.257.107c-.03-.014-.058-.029-.085-.043-.179-.092-.306-.157-.664-.157-.374 0-.588.31-.637.617Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_4813_3340"><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--skipCircleFilled"><g clip-path="url(#prefix__clip0_4813_3340)"><path fill-rule="evenodd" d="M8 1a7 7 0 1 0 7 7 7.01 7.01 0 0 0-7-7Zm.459 5.582c-.04.247.133.47.402.786l.059.068c.335.386.84.968.814 1.698-.02.304-.103.6-.243.87-.558 1.06-1.497 1.5-2.584 1.5-.734 0-1.369-.34-1.369-.34l.042-.149.322-1.161a.183.183 0 0 1 .119-.123c.06-.02.13.014.168.033l.032.016c.247.122.396.195.86.195.305 0 .671-.154.747-.623.046-.27-.14-.503-.406-.803l-.032-.036-.001-.001c-.367-.426-.87-1.01-.736-1.835.19-1.18 1.351-2.142 2.627-2.142.303-.004.604.058.881.182l.011.005.035.017.234.114-.339 1.205a.18.18 0 0 1-.257.107c-.03-.014-.058-.029-.085-.043-.179-.092-.306-.157-.664-.157-.374 0-.588.31-.637.617Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_4813_3340"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconLogoSkipCircleFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconLogoSkipCircleFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--skipCircleFilled', '', null, 'IconLogoSkipCircleFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--skipCircleFilled', '', null, 'IconLogoSkipCircleFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--skipCircleFilled');
         this.root.append(svg);
     }

package/icons/IconLogoSkipCircleFilledLarge.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--skipCircleFilledLarge"><path fill-rule="evenodd" d="M28.5 16.25a12.25 12.25 0 1 1-24.499 0 12.25 12.25 0 0 1 24.499 0Zm-11.841-3.284c-.078.478.257.912.779 1.522l.114.132c.65.748 1.629 1.876 1.577 3.29-.04.589-.2 1.163-.47 1.687-1.08 2.053-2.901 2.903-5.007 2.903-1.423 0-2.652-.657-2.652-.657l.08-.288.626-2.25a.355.355 0 0 1 .23-.238c.116-.04.252.027.325.063l.063.03c.478.237.766.38 1.665.38.592 0 1.301-.3 1.448-1.208.088-.523-.273-.974-.787-1.555l-.063-.07-.001-.003c-.712-.825-1.685-1.954-1.427-3.554C13.53 10.862 15.78 9 18.25 9a4.033 4.033 0 0 1 1.709.352l.02.01.068.032.453.222-.656 2.334a.348.348 0 0 1-.498.209 11.178 11.178 0 0 1-.165-.084c-.346-.178-.593-.305-1.286-.305-.726 0-1.14.601-1.235 1.196Z" 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--skipCircleFilledLarge"><path fill-rule="evenodd" d="M28.5 16.25a12.25 12.25 0 1 1-24.499 0 12.25 12.25 0 0 1 24.499 0Zm-11.841-3.284c-.078.478.257.912.779 1.522l.114.132c.65.748 1.629 1.876 1.577 3.29-.04.589-.2 1.163-.47 1.687-1.08 2.053-2.901 2.903-5.007 2.903-1.423 0-2.652-.657-2.652-.657l.08-.288.626-2.25a.355.355 0 0 1 .23-.238c.116-.04.252.027.325.063l.063.03c.478.237.766.38 1.665.38.592 0 1.301-.3 1.448-1.208.088-.523-.273-.974-.787-1.555l-.063-.07-.001-.003c-.712-.825-1.685-1.954-1.427-3.554C13.53 10.862 15.78 9 18.25 9a4.033 4.033 0 0 1 1.709.352l.02.01.068.032.453.222-.656 2.334a.348.348 0 0 1-.498.209 11.178 11.178 0 0 1-.165-.084c-.346-.178-.593-.305-1.286-.305-.726 0-1.14.601-1.235 1.196Z" clip-rule="evenodd"></path></svg>';
 
 export class IconLogoSkipCircleFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconLogoSkipCircleFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--skipCircleFilledLarge', '', null, 'IconLogoSkipCircleFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--skipCircleFilledLarge', '', null, 'IconLogoSkipCircleFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--skipCircleFilledLarge');
         this.root.append(svg);
     }

package/icons/IconLogoSkipCircleLarge.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--skipCircleLarge"><path d="M28.5 16.25a12.25 12.25 0 1 1-24.499 0 12.25 12.25 0 0 1 24.499 0Zm-1.75 0a10.5 10.5 0 1 0-21 0 10.5 10.5 0 0 0 21 0Z"></path><path fill-rule="evenodd" d="M17.438 14.488c-.522-.61-.857-1.044-.78-1.522.096-.595.51-1.196 1.236-1.196.798 0 1.004.168 1.451.389a.348.348 0 0 0 .498-.209l.656-2.334-.453-.222-.067-.032-.021-.01A4.033 4.033 0 0 0 18.248 9c-2.47 0-4.719 1.862-5.09 4.15-.258 1.601.717 2.73 1.428 3.556l.063.071c.514.581.875 1.032.787 1.555-.147.909-.856 1.208-1.448 1.208-.938 0-1.21-.155-1.728-.41-.073-.036-.21-.103-.325-.063a.355.355 0 0 0-.23.238l-.625 2.25-.081.288s1.23.657 2.652.657c2.106 0 3.926-.85 5.007-2.903.27-.524.43-1.098.47-1.687.055-1.5-1.05-2.677-1.692-3.422Z" 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--skipCircleLarge"><path d="M28.5 16.25a12.25 12.25 0 1 1-24.499 0 12.25 12.25 0 0 1 24.499 0Zm-1.75 0a10.5 10.5 0 1 0-21 0 10.5 10.5 0 0 0 21 0Z"></path><path fill-rule="evenodd" d="M17.438 14.488c-.522-.61-.857-1.044-.78-1.522.096-.595.51-1.196 1.236-1.196.798 0 1.004.168 1.451.389a.348.348 0 0 0 .498-.209l.656-2.334-.453-.222-.067-.032-.021-.01A4.033 4.033 0 0 0 18.248 9c-2.47 0-4.719 1.862-5.09 4.15-.258 1.601.717 2.73 1.428 3.556l.063.071c.514.581.875 1.032.787 1.555-.147.909-.856 1.208-1.448 1.208-.938 0-1.21-.155-1.728-.41-.073-.036-.21-.103-.325-.063a.355.355 0 0 0-.23.238l-.625 2.25-.081.288s1.23.657 2.652.657c2.106 0 3.926-.85 5.007-2.903.27-.524.43-1.098.47-1.687.055-1.5-1.05-2.677-1.692-3.422Z" clip-rule="evenodd"></path></svg>';
 
 export class IconLogoSkipCircleLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconLogoSkipCircleLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--skipCircleLarge', '', null, 'IconLogoSkipCircleLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--skipCircleLarge', '', null, 'IconLogoSkipCircleLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--skipCircleLarge');
         this.root.append(svg);
     }

package/icons/IconLogoSkipLarge.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--skipLarge"><path fill-rule="evenodd" d="M18.535 14.036c-.81-.949-1.332-1.624-1.21-2.367.148-.926.791-1.861 1.921-1.861 1.24 0 1.562.261 2.257.605a.542.542 0 0 0 .775-.325l1.02-3.63-.705-.346-.104-.05-.034-.016a6.274 6.274 0 0 0-2.657-.546c-3.844 0-7.34 2.895-7.917 6.455-.403 2.49 1.114 4.247 2.221 5.531l.097.111c.8.903 1.361 1.605 1.224 2.42-.228 1.412-1.33 1.878-2.252 1.878-1.459 0-1.883-.241-2.688-.638-.113-.056-.325-.16-.506-.097a.551.551 0 0 0-.358.369l-.972 3.5-.125.448s1.912 1.023 4.125 1.023c3.275 0 6.107-1.322 7.788-4.516.421-.816.67-1.71.732-2.625.085-2.332-1.633-4.164-2.632-5.323Z" 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--skipLarge"><path fill-rule="evenodd" d="M18.535 14.036c-.81-.949-1.332-1.624-1.21-2.367.148-.926.791-1.861 1.921-1.861 1.24 0 1.562.261 2.257.605a.542.542 0 0 0 .775-.325l1.02-3.63-.705-.346-.104-.05-.034-.016a6.274 6.274 0 0 0-2.657-.546c-3.844 0-7.34 2.895-7.917 6.455-.403 2.49 1.114 4.247 2.221 5.531l.097.111c.8.903 1.361 1.605 1.224 2.42-.228 1.412-1.33 1.878-2.252 1.878-1.459 0-1.883-.241-2.688-.638-.113-.056-.325-.16-.506-.097a.551.551 0 0 0-.358.369l-.972 3.5-.125.448s1.912 1.023 4.125 1.023c3.275 0 6.107-1.322 7.788-4.516.421-.816.67-1.71.732-2.625.085-2.332-1.633-4.164-2.632-5.323Z" clip-rule="evenodd"></path></svg>';
 
 export class IconLogoSkipLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconLogoSkipLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--skipLarge', '', null, 'IconLogoSkipLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--skipLarge', '', null, 'IconLogoSkipLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--skipLarge');
         this.root.append(svg);
     }

package/icons/IconMealVoucher.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--mealVoucher"><path d="M14.781 6.688v5.25a1.094 1.094 0 0 1-1.094 1.093H2.313a1.093 1.093 0 0 1-1.094-1.093v-5.25a1.094 1.094 0 0 1 1.093-1.094h1.313v1.312H2.531v4.813H13.47V6.906h-1.094V5.594h1.313a1.094 1.094 0 0 1 1.093 1.094Zm-5.11 1.04.517.115c0 .76-.053 1.426-.08 1.907h1.05c.08-1.444.176-4.375.062-6.405 0-.586-.158-.875-.411-1.015a.648.648 0 0 0-.508-.061.761.761 0 0 0-.42.35 7.875 7.875 0 0 0-.761 4.314.779.779 0 0 0 .551.796Zm-3.946-.997v3.02h1.05V6.73c.446-.13.875-.428.875-.927V2.26l-2.853.289v3.255c.035.49.482.787.928.927Z"></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--mealVoucher"><path d="M14.781 6.688v5.25a1.094 1.094 0 0 1-1.094 1.093H2.313a1.093 1.093 0 0 1-1.094-1.093v-5.25a1.094 1.094 0 0 1 1.093-1.094h1.313v1.312H2.531v4.813H13.47V6.906h-1.094V5.594h1.313a1.094 1.094 0 0 1 1.093 1.094Zm-5.11 1.04.517.115c0 .76-.053 1.426-.08 1.907h1.05c.08-1.444.176-4.375.062-6.405 0-.586-.158-.875-.411-1.015a.648.648 0 0 0-.508-.061.761.761 0 0 0-.42.35 7.875 7.875 0 0 0-.761 4.314.779.779 0 0 0 .551.796Zm-3.946-.997v3.02h1.05V6.73c.446-.13.875-.428.875-.927V2.26l-2.853.289v3.255c.035.49.482.787.928.927Z"></path></svg>';
 
 export class IconMealVoucher extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconMealVoucher extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--mealVoucher', '', null, 'IconMealVoucher');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--mealVoucher', '', null, 'IconMealVoucher');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--mealVoucher');
         this.root.append(svg);
     }

package/icons/IconMealVoucherFilled.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--mealVoucherFilled"><path d="M9.12 6.932a7.875 7.875 0 0 1 .761-4.313.761.761 0 0 1 .42-.35.647.647 0 0 1 .508.061c.254.149.367.429.411 1.015.114 2.03 0 4.961-.061 6.405h-1.05c0-.481.052-1.146.079-1.908L9.67 7.73a.779.779 0 0 1-.551-.797Zm-3.395-.2V9.75h1.05V6.731c.446-.131.875-.429.875-.927V2.26l-2.853.289v3.255c.035.49.482.787.928.927Zm7.963-1.138h-1.103c0 1.636-.061 3.281-.114 4.226a1.321 1.321 0 0 1-1.312 1.242h-.534a1.75 1.75 0 0 1-1.75-1.75v-.875H8v.875a1.75 1.75 0 0 1-1.75 1.75 1.837 1.837 0 0 1-1.838-1.837V7.527a2.135 2.135 0 0 1-.874-1.75v-.183H2.313a1.094 1.094 0 0 0-1.094 1.093v5.25a1.094 1.094 0 0 0 1.093 1.094h11.376a1.094 1.094 0 0 0 1.093-1.094v-5.25a1.094 1.094 0 0 0-1.094-1.093Z"></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--mealVoucherFilled"><path d="M9.12 6.932a7.875 7.875 0 0 1 .761-4.313.761.761 0 0 1 .42-.35.647.647 0 0 1 .508.061c.254.149.367.429.411 1.015.114 2.03 0 4.961-.061 6.405h-1.05c0-.481.052-1.146.079-1.908L9.67 7.73a.779.779 0 0 1-.551-.797Zm-3.395-.2V9.75h1.05V6.731c.446-.131.875-.429.875-.927V2.26l-2.853.289v3.255c.035.49.482.787.928.927Zm7.963-1.138h-1.103c0 1.636-.061 3.281-.114 4.226a1.321 1.321 0 0 1-1.312 1.242h-.534a1.75 1.75 0 0 1-1.75-1.75v-.875H8v.875a1.75 1.75 0 0 1-1.75 1.75 1.837 1.837 0 0 1-1.838-1.837V7.527a2.135 2.135 0 0 1-.874-1.75v-.183H2.313a1.094 1.094 0 0 0-1.094 1.093v5.25a1.094 1.094 0 0 0 1.093 1.094h11.376a1.094 1.094 0 0 0 1.093-1.094v-5.25a1.094 1.094 0 0 0-1.094-1.093Z"></path></svg>';
 
 export class IconMealVoucherFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconMealVoucherFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--mealVoucherFilled', '', null, 'IconMealVoucherFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--mealVoucherFilled', '', null, 'IconMealVoucherFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--mealVoucherFilled');
         this.root.append(svg);
     }

package/icons/IconMealVoucherFilledLarge.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--mealVoucherFilledLarge"><path d="M29.125 12.5v11.375a1.75 1.75 0 0 1-1.75 1.75H4.625a1.75 1.75 0 0 1-1.75-1.75V12.5a1.75 1.75 0 0 1 1.75-1.75H7.18v.875c.006.296.047.59.123.875 0 .105.052.21.096.341 0 0 .079.219.105.263a4.839 4.839 0 0 0 1.942 2.371.928.928 0 0 1 .429.752v5.023a.875.875 0 0 0 .875.875h3.5a.875.875 0 0 0 .875-.875v-5.119a.873.873 0 0 1 .332-.674 3.133 3.133 0 0 0 2.39 2.415l.507.097a84.104 84.104 0 0 1-.158 2.257l-.079.954a.875.875 0 0 0 .875.945h3.5a.875.875 0 0 0 .875-.805l.07-.805c.15-1.855.36-5.88.35-9.765h3.588a1.749 1.749 0 0 1 1.75 1.75ZM9.07 12.342l.053.132a3.5 3.5 0 0 0 2.502 2.056v5.845h1.75v-5.88a3.5 3.5 0 0 0 2.354-1.995l.052-.131c0-.07.044-.131.061-.201.056-.182.085-.37.088-.56V5.045l-1.75.875v5.591a1.051 1.051 0 0 1-.053.289.437.437 0 0 1-.385.254.438.438 0 0 1-.437-.438V5.045l-1.75.875v5.705a.447.447 0 0 1-.438.438.437.437 0 0 1-.393-.254 1.05 1.05 0 0 1-.044-.289V5.045l-1.75.875v5.705c0 .19.026.378.079.56-.009.026.043.088.061.157Zm8.032 2.354A16.949 16.949 0 0 1 19.36 4.8a1.33 1.33 0 0 1 1.68-.543c.35.167.761.543.875 1.995.212 4.708.139 9.424-.219 14.123h-1.75c.07-.875.158-2.231.228-3.859-.648-.113-1.698-.297-1.969-.358a1.452 1.452 0 0 1-1.102-1.462Zm1.75-.192 1.392.245c.079-2.564.105-5.443 0-7.805a16.414 16.414 0 0 0-1.4 7.56h.008Z"></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--mealVoucherFilledLarge"><path d="M29.125 12.5v11.375a1.75 1.75 0 0 1-1.75 1.75H4.625a1.75 1.75 0 0 1-1.75-1.75V12.5a1.75 1.75 0 0 1 1.75-1.75H7.18v.875c.006.296.047.59.123.875 0 .105.052.21.096.341 0 0 .079.219.105.263a4.839 4.839 0 0 0 1.942 2.371.928.928 0 0 1 .429.752v5.023a.875.875 0 0 0 .875.875h3.5a.875.875 0 0 0 .875-.875v-5.119a.873.873 0 0 1 .332-.674 3.133 3.133 0 0 0 2.39 2.415l.507.097a84.104 84.104 0 0 1-.158 2.257l-.079.954a.875.875 0 0 0 .875.945h3.5a.875.875 0 0 0 .875-.805l.07-.805c.15-1.855.36-5.88.35-9.765h3.588a1.749 1.749 0 0 1 1.75 1.75ZM9.07 12.342l.053.132a3.5 3.5 0 0 0 2.502 2.056v5.845h1.75v-5.88a3.5 3.5 0 0 0 2.354-1.995l.052-.131c0-.07.044-.131.061-.201.056-.182.085-.37.088-.56V5.045l-1.75.875v5.591a1.051 1.051 0 0 1-.053.289.437.437 0 0 1-.385.254.438.438 0 0 1-.437-.438V5.045l-1.75.875v5.705a.447.447 0 0 1-.438.438.437.437 0 0 1-.393-.254 1.05 1.05 0 0 1-.044-.289V5.045l-1.75.875v5.705c0 .19.026.378.079.56-.009.026.043.088.061.157Zm8.032 2.354A16.949 16.949 0 0 1 19.36 4.8a1.33 1.33 0 0 1 1.68-.543c.35.167.761.543.875 1.995.212 4.708.139 9.424-.219 14.123h-1.75c.07-.875.158-2.231.228-3.859-.648-.113-1.698-.297-1.969-.358a1.452 1.452 0 0 1-1.102-1.462Zm1.75-.192 1.392.245c.079-2.564.105-5.443 0-7.805a16.414 16.414 0 0 0-1.4 7.56h.008Z"></path></svg>';
 
 export class IconMealVoucherFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconMealVoucherFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--mealVoucherFilledLarge', '', null, 'IconMealVoucherFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--mealVoucherFilledLarge', '', null, 'IconMealVoucherFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--mealVoucherFilledLarge');
         this.root.append(svg);
     }

package/icons/IconMealVoucherLarge.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--mealVoucherLarge"><path d="m9.07 12.342.053.132a3.5 3.5 0 0 0 2.502 2.056v5.845h1.75v-5.88a3.5 3.5 0 0 0 2.354-1.995l.052-.131c0-.07.044-.131.061-.201.056-.182.085-.37.088-.56V5.045l-1.75.875v5.591a1.051 1.051 0 0 1-.053.289.438.438 0 0 1-.385.254.437.437 0 0 1-.437-.438V5.045l-1.75.875v5.705a.446.446 0 0 1-.438.438.438.438 0 0 1-.393-.254 1.05 1.05 0 0 1-.044-.289V5.045l-1.75.875v5.705c0 .19.026.378.079.56-.009.026.044.088.061.157Z"></path><path d="M18.205 16.157c.271.062 1.321.245 1.969.36a107.47 107.47 0 0 1-.228 3.858h1.75c.358-4.699.43-9.415.219-14.123-.114-1.452-.525-1.828-.875-1.995a1.33 1.33 0 0 0-1.68.543 16.949 16.949 0 0 0-2.258 9.896 1.453 1.453 0 0 0 1.103 1.461Zm2.004-9.213c.131 2.362.105 5.25 0 7.805l-1.392-.245a16.415 16.415 0 0 1 1.392-7.56Z"></path><path d="M27.375 10.75h-3.5v1.75h3.5v11.375H4.625V12.5H7.25v-1.75H4.625a1.75 1.75 0 0 0-1.75 1.75v11.375a1.75 1.75 0 0 0 1.75 1.75h22.75a1.75 1.75 0 0 0 1.75-1.75V12.5a1.75 1.75 0 0 0-1.75-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--mealVoucherLarge"><path d="m9.07 12.342.053.132a3.5 3.5 0 0 0 2.502 2.056v5.845h1.75v-5.88a3.5 3.5 0 0 0 2.354-1.995l.052-.131c0-.07.044-.131.061-.201.056-.182.085-.37.088-.56V5.045l-1.75.875v5.591a1.051 1.051 0 0 1-.053.289.438.438 0 0 1-.385.254.437.437 0 0 1-.437-.438V5.045l-1.75.875v5.705a.446.446 0 0 1-.438.438.438.438 0 0 1-.393-.254 1.05 1.05 0 0 1-.044-.289V5.045l-1.75.875v5.705c0 .19.026.378.079.56-.009.026.044.088.061.157Z"></path><path d="M18.205 16.157c.271.062 1.321.245 1.969.36a107.47 107.47 0 0 1-.228 3.858h1.75c.358-4.699.43-9.415.219-14.123-.114-1.452-.525-1.828-.875-1.995a1.33 1.33 0 0 0-1.68.543 16.949 16.949 0 0 0-2.258 9.896 1.453 1.453 0 0 0 1.103 1.461Zm2.004-9.213c.131 2.362.105 5.25 0 7.805l-1.392-.245a16.415 16.415 0 0 1 1.392-7.56Z"></path><path d="M27.375 10.75h-3.5v1.75h3.5v11.375H4.625V12.5H7.25v-1.75H4.625a1.75 1.75 0 0 0-1.75 1.75v11.375a1.75 1.75 0 0 0 1.75 1.75h22.75a1.75 1.75 0 0 0 1.75-1.75V12.5a1.75 1.75 0 0 0-1.75-1.75Z"></path></svg>';
 
 export class IconMealVoucherLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconMealVoucherLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--mealVoucherLarge', '', null, 'IconMealVoucherLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--mealVoucherLarge', '', null, 'IconMealVoucherLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--mealVoucherLarge');
         this.root.append(svg);
     }

package/icons/IconMegaphone.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--megaphone"><path d="M14.781 7.125a2.835 2.835 0 0 0-2.625-2.817v-3.09h-1.479l-.175.15a27.627 27.627 0 0 1-1.986 1.46c-.682.456-1.137.692-1.75 1.016H2.75a1.54 1.54 0 0 0-1.531 1.531v3.5a1.531 1.531 0 0 0 1.093 1.461l.762 4.445h2.852l.744-4.375h.123c.586.324 1.163.656 1.75 1.015.586.359 1.356.945 1.986 1.462l.175.148h1.478V9.943a2.835 2.835 0 0 0 2.6-2.818Zm-12.25-1.75a.219.219 0 0 1 .219-.219h2.844v3.938H2.75a.219.219 0 0 1-.219-.219v-3.5Zm2.293 8.094h-.648l-.551-3.063h1.75l-.551 3.063Zm6.02-1.969a23.316 23.316 0 0 0-1.61-1.146A24.508 24.508 0 0 0 6.906 8.97V5.28a24.5 24.5 0 0 0 2.328-1.357c.516-.358 1.094-.743 1.61-1.172v8.75Zm1.312-2.844V5.62a1.523 1.523 0 0 1 0 3.01v.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 16 16" class="c-pieIcon c-pieIcon--megaphone"><path d="M14.781 7.125a2.835 2.835 0 0 0-2.625-2.817v-3.09h-1.479l-.175.15a27.627 27.627 0 0 1-1.986 1.46c-.682.456-1.137.692-1.75 1.016H2.75a1.54 1.54 0 0 0-1.531 1.531v3.5a1.531 1.531 0 0 0 1.093 1.461l.762 4.445h2.852l.744-4.375h.123c.586.324 1.163.656 1.75 1.015.586.359 1.356.945 1.986 1.462l.175.148h1.478V9.943a2.835 2.835 0 0 0 2.6-2.818Zm-12.25-1.75a.219.219 0 0 1 .219-.219h2.844v3.938H2.75a.219.219 0 0 1-.219-.219v-3.5Zm2.293 8.094h-.648l-.551-3.063h1.75l-.551 3.063Zm6.02-1.969a23.316 23.316 0 0 0-1.61-1.146A24.508 24.508 0 0 0 6.906 8.97V5.28a24.5 24.5 0 0 0 2.328-1.357c.516-.358 1.094-.743 1.61-1.172v8.75Zm1.312-2.844V5.62a1.523 1.523 0 0 1 0 3.01v.026Z"></path></svg>';
 
 export class IconMegaphone extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconMegaphone extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--megaphone', '', null, 'IconMegaphone');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--megaphone', '', null, 'IconMegaphone');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--megaphone');
         this.root.append(svg);
     }

package/icons/IconMegaphoneLarge.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--megaphoneLarge"><path d="M28.25 14.25a4.524 4.524 0 0 0-4.375-4.506V2.875h-2.354l-.271.201a46.213 46.213 0 0 1-4.008 2.94A47.948 47.948 0 0 1 12.116 9H5.5a2.625 2.625 0 0 0-2.625 2.625v5.25A2.625 2.625 0 0 0 5.5 19.5h.236l1.4 7.683h4.375l1.243-7.298a48.465 48.465 0 0 1 4.497 2.625c1.384.9 2.72 1.872 3.999 2.914l.245.201h2.38v-6.869a4.524 4.524 0 0 0 4.375-4.506ZM4.625 16.875v-5.25a.875.875 0 0 1 .875-.875h6.125v7H5.5a.875.875 0 0 1-.875-.875Zm3.973 8.558L7.52 19.5h3.544l-1.015 5.933H8.597Zm13.527-1.558a46.084 46.084 0 0 0-3.894-2.835 52.012 52.012 0 0 0-4.856-2.835V10.33a49.054 49.054 0 0 0 4.856-2.809c1.348-.875 2.625-1.837 3.894-2.835v19.189Zm1.75-6.851V11.51a2.756 2.756 0 0 1 0 5.513Z"></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--megaphoneLarge"><path d="M28.25 14.25a4.524 4.524 0 0 0-4.375-4.506V2.875h-2.354l-.271.201a46.213 46.213 0 0 1-4.008 2.94A47.948 47.948 0 0 1 12.116 9H5.5a2.625 2.625 0 0 0-2.625 2.625v5.25A2.625 2.625 0 0 0 5.5 19.5h.236l1.4 7.683h4.375l1.243-7.298a48.465 48.465 0 0 1 4.497 2.625c1.384.9 2.72 1.872 3.999 2.914l.245.201h2.38v-6.869a4.524 4.524 0 0 0 4.375-4.506ZM4.625 16.875v-5.25a.875.875 0 0 1 .875-.875h6.125v7H5.5a.875.875 0 0 1-.875-.875Zm3.973 8.558L7.52 19.5h3.544l-1.015 5.933H8.597Zm13.527-1.558a46.084 46.084 0 0 0-3.894-2.835 52.012 52.012 0 0 0-4.856-2.835V10.33a49.054 49.054 0 0 0 4.856-2.809c1.348-.875 2.625-1.837 3.894-2.835v19.189Zm1.75-6.851V11.51a2.756 2.756 0 0 1 0 5.513Z"></path></svg>';
 
 export class IconMegaphoneLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconMegaphoneLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--megaphoneLarge', '', null, 'IconMegaphoneLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--megaphoneLarge', '', null, 'IconMegaphoneLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--megaphoneLarge');
         this.root.append(svg);
     }

package/icons/IconMenu.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--menu"><path d="M15 4.281H1V2.97h14V4.28Zm0 7.438H1v1.312h14V11.72Zm0-4.375H1v1.312h14V7.344Z"></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--menu"><path d="M15 4.281H1V2.97h14V4.28Zm0 7.438H1v1.312h14V11.72Zm0-4.375H1v1.312h14V7.344Z"></path></svg>';
 
 export class IconMenu extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconMenu extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--menu', '', null, 'IconMenu');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--menu', '', null, 'IconMenu');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--menu');
         this.root.append(svg);
     }

package/icons/IconMenuLarge.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--menuLarge"><path d="M28.25 9H3.75V7.25h24.5V9Zm0 14H3.75v1.75h24.5V23Zm0-7.875H3.75v1.75h24.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--menuLarge"><path d="M28.25 9H3.75V7.25h24.5V9Zm0 14H3.75v1.75h24.5V23Zm0-7.875H3.75v1.75h24.5v-1.75Z"></path></svg>';
 
 export class IconMenuLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconMenuLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--menuLarge', '', null, 'IconMenuLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--menuLarge', '', null, 'IconMenuLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--menuLarge');
         this.root.append(svg);
     }

package/icons/IconMicrophone.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--microphone"><path d="M8.656 12.996V15H7.344v-2.004a5.915 5.915 0 0 1-5.25-5.871h1.312a4.594 4.594 0 0 0 9.188 0h1.312a5.915 5.915 0 0 1-5.25 5.871ZM4.72 7.125V4.5a3.281 3.281 0 1 1 6.562 0v2.625a3.281 3.281 0 0 1-6.562 0Zm1.312 0a1.969 1.969 0 0 0 3.938 0V4.5a1.969 1.969 0 0 0-3.938 0v2.625Z"></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--microphone"><path d="M8.656 12.996V15H7.344v-2.004a5.915 5.915 0 0 1-5.25-5.871h1.312a4.594 4.594 0 0 0 9.188 0h1.312a5.915 5.915 0 0 1-5.25 5.871ZM4.72 7.125V4.5a3.281 3.281 0 1 1 6.562 0v2.625a3.281 3.281 0 0 1-6.562 0Zm1.312 0a1.969 1.969 0 0 0 3.938 0V4.5a1.969 1.969 0 0 0-3.938 0v2.625Z"></path></svg>';
 
 export class IconMicrophone extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconMicrophone extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--microphone', '', null, 'IconMicrophone');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--microphone', '', null, 'IconMicrophone');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--microphone');
         this.root.append(svg);
     }

package/icons/IconMicrophoneLarge.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--microphoneLarge"><path d="M16.875 24.75v2.625H19.5v1.75h-7v-1.75h2.625V24.75A10.5 10.5 0 0 1 5.5 14.25h1.75a8.75 8.75 0 0 0 17.5 0h1.75a10.5 10.5 0 0 1-9.625 10.5Zm-7-10.5V9a6.125 6.125 0 1 1 12.25 0v5.25a6.125 6.125 0 1 1-12.25 0Zm1.75 0a4.375 4.375 0 1 0 8.75 0V9a4.375 4.375 0 1 0-8.75 0v5.25Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--microphoneLarge"><path d="M16.875 24.75v2.625H19.5v1.75h-7v-1.75h2.625V24.75A10.5 10.5 0 0 1 5.5 14.25h1.75a8.75 8.75 0 0 0 17.5 0h1.75a10.5 10.5 0 0 1-9.625 10.5Zm-7-10.5V9a6.125 6.125 0 1 1 12.25 0v5.25a6.125 6.125 0 1 1-12.25 0Zm1.75 0a4.375 4.375 0 1 0 8.75 0V9a4.375 4.375 0 1 0-8.75 0v5.25Z"></path></svg>';
 
 export class IconMicrophoneLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconMicrophoneLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--microphoneLarge', '', null, 'IconMicrophoneLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--microphoneLarge', '', null, 'IconMicrophoneLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--microphoneLarge');
         this.root.append(svg);
     }