@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/icons/IconCalendarDay.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--calendarDay"><path d="M11.281 2.969V1.875H9.97v1.094H6.03V1.875H4.72v1.094H2.094v10.937h8.531a3.282 3.282 0 0 0 3.281-3.281V2.969h-2.625Zm1.313 7.656a1.969 1.969 0 0 1-1.969 1.969H3.406V4.28H4.72v1.094H6.03V4.281H9.97v1.094h1.312V4.281h1.313v6.344ZM8.219 7.344h2.187V9.53H8.22V7.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--calendarDay"><path d="M11.281 2.969V1.875H9.97v1.094H6.03V1.875H4.72v1.094H2.094v10.937h8.531a3.282 3.282 0 0 0 3.281-3.281V2.969h-2.625Zm1.313 7.656a1.969 1.969 0 0 1-1.969 1.969H3.406V4.28H4.72v1.094H6.03V4.281H9.97v1.094h1.312V4.281h1.313v6.344ZM8.219 7.344h2.187V9.53H8.22V7.344Z"></path></svg>';
 
 export class IconCalendarDay extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCalendarDay extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarDay', '', null, 'IconCalendarDay');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarDay', '', null, 'IconCalendarDay');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--calendarDay');
         this.root.append(svg);
     }

package/icons/IconCalendarDayLarge.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--calendarDayLarge"><path d="M22.125 6.375v-1.75h-1.75v1.75h-8.75v-1.75h-1.75v1.75h-5.25v21H23A4.375 4.375 0 0 0 27.375 23V6.375h-5.25ZM25.625 23A2.625 2.625 0 0 1 23 25.625H6.375v-17.5h3.5V9h1.75v-.875h8.75V9h1.75v-.875h3.5V23ZM16 19.5h7v-7h-7v7Zm1.75-5.25h3.5v3.5h-3.5v-3.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--calendarDayLarge"><path d="M22.125 6.375v-1.75h-1.75v1.75h-8.75v-1.75h-1.75v1.75h-5.25v21H23A4.375 4.375 0 0 0 27.375 23V6.375h-5.25ZM25.625 23A2.625 2.625 0 0 1 23 25.625H6.375v-17.5h3.5V9h1.75v-.875h8.75V9h1.75v-.875h3.5V23ZM16 19.5h7v-7h-7v7Zm1.75-5.25h3.5v3.5h-3.5v-3.5Z"></path></svg>';
 
 export class IconCalendarDayLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCalendarDayLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarDayLarge', '', null, 'IconCalendarDayLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarDayLarge', '', null, 'IconCalendarDayLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--calendarDayLarge');
         this.root.append(svg);
     }

package/icons/IconCalendarEdit.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--calendarEdit"><path d="m13.136 6.189.77.77v-3.99h-2.625V1.875H9.97v1.094H6.03V1.875H4.72v1.094H2.094v10.937h2.844l.008-.061.14-1.251h-1.68V4.28H4.72v1.094H6.03V4.281H9.97v1.094h1.312V4.281h1.313v1.392"></path><path d="m13.119 8-.875-.875a1.077 1.077 0 0 0-1.505 0l-3.92 3.867c-.17.18-.278.41-.306.657l-.263 2.336 2.336-.262c.247-.025.479-.133.656-.307l3.877-3.885a1.06 1.06 0 0 0 0-1.505V8Zm-4.752 4.375-.56-.56 2.573-2.572.56.56-2.572 2.572Z"></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--calendarEdit"><path d="m13.136 6.189.77.77v-3.99h-2.625V1.875H9.97v1.094H6.03V1.875H4.72v1.094H2.094v10.937h2.844l.008-.061.14-1.251h-1.68V4.28H4.72v1.094H6.03V4.281H9.97v1.094h1.312V4.281h1.313v1.392"></path><path d="m13.119 8-.875-.875a1.077 1.077 0 0 0-1.505 0l-3.92 3.867c-.17.18-.278.41-.306.657l-.263 2.336 2.336-.262c.247-.025.479-.133.656-.307l3.877-3.885a1.06 1.06 0 0 0 0-1.505V8Zm-4.752 4.375-.56-.56 2.573-2.572.56.56-2.572 2.572Z"></path></svg>';
 
 export class IconCalendarEdit extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCalendarEdit extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarEdit', '', null, 'IconCalendarEdit');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarEdit', '', null, 'IconCalendarEdit');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--calendarEdit');
         this.root.append(svg);
     }

package/icons/IconCalendarEditLarge.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--calendarEditLarge"><path d="M10.265 12.509h11.47l.872-1.746H9.393l.872 1.746Z"></path><path d="M6.364 25.566V8.11h3.491v.873h1.746V8.11h8.728v.873h1.746V8.11h3.491v3.954c.5.163.954.441 1.327.811l.419.472V6.364h-5.237V4.618h-1.746v1.746h-8.728V4.618H9.855v1.746H4.618v20.948h7.603l.192-1.746H6.364Z"></path><path d="m27.573 16.087-1.937-1.937a1.748 1.748 0 0 0-2.47 0l-8.274 8.274a1.745 1.745 0 0 0-.515 1.073l-.48 4.365 4.364-.48a1.869 1.869 0 0 0 1.073-.524l8.24-8.274a1.746 1.746 0 0 0 0-2.462v-.035Zm-5.498 1.624 1.937 1.937-5.944 5.918-2.199.253.253-2.19 5.953-5.918Zm4.233-.35-1.056 1.057-1.938-1.938 1.047-1.056 1.947 1.938Z"></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--calendarEditLarge"><path d="M10.265 12.509h11.47l.872-1.746H9.393l.872 1.746Z"></path><path d="M6.364 25.566V8.11h3.491v.873h1.746V8.11h8.728v.873h1.746V8.11h3.491v3.954c.5.163.954.441 1.327.811l.419.472V6.364h-5.237V4.618h-1.746v1.746h-8.728V4.618H9.855v1.746H4.618v20.948h7.603l.192-1.746H6.364Z"></path><path d="m27.573 16.087-1.937-1.937a1.748 1.748 0 0 0-2.47 0l-8.274 8.274a1.745 1.745 0 0 0-.515 1.073l-.48 4.365 4.364-.48a1.869 1.869 0 0 0 1.073-.524l8.24-8.274a1.746 1.746 0 0 0 0-2.462v-.035Zm-5.498 1.624 1.937 1.937-5.944 5.918-2.199.253.253-2.19 5.953-5.918Zm4.233-.35-1.056 1.057-1.938-1.938 1.047-1.056 1.947 1.938Z"></path></svg>';
 
 export class IconCalendarEditLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCalendarEditLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarEditLarge', '', null, 'IconCalendarEditLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarEditLarge', '', null, 'IconCalendarEditLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--calendarEditLarge');
         this.root.append(svg);
     }

package/icons/IconCalendarError.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--calendarError"><path d="M11.281 2.969V1.875H9.97v1.094H6.03V1.875H4.72v1.094H2.094v10.937h8.531a3.282 3.282 0 0 0 3.281-3.281V2.969h-2.625Zm1.313 7.656a1.969 1.969 0 0 1-1.969 1.969H3.406V4.28H4.72v1.094H6.03V4.281H9.97v1.094h1.312V4.281h1.313v6.344Z"></path><path d="m9.391 11.198.928-.928-3.712-3.713-.928.928 3.712 3.713Z"></path><path d="m10.323 7.484-.928-.928-3.713 3.712.928.928 3.713-3.712Z"></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--calendarError"><path d="M11.281 2.969V1.875H9.97v1.094H6.03V1.875H4.72v1.094H2.094v10.937h8.531a3.282 3.282 0 0 0 3.281-3.281V2.969h-2.625Zm1.313 7.656a1.969 1.969 0 0 1-1.969 1.969H3.406V4.28H4.72v1.094H6.03V4.281H9.97v1.094h1.312V4.281h1.313v6.344Z"></path><path d="m9.391 11.198.928-.928-3.712-3.713-.928.928 3.712 3.713Z"></path><path d="m10.323 7.484-.928-.928-3.713 3.712.928.928 3.713-3.712Z"></path></svg>';
 
 export class IconCalendarError extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCalendarError extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarError', '', null, 'IconCalendarError');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarError', '', null, 'IconCalendarError');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--calendarError');
         this.root.append(svg);
     }

package/icons/IconCalendarErrorLarge.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--calendarErrorLarge"><path d="M10.327 12.509h11.46l.873-1.746H9.454l.873 1.746Z"></path><path d="M22.075 6.364V4.618h-1.746v1.746h-8.728V4.618H9.855v1.746H4.618v20.948h18.33a4.364 4.364 0 0 0 4.364-4.364V6.364h-5.237Zm3.491 16.584a2.618 2.618 0 0 1-2.618 2.618H6.364V8.11h3.491v.873h1.746V8.11h8.728v.873h1.746V8.11h3.491v14.838Z"></path><path d="m19.77 16.244-1.23-1.239-2.776 2.775-2.775-2.775-1.24 1.24 2.776 2.775-2.776 2.776 1.24 1.23 2.775-2.775 2.776 2.775 1.23-1.23-2.775-2.776 2.775-2.776Z"></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--calendarErrorLarge"><path d="M10.327 12.509h11.46l.873-1.746H9.454l.873 1.746Z"></path><path d="M22.075 6.364V4.618h-1.746v1.746h-8.728V4.618H9.855v1.746H4.618v20.948h18.33a4.364 4.364 0 0 0 4.364-4.364V6.364h-5.237Zm3.491 16.584a2.618 2.618 0 0 1-2.618 2.618H6.364V8.11h3.491v.873h1.746V8.11h8.728v.873h1.746V8.11h3.491v14.838Z"></path><path d="m19.77 16.244-1.23-1.239-2.776 2.775-2.775-2.775-1.24 1.24 2.776 2.775-2.776 2.776 1.24 1.23 2.775-2.775 2.776 2.775 1.23-1.23-2.775-2.776 2.775-2.776Z"></path></svg>';
 
 export class IconCalendarErrorLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCalendarErrorLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarErrorLarge', '', null, 'IconCalendarErrorLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarErrorLarge', '', null, 'IconCalendarErrorLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--calendarErrorLarge');
         this.root.append(svg);
     }

package/icons/IconCalendarFilled.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--calendarFilled"><path d="M11.281 2.969V1.875H9.97v1.094H6.03V1.875H4.72v1.094H2.094v10.937h8.531a3.282 3.282 0 0 0 3.281-3.281V2.969h-2.625ZM5.261 7.78 4.605 6.47h6.842l-.656 1.312h-5.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--calendarFilled"><path d="M11.281 2.969V1.875H9.97v1.094H6.03V1.875H4.72v1.094H2.094v10.937h8.531a3.282 3.282 0 0 0 3.281-3.281V2.969h-2.625ZM5.261 7.78 4.605 6.47h6.842l-.656 1.312h-5.53Z"></path></svg>';
 
 export class IconCalendarFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCalendarFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarFilled', '', null, 'IconCalendarFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarFilled', '', null, 'IconCalendarFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--calendarFilled');
         this.root.append(svg);
     }

package/icons/IconCalendarFilledLarge.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--calendarFilledLarge"><path d="M22.125 6.375V9h-1.75V6.375h-8.75V9h-1.75V6.375h-5.25v21H23A4.375 4.375 0 0 0 27.375 23V6.375h-5.25ZM15.799 19.5h-.875v-1.488h.831c.787 0 1.225-.393 1.225-.962s-.63-.963-1.286-.963a2.343 2.343 0 0 0-1.689.736l-1.024-1.164a3.71 3.71 0 0 1 2.853-1.112c1.75 0 2.931 1.024 2.931 2.31a2.012 2.012 0 0 1-1.199 1.82 2.048 2.048 0 0 1 1.514 1.952c0 1.365-1.172 2.423-3.281 2.423a3.85 3.85 0 0 1-2.966-1.084l1.023-1.182a2.562 2.562 0 0 0 1.829.726c.98 0 1.601-.376 1.601-1.058 0-.683-.604-.954-1.487-.954Zm6.877-8.75-.875 1.75H10.313l-.876-1.75h13.24Z"></path><path d="M11.625 4.625h-1.75v1.75h1.75v-1.75Z"></path><path d="M22.125 4.625h-1.75v1.75h1.75v-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--calendarFilledLarge"><path d="M22.125 6.375V9h-1.75V6.375h-8.75V9h-1.75V6.375h-5.25v21H23A4.375 4.375 0 0 0 27.375 23V6.375h-5.25ZM15.799 19.5h-.875v-1.488h.831c.787 0 1.225-.393 1.225-.962s-.63-.963-1.286-.963a2.343 2.343 0 0 0-1.689.736l-1.024-1.164a3.71 3.71 0 0 1 2.853-1.112c1.75 0 2.931 1.024 2.931 2.31a2.012 2.012 0 0 1-1.199 1.82 2.048 2.048 0 0 1 1.514 1.952c0 1.365-1.172 2.423-3.281 2.423a3.85 3.85 0 0 1-2.966-1.084l1.023-1.182a2.562 2.562 0 0 0 1.829.726c.98 0 1.601-.376 1.601-1.058 0-.683-.604-.954-1.487-.954Zm6.877-8.75-.875 1.75H10.313l-.876-1.75h13.24Z"></path><path d="M11.625 4.625h-1.75v1.75h1.75v-1.75Z"></path><path d="M22.125 4.625h-1.75v1.75h1.75v-1.75Z"></path></svg>';
 
 export class IconCalendarFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCalendarFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarFilledLarge', '', null, 'IconCalendarFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarFilledLarge', '', null, 'IconCalendarFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--calendarFilledLarge');
         this.root.append(svg);
     }

package/icons/IconCalendarLarge.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--calendarLarge"><path d="M17.593 18.677a2.013 2.013 0 0 0 1.198-1.802c0-1.286-1.198-2.301-2.931-2.301a3.728 3.728 0 0 0-2.852 1.111l1.023 1.155a2.336 2.336 0 0 1 1.689-.726c.656 0 1.286.271 1.286.953 0 .683-.437.963-1.225.963h-.831v1.47h.875c.875 0 1.514.324 1.514.989s-.621 1.067-1.601 1.067a2.571 2.571 0 0 1-1.83-.735l-1.023 1.181a3.85 3.85 0 0 0 2.966 1.085c2.109 0 3.281-1.058 3.281-2.415a2.056 2.056 0 0 0-1.54-1.995Z"></path><path d="M10.313 12.5H21.8l.875-1.75H9.438l.874 1.75Z"></path><path d="M22.125 6.375v-1.75h-1.75v1.75h-8.75v-1.75h-1.75v1.75h-5.25v21H23A4.375 4.375 0 0 0 27.375 23V6.375h-5.25ZM25.625 23A2.625 2.625 0 0 1 23 25.625H6.375v-17.5h3.5V9h1.75v-.875h8.75V9h1.75v-.875h3.5V23Z"></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--calendarLarge"><path d="M17.593 18.677a2.013 2.013 0 0 0 1.198-1.802c0-1.286-1.198-2.301-2.931-2.301a3.728 3.728 0 0 0-2.852 1.111l1.023 1.155a2.336 2.336 0 0 1 1.689-.726c.656 0 1.286.271 1.286.953 0 .683-.437.963-1.225.963h-.831v1.47h.875c.875 0 1.514.324 1.514.989s-.621 1.067-1.601 1.067a2.571 2.571 0 0 1-1.83-.735l-1.023 1.181a3.85 3.85 0 0 0 2.966 1.085c2.109 0 3.281-1.058 3.281-2.415a2.056 2.056 0 0 0-1.54-1.995Z"></path><path d="M10.313 12.5H21.8l.875-1.75H9.438l.874 1.75Z"></path><path d="M22.125 6.375v-1.75h-1.75v1.75h-8.75v-1.75h-1.75v1.75h-5.25v21H23A4.375 4.375 0 0 0 27.375 23V6.375h-5.25ZM25.625 23A2.625 2.625 0 0 1 23 25.625H6.375v-17.5h3.5V9h1.75v-.875h8.75V9h1.75v-.875h3.5V23Z"></path></svg>';
 
 export class IconCalendarLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCalendarLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarLarge', '', null, 'IconCalendarLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarLarge', '', null, 'IconCalendarLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--calendarLarge');
         this.root.append(svg);
     }

package/icons/IconCalendarRepeat.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--calendarRepeat"><path d="M11.281 2.969V1.875H9.97v1.094H6.03V1.875H4.72v1.094H2.094v10.937h8.531a3.282 3.282 0 0 0 3.281-3.281V2.969h-2.625Zm1.313 7.656a1.969 1.969 0 0 1-1.969 1.969H3.406V4.28h9.188v6.344Zm-7.42-3.43L4.22 6.74l2.783-1.549.323 3.045-.971-.464c-.08.213-.115.439-.105.665a1.75 1.75 0 1 0 2.249-1.75L8.84 5.42a3.097 3.097 0 1 1-3.64 1.75l-.026.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--calendarRepeat"><path d="M11.281 2.969V1.875H9.97v1.094H6.03V1.875H4.72v1.094H2.094v10.937h8.531a3.282 3.282 0 0 0 3.281-3.281V2.969h-2.625Zm1.313 7.656a1.969 1.969 0 0 1-1.969 1.969H3.406V4.28h9.188v6.344Zm-7.42-3.43L4.22 6.74l2.783-1.549.323 3.045-.971-.464c-.08.213-.115.439-.105.665a1.75 1.75 0 1 0 2.249-1.75L8.84 5.42a3.097 3.097 0 1 1-3.64 1.75l-.026.026Z"></path></svg>';
 
 export class IconCalendarRepeat extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCalendarRepeat extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarRepeat', '', null, 'IconCalendarRepeat');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarRepeat', '', null, 'IconCalendarRepeat');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--calendarRepeat');
         this.root.append(svg);
     }

package/icons/IconCalendarRepeatLarge.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--calendarRepeatLarge"><path d="M22.125 6.375v-1.75h-1.75v1.75h-8.75v-1.75h-1.75v1.75h-5.25v21H23A4.375 4.375 0 0 0 27.375 23V6.375h-5.25ZM25.625 23A2.625 2.625 0 0 1 23 25.625H6.375v-17.5h3.5V9h1.75v-.875h8.75V9h1.75v-.875h3.5V23Zm-3.938-5.688a5.688 5.688 0 1 1-10.727-2.625l-1.383.438L9 13.506l4.375-1.54 1.531 4.375-1.645.578-.612-1.75a3.902 3.902 0 0 0-.613 2.1A3.937 3.937 0 1 0 16 13.375v-1.75a5.696 5.696 0 0 1 5.688 5.688Z"></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--calendarRepeatLarge"><path d="M22.125 6.375v-1.75h-1.75v1.75h-8.75v-1.75h-1.75v1.75h-5.25v21H23A4.375 4.375 0 0 0 27.375 23V6.375h-5.25ZM25.625 23A2.625 2.625 0 0 1 23 25.625H6.375v-17.5h3.5V9h1.75v-.875h8.75V9h1.75v-.875h3.5V23Zm-3.938-5.688a5.688 5.688 0 1 1-10.727-2.625l-1.383.438L9 13.506l4.375-1.54 1.531 4.375-1.645.578-.612-1.75a3.902 3.902 0 0 0-.613 2.1A3.937 3.937 0 1 0 16 13.375v-1.75a5.696 5.696 0 0 1 5.688 5.688Z"></path></svg>';
 
 export class IconCalendarRepeatLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCalendarRepeatLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarRepeatLarge', '', null, 'IconCalendarRepeatLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarRepeatLarge', '', null, 'IconCalendarRepeatLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--calendarRepeatLarge');
         this.root.append(svg);
     }

package/icons/IconCalendarStar.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--calendarStar"><path d="M11.281 3.083V1.989H9.97v1.094H6.03V1.989H4.72v1.094H2.094V14.02h8.531a3.29 3.29 0 0 0 3.281-3.281V3.083h-2.625Zm1.313 7.656a1.969 1.969 0 0 1-1.969 1.968H3.406V4.396H4.72v1.094H6.03V4.395H9.97v1.094h1.312V4.395h1.313v6.344Z"></path><path d="m9.75 11.561-1.662-.875a.167.167 0 0 0-.158 0l-1.662.875.306-1.811a.184.184 0 0 0-.053-.157L5.183 8.245 7.037 8a.184.184 0 0 0 .132-.096L8 6.189l.875 1.689A.184.184 0 0 0 8.963 8l1.855.271-1.34 1.278a.184.184 0 0 0-.052.157l.324 1.855Z"></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--calendarStar"><path d="M11.281 3.083V1.989H9.97v1.094H6.03V1.989H4.72v1.094H2.094V14.02h8.531a3.29 3.29 0 0 0 3.281-3.281V3.083h-2.625Zm1.313 7.656a1.969 1.969 0 0 1-1.969 1.968H3.406V4.396H4.72v1.094H6.03V4.395H9.97v1.094h1.312V4.395h1.313v6.344Z"></path><path d="m9.75 11.561-1.662-.875a.167.167 0 0 0-.158 0l-1.662.875.306-1.811a.184.184 0 0 0-.053-.157L5.183 8.245 7.037 8a.184.184 0 0 0 .132-.096L8 6.189l.875 1.689A.184.184 0 0 0 8.963 8l1.855.271-1.34 1.278a.184.184 0 0 0-.052.157l.324 1.855Z"></path></svg>';
 
 export class IconCalendarStar extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCalendarStar extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarStar', '', null, 'IconCalendarStar');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarStar', '', null, 'IconCalendarStar');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--calendarStar');
         this.root.append(svg);
     }

package/icons/IconCalendarStarLarge.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--calendarStarLarge"><path d="M10.327 12.509h11.46l.873-1.746H9.454l.873 1.746Z"></path><path d="M22.075 6.364V4.618h-1.746v1.746h-8.728V4.618H9.855v1.746H4.618v20.948h18.33a4.364 4.364 0 0 0 4.364-4.364V6.364h-5.237Zm3.491 16.584a2.618 2.618 0 0 1-2.618 2.618H6.364V8.11h3.491v.873h1.746V8.11h8.728v.873h1.746V8.11h3.491v14.838Z"></path><path d="M21.071 17.938a.872.872 0 0 0-.698-.594l-2.479-.358-1.117-2.243a.873.873 0 0 0-1.563 0l-1.108 2.243-2.505.358a.872.872 0 0 0-.489 1.493l1.798 1.745-.419 2.47a.872.872 0 0 0 .34.873c.15.109.33.167.516.166a.976.976 0 0 0 .41-.096l2.208-1.187 2.217 1.17a.873.873 0 0 0 1.274-.926l-.419-2.47 1.79-1.745a.873.873 0 0 0 .244-.9Zm-3.561 1.745a.873.873 0 0 0-.245.768l.201 1.187-1.065-.558a.873.873 0 0 0-.811 0l-1.056.558.2-1.187a.872.872 0 0 0-.253-.768l-.873-.872 1.188-.175a.873.873 0 0 0 .654-.471l.515-1.065.524 1.073a.872.872 0 0 0 .663.472l1.178.174-.82.864Z"></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--calendarStarLarge"><path d="M10.327 12.509h11.46l.873-1.746H9.454l.873 1.746Z"></path><path d="M22.075 6.364V4.618h-1.746v1.746h-8.728V4.618H9.855v1.746H4.618v20.948h18.33a4.364 4.364 0 0 0 4.364-4.364V6.364h-5.237Zm3.491 16.584a2.618 2.618 0 0 1-2.618 2.618H6.364V8.11h3.491v.873h1.746V8.11h8.728v.873h1.746V8.11h3.491v14.838Z"></path><path d="M21.071 17.938a.872.872 0 0 0-.698-.594l-2.479-.358-1.117-2.243a.873.873 0 0 0-1.563 0l-1.108 2.243-2.505.358a.872.872 0 0 0-.489 1.493l1.798 1.745-.419 2.47a.872.872 0 0 0 .34.873c.15.109.33.167.516.166a.976.976 0 0 0 .41-.096l2.208-1.187 2.217 1.17a.873.873 0 0 0 1.274-.926l-.419-2.47 1.79-1.745a.873.873 0 0 0 .244-.9Zm-3.561 1.745a.873.873 0 0 0-.245.768l.201 1.187-1.065-.558a.873.873 0 0 0-.811 0l-1.056.558.2-1.187a.872.872 0 0 0-.253-.768l-.873-.872 1.188-.175a.873.873 0 0 0 .654-.471l.515-1.065.524 1.073a.872.872 0 0 0 .663.472l1.178.174-.82.864Z"></path></svg>';
 
 export class IconCalendarStarLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCalendarStarLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarStarLarge', '', null, 'IconCalendarStarLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--calendarStarLarge', '', null, 'IconCalendarStarLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--calendarStarLarge');
         this.root.append(svg);
     }

package/icons/IconCamera.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--camera"><path d="M8 4.719a2.844 2.844 0 1 0 2.844 2.844A2.853 2.853 0 0 0 8 4.719Zm0 4.375a1.531 1.531 0 1 1 1.531-1.531A1.54 1.54 0 0 1 8 9.093Zm5.617-5.469a24.668 24.668 0 0 0-2.318-.437l-.455-1.05a1.532 1.532 0 0 0-1.409-.92h-2.87a1.531 1.531 0 0 0-1.409.928l-.455 1.05a24.84 24.84 0 0 0-2.301.438A1.523 1.523 0 0 0 1.219 5.12V11.5a1.54 1.54 0 0 0 1.531 1.531h10.5a1.54 1.54 0 0 0 1.531-1.531V5.121a1.532 1.532 0 0 0-1.164-1.496ZM13.47 11.5a.219.219 0 0 1-.219.219H2.75a.219.219 0 0 1-.219-.219V5.121a.219.219 0 0 1 .166-.21 22.69 22.69 0 0 1 2.538-.463h.376l.753-1.75a.219.219 0 0 1 .201-.132h2.87a.219.219 0 0 1 .201.132l.753 1.75h.376c.856.11 1.706.264 2.546.463a.227.227 0 0 1 .158.21V11.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 16 16" class="c-pieIcon c-pieIcon--camera"><path d="M8 4.719a2.844 2.844 0 1 0 2.844 2.844A2.853 2.853 0 0 0 8 4.719Zm0 4.375a1.531 1.531 0 1 1 1.531-1.531A1.54 1.54 0 0 1 8 9.093Zm5.617-5.469a24.668 24.668 0 0 0-2.318-.437l-.455-1.05a1.532 1.532 0 0 0-1.409-.92h-2.87a1.531 1.531 0 0 0-1.409.928l-.455 1.05a24.84 24.84 0 0 0-2.301.438A1.523 1.523 0 0 0 1.219 5.12V11.5a1.54 1.54 0 0 0 1.531 1.531h10.5a1.54 1.54 0 0 0 1.531-1.531V5.121a1.532 1.532 0 0 0-1.164-1.496ZM13.47 11.5a.219.219 0 0 1-.219.219H2.75a.219.219 0 0 1-.219-.219V5.121a.219.219 0 0 1 .166-.21 22.69 22.69 0 0 1 2.538-.463h.376l.753-1.75a.219.219 0 0 1 .201-.132h2.87a.219.219 0 0 1 .201.132l.753 1.75h.376c.856.11 1.706.264 2.546.463a.227.227 0 0 1 .158.21V11.5Z"></path></svg>';
 
 export class IconCamera extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCamera extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--camera', '', null, 'IconCamera');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--camera', '', null, 'IconCamera');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--camera');
         this.root.append(svg);
     }

package/icons/IconCameraLarge.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--cameraLarge"><path d="M16 9.875a6.125 6.125 0 1 0 0 12.25 6.125 6.125 0 0 0 0-12.25Zm0 10.5a4.375 4.375 0 1 1 0-8.75 4.375 4.375 0 0 1 0 8.75ZM27.13 8.571a48.657 48.657 0 0 0-4.839-.875L21.25 5.343a2.625 2.625 0 0 0-2.371-1.593H13.12a2.625 2.625 0 0 0-2.371 1.593L9.709 7.67c-1.618.21-3.224.502-4.813.875a2.625 2.625 0 0 0-2.021 2.581v12.749A2.625 2.625 0 0 0 5.5 26.5h21a2.625 2.625 0 0 0 2.625-2.625V11.126a2.625 2.625 0 0 0-1.995-2.555Zm.245 15.304a.875.875 0 0 1-.875.875h-21a.875.875 0 0 1-.875-.875V11.126a.875.875 0 0 1 .674-.875 47.237 47.237 0 0 1 5.127-.91l.499-.061 1.391-3.246a.875.875 0 0 1 .805-.534h5.758a.875.875 0 0 1 .805.534l1.391 3.246.499.061c1.73.214 3.448.524 5.145.928a.875.875 0 0 1 .656.875v12.731Z"></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--cameraLarge"><path d="M16 9.875a6.125 6.125 0 1 0 0 12.25 6.125 6.125 0 0 0 0-12.25Zm0 10.5a4.375 4.375 0 1 1 0-8.75 4.375 4.375 0 0 1 0 8.75ZM27.13 8.571a48.657 48.657 0 0 0-4.839-.875L21.25 5.343a2.625 2.625 0 0 0-2.371-1.593H13.12a2.625 2.625 0 0 0-2.371 1.593L9.709 7.67c-1.618.21-3.224.502-4.813.875a2.625 2.625 0 0 0-2.021 2.581v12.749A2.625 2.625 0 0 0 5.5 26.5h21a2.625 2.625 0 0 0 2.625-2.625V11.126a2.625 2.625 0 0 0-1.995-2.555Zm.245 15.304a.875.875 0 0 1-.875.875h-21a.875.875 0 0 1-.875-.875V11.126a.875.875 0 0 1 .674-.875 47.237 47.237 0 0 1 5.127-.91l.499-.061 1.391-3.246a.875.875 0 0 1 .805-.534h5.758a.875.875 0 0 1 .805.534l1.391 3.246.499.061c1.73.214 3.448.524 5.145.928a.875.875 0 0 1 .656.875v12.731Z"></path></svg>';
 
 export class IconCameraLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCameraLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--cameraLarge', '', null, 'IconCameraLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--cameraLarge', '', null, 'IconCameraLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--cameraLarge');
         this.root.append(svg);
     }

package/icons/IconCar.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--car"><path d="M6 9H4.5v1H6V9Z"></path><path d="M11.5 9H10v1h1.5V9Z"></path><path fill-rule="evenodd" d="M14.895 6.906h-1.4l.28.648c.088.207.132.43.131.656v5.04h-1.312v-1.479a27.513 27.513 0 0 1-9.188 0v1.479H2.094V8.21a1.662 1.662 0 0 1 .131-.656l.28-.648h-1.4l.665-1.312h1.225l.499-1.969A1.435 1.435 0 0 1 4.5 2.575c2.29-.634 4.71-.634 7 0a1.435 1.435 0 0 1 1.006 1.05l.499 1.969h1.225l.665 1.312ZM4.85 3.835a.21.21 0 0 0-.088.131l-.56 2.162c2.51.446 5.078.446 7.587 0l-.551-2.162a.21.21 0 0 0-.088-.131 11.848 11.848 0 0 0-6.3 0Zm7.787 6.597v-.595l-.07-1.627a.359.359 0 0 0 0-.14l-.297-.7A22.084 22.084 0 0 1 8 7.781c-1.427 0-2.852-.137-4.253-.411l-.297.7a.359.359 0 0 0 0 .14v2.222h.079c2.99.525 6.048.525 9.039 0h.07Z" 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--car"><path d="M6 9H4.5v1H6V9Z"></path><path d="M11.5 9H10v1h1.5V9Z"></path><path fill-rule="evenodd" d="M14.895 6.906h-1.4l.28.648c.088.207.132.43.131.656v5.04h-1.312v-1.479a27.513 27.513 0 0 1-9.188 0v1.479H2.094V8.21a1.662 1.662 0 0 1 .131-.656l.28-.648h-1.4l.665-1.312h1.225l.499-1.969A1.435 1.435 0 0 1 4.5 2.575c2.29-.634 4.71-.634 7 0a1.435 1.435 0 0 1 1.006 1.05l.499 1.969h1.225l.665 1.312ZM4.85 3.835a.21.21 0 0 0-.088.131l-.56 2.162c2.51.446 5.078.446 7.587 0l-.551-2.162a.21.21 0 0 0-.088-.131 11.848 11.848 0 0 0-6.3 0Zm7.787 6.597v-.595l-.07-1.627a.359.359 0 0 0 0-.14l-.297-.7A22.084 22.084 0 0 1 8 7.781c-1.427 0-2.852-.137-4.253-.411l-.297.7a.359.359 0 0 0 0 .14v2.222h.079c2.99.525 6.048.525 9.039 0h.07Z" clip-rule="evenodd"></path></svg>';
 
 export class IconCar extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCar extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--car', '', null, 'IconCar');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--car', '', null, 'IconCar');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--car');
         this.root.append(svg);
     }

package/icons/IconCarClock.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--carClock"><path d="M13.495 6.906h1.4l-.665-1.312h-1.225l-.499-1.969a1.434 1.434 0 0 0-1.006-1.05 13.125 13.125 0 0 0-7 0 1.435 1.435 0 0 0-1.006 1.05l-.499 1.969H1.77l-.665 1.312h1.4l-.28.648c-.088.207-.132.43-.131.656v5.04h1.312v-1.479a27.515 27.515 0 0 0 9.188 0v1.479h1.312V8.21a1.662 1.662 0 0 0-.131-.656l-.28-.648Zm-.875 2.932v.595h-.07c-2.99.524-6.049.524-9.039 0h-.079V8.21a.359.359 0 0 1 0-.14l.298-.7.472-1.242.56-2.162a.21.21 0 0 1 .088-.131 11.848 11.848 0 0 1 6.3 0 .21.21 0 0 1 .088.131l.55 2.162.482 1.242.298.7c.009.046.009.094 0 .14l.052 1.627Z"></path><path d="M8.656 7.589V5.375H7.344v2.94l.901.56 1.094.674.682-1.12-1.365-.84Z"></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--carClock"><path d="M13.495 6.906h1.4l-.665-1.312h-1.225l-.499-1.969a1.434 1.434 0 0 0-1.006-1.05 13.125 13.125 0 0 0-7 0 1.435 1.435 0 0 0-1.006 1.05l-.499 1.969H1.77l-.665 1.312h1.4l-.28.648c-.088.207-.132.43-.131.656v5.04h1.312v-1.479a27.515 27.515 0 0 0 9.188 0v1.479h1.312V8.21a1.662 1.662 0 0 0-.131-.656l-.28-.648Zm-.875 2.932v.595h-.07c-2.99.524-6.049.524-9.039 0h-.079V8.21a.359.359 0 0 1 0-.14l.298-.7.472-1.242.56-2.162a.21.21 0 0 1 .088-.131 11.848 11.848 0 0 1 6.3 0 .21.21 0 0 1 .088.131l.55 2.162.482 1.242.298.7c.009.046.009.094 0 .14l.052 1.627Z"></path><path d="M8.656 7.589V5.375H7.344v2.94l.901.56 1.094.674.682-1.12-1.365-.84Z"></path></svg>';
 
 export class IconCarClock extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCarClock extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--carClock', '', null, 'IconCarClock');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--carClock', '', null, 'IconCarClock');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--carClock');
         this.root.append(svg);
     }

package/icons/IconCarClockLarge.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--carClockLarge"><path d="M10.75 17.75h-3.5v1.75h3.5v-1.75Z"></path><path d="M24.75 17.75h-3.5v1.75h3.5v-1.75Z"></path><path d="M26.5 22.003a.99.99 0 0 1-.499.21c-3.307.53-6.652.793-10.001.787a63.8 63.8 0 0 1-9.984-.788 1.085 1.085 0 0 1-.516-.21v-5.59c-.002-.151.028-.3.088-.438l.734-1.75c3.193.59 6.432.892 9.678.901h.157a8.994 8.994 0 0 1-1.268-1.75 51.692 51.692 0 0 1-7.875-.77L8.23 7.827a.761.761 0 0 1 .473-.577 28.761 28.761 0 0 1 5.547-.814c.183-.632.442-1.24.77-1.811-2.293.082-4.57.398-6.799.945a2.494 2.494 0 0 0-1.689 1.829l-.857 3.351H3.313l-.876 1.75h2.74l-1.2 2.783c-.15.357-.227.74-.227 1.128V26.5H5.5v-2.625l.21.052c3.403.541 6.844.816 10.29.823a63.94 63.94 0 0 0 10.308-.814l.192-.061V26.5h1.75V16.411c0-.179-.018-.358-.052-.534a8.186 8.186 0 0 1-1.698 1.13v4.995Z"></path><path d="M23.438 5.334h-1.75v4.454l3.237 1.977.901-1.523-2.389-1.46V5.333Z"></path><path d="M22.563 2.219a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm0 12.25a5.25 5.25 0 1 1 0-10.5 5.25 5.25 0 0 1 0 10.5Z"></path><path d="M23.438 5.5h-1.75v4.393l3.237 1.942.901-1.505-2.389-1.435V5.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--carClockLarge"><path d="M10.75 17.75h-3.5v1.75h3.5v-1.75Z"></path><path d="M24.75 17.75h-3.5v1.75h3.5v-1.75Z"></path><path d="M26.5 22.003a.99.99 0 0 1-.499.21c-3.307.53-6.652.793-10.001.787a63.8 63.8 0 0 1-9.984-.788 1.085 1.085 0 0 1-.516-.21v-5.59c-.002-.151.028-.3.088-.438l.734-1.75c3.193.59 6.432.892 9.678.901h.157a8.994 8.994 0 0 1-1.268-1.75 51.692 51.692 0 0 1-7.875-.77L8.23 7.827a.761.761 0 0 1 .473-.577 28.761 28.761 0 0 1 5.547-.814c.183-.632.442-1.24.77-1.811-2.293.082-4.57.398-6.799.945a2.494 2.494 0 0 0-1.689 1.829l-.857 3.351H3.313l-.876 1.75h2.74l-1.2 2.783c-.15.357-.227.74-.227 1.128V26.5H5.5v-2.625l.21.052c3.403.541 6.844.816 10.29.823a63.94 63.94 0 0 0 10.308-.814l.192-.061V26.5h1.75V16.411c0-.179-.018-.358-.052-.534a8.186 8.186 0 0 1-1.698 1.13v4.995Z"></path><path d="M23.438 5.334h-1.75v4.454l3.237 1.977.901-1.523-2.389-1.46V5.333Z"></path><path d="M22.563 2.219a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm0 12.25a5.25 5.25 0 1 1 0-10.5 5.25 5.25 0 0 1 0 10.5Z"></path><path d="M23.438 5.5h-1.75v4.393l3.237 1.942.901-1.505-2.389-1.435V5.5Z"></path></svg>';
 
 export class IconCarClockLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCarClockLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--carClockLarge', '', null, 'IconCarClockLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--carClockLarge', '', null, 'IconCarClockLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--carClockLarge');
         this.root.append(svg);
     }

package/icons/IconCarLarge.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--carLarge"><path d="M10.75 17.75h-3.5v1.75h3.5v-1.75Z"></path><path d="M26.824 12.5h2.738l-.875-1.75h-2.362l-.875-3.351a2.493 2.493 0 0 0-1.689-1.829A33.645 33.645 0 0 0 16 4.625c-2.62.01-5.232.328-7.779.945a2.494 2.494 0 0 0-1.689 1.829l-.857 3.351H3.313l-.876 1.75h2.74l-1.2 2.783c-.15.357-.227.74-.227 1.128V26.5H5.5v-2.625l.21.052c3.403.541 6.844.816 10.29.823a63.94 63.94 0 0 0 10.308-.814l.192-.061V26.5h1.75V16.411c0-.387-.078-.771-.227-1.129l-1.2-2.782ZM8.23 7.827a.761.761 0 0 1 .473-.577A31.168 31.168 0 0 1 16 6.375c2.459.003 4.908.297 7.297.875a.76.76 0 0 1 .473.569l1.225 4.76c-2.97.516-5.98.782-8.995.796a52.5 52.5 0 0 1-9.004-.779L8.23 7.827ZM26.5 22.003a.99.99 0 0 1-.499.21c-3.307.53-6.652.794-10.001.788a63.8 63.8 0 0 1-9.984-.788 1.085 1.085 0 0 1-.516-.21v-5.59c-.002-.151.028-.3.088-.438l.734-1.75c3.193.59 6.432.892 9.678.901a56.879 56.879 0 0 0 9.677-.875l.736 1.75c.06.138.09.287.087.438v5.565Z"></path><path d="M24.75 17.75h-3.5v1.75h3.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--carLarge"><path d="M10.75 17.75h-3.5v1.75h3.5v-1.75Z"></path><path d="M26.824 12.5h2.738l-.875-1.75h-2.362l-.875-3.351a2.493 2.493 0 0 0-1.689-1.829A33.645 33.645 0 0 0 16 4.625c-2.62.01-5.232.328-7.779.945a2.494 2.494 0 0 0-1.689 1.829l-.857 3.351H3.313l-.876 1.75h2.74l-1.2 2.783c-.15.357-.227.74-.227 1.128V26.5H5.5v-2.625l.21.052c3.403.541 6.844.816 10.29.823a63.94 63.94 0 0 0 10.308-.814l.192-.061V26.5h1.75V16.411c0-.387-.078-.771-.227-1.129l-1.2-2.782ZM8.23 7.827a.761.761 0 0 1 .473-.577A31.168 31.168 0 0 1 16 6.375c2.459.003 4.908.297 7.297.875a.76.76 0 0 1 .473.569l1.225 4.76c-2.97.516-5.98.782-8.995.796a52.5 52.5 0 0 1-9.004-.779L8.23 7.827ZM26.5 22.003a.99.99 0 0 1-.499.21c-3.307.53-6.652.794-10.001.788a63.8 63.8 0 0 1-9.984-.788 1.085 1.085 0 0 1-.516-.21v-5.59c-.002-.151.028-.3.088-.438l.734-1.75c3.193.59 6.432.892 9.678.901a56.879 56.879 0 0 0 9.677-.875l.736 1.75c.06.138.09.287.087.438v5.565Z"></path><path d="M24.75 17.75h-3.5v1.75h3.5v-1.75Z"></path></svg>';
 
 export class IconCarLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCarLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--carLarge', '', null, 'IconCarLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--carLarge', '', null, 'IconCarLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--carLarge');
         this.root.append(svg);
     }

package/icons/IconCaretDown.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--caretDown"><path d="M11.92 3.713H4.045a1.313 1.313 0 0 0-1.041 2.056l4.051 5.941a1.321 1.321 0 0 0 1.085.577 1.312 1.312 0 0 0 1.085-.612l3.763-5.897a1.25 1.25 0 0 0 .16-1.26 1.312 1.312 0 0 0-1.228-.805Zm-3.78 7.262-4.06-5.95h7.875l-3.815 5.95Z"></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--caretDown"><path d="M11.92 3.713H4.045a1.313 1.313 0 0 0-1.041 2.056l4.051 5.941a1.321 1.321 0 0 0 1.085.577 1.312 1.312 0 0 0 1.085-.612l3.763-5.897a1.25 1.25 0 0 0 .16-1.26 1.312 1.312 0 0 0-1.228-.805Zm-3.78 7.262-4.06-5.95h7.875l-3.815 5.95Z"></path></svg>';
 
 export class IconCaretDown extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCaretDown extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--caretDown', '', null, 'IconCaretDown');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--caretDown', '', null, 'IconCaretDown');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--caretDown');
         this.root.append(svg);
     }