@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/icons/IconEyeOffFilled.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--eyeOffFilled"><path d="m12.542 5.375-.928.928-1.251 1.242c.028.15.042.302.044.455A2.424 2.424 0 0 1 8 10.406a2.621 2.621 0 0 1-.455-.043L5.997 11.91l-.49.464A5.25 5.25 0 0 0 8 13.031a5.398 5.398 0 0 0 4.017-1.82L14.939 8l-2.397-2.625Z"></path><path d="m6.793 9.26.463-.464a1.111 1.111 0 0 0 1.514 0A1.068 1.068 0 0 0 9.094 8a1.111 1.111 0 0 0-.298-.744l.464-.463.49-.464.945-.954.945-.945 2.485-2.555h-1.803l-1.75 1.75a5.329 5.329 0 0 0-4.774-.175c-.692.314-1.31.77-1.814 1.339L1.07 8l2.441 2.686L1 13.25h1.803l2.082-2.082.49-.473.954-.945.464-.49ZM5.593 8a2.38 2.38 0 0 1 .71-1.697 2.45 2.45 0 0 1 2.222-.63l-.586.577-2.284 2.284A2.179 2.179 0 0 1 5.594 8Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--eyeOffFilled"><path d="m12.542 5.375-.928.928-1.251 1.242c.028.15.042.302.044.455A2.424 2.424 0 0 1 8 10.406a2.621 2.621 0 0 1-.455-.043L5.997 11.91l-.49.464A5.25 5.25 0 0 0 8 13.031a5.398 5.398 0 0 0 4.017-1.82L14.939 8l-2.397-2.625Z"></path><path d="m6.793 9.26.463-.464a1.111 1.111 0 0 0 1.514 0A1.068 1.068 0 0 0 9.094 8a1.111 1.111 0 0 0-.298-.744l.464-.463.49-.464.945-.954.945-.945 2.485-2.555h-1.803l-1.75 1.75a5.329 5.329 0 0 0-4.774-.175c-.692.314-1.31.77-1.814 1.339L1.07 8l2.441 2.686L1 13.25h1.803l2.082-2.082.49-.473.954-.945.464-.49ZM5.593 8a2.38 2.38 0 0 1 .71-1.697 2.45 2.45 0 0 1 2.222-.63l-.586.577-2.284 2.284A2.179 2.179 0 0 1 5.594 8Z"></path></svg>';
 
 export class IconEyeOffFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconEyeOffFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--eyeOffFilled', '', null, 'IconEyeOffFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--eyeOffFilled', '', null, 'IconEyeOffFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--eyeOffFilled');
         this.root.append(svg);
     }

package/icons/IconEyeOffFilledLarge.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--eyeOffFilledLarge"><path d="m24.82 10.899-.621.612-3.491 3.492c.07.327.105.662.105.997A4.821 4.821 0 0 1 16 20.813a4.71 4.71 0 0 1-.997-.105l-2.205 2.213-.692.683-.665.665a11.323 11.323 0 0 0 12.583-2.363L29.92 16l-5.1-5.101Z"></path><path d="m18.958 16.753-2.205 2.204a3.064 3.064 0 0 0 2.205-2.204Z"></path><path d="m13.909 19.325.647-.639 4.13-4.13.64-.647.638-.63 2.362-2.363.613-.621.621-.613L27.743 5.5h-2.477L22.17 8.598a11.375 11.375 0 0 0-14.193 1.496L2.08 16l5.897 5.906c.15.149.307.28.464.42L4.266 26.5h2.468l3.141-3.098 1.278-1.277 2.17-2.161.586-.639ZM11.188 16A4.821 4.821 0 0 1 16 11.187a4.76 4.76 0 0 1 2.721.876l-.63.638-.647.639a3.046 3.046 0 0 0-4.13 4.13l-.639.648-.639.638A4.803 4.803 0 0 1 11.188 16Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--eyeOffFilledLarge"><path d="m24.82 10.899-.621.612-3.491 3.492c.07.327.105.662.105.997A4.821 4.821 0 0 1 16 20.813a4.71 4.71 0 0 1-.997-.105l-2.205 2.213-.692.683-.665.665a11.323 11.323 0 0 0 12.583-2.363L29.92 16l-5.1-5.101Z"></path><path d="m18.958 16.753-2.205 2.204a3.064 3.064 0 0 0 2.205-2.204Z"></path><path d="m13.909 19.325.647-.639 4.13-4.13.64-.647.638-.63 2.362-2.363.613-.621.621-.613L27.743 5.5h-2.477L22.17 8.598a11.375 11.375 0 0 0-14.193 1.496L2.08 16l5.897 5.906c.15.149.307.28.464.42L4.266 26.5h2.468l3.141-3.098 1.278-1.277 2.17-2.161.586-.639ZM11.188 16A4.821 4.821 0 0 1 16 11.187a4.76 4.76 0 0 1 2.721.876l-.63.638-.647.639a3.046 3.046 0 0 0-4.13 4.13l-.639.648-.639.638A4.803 4.803 0 0 1 11.188 16Z"></path></svg>';
 
 export class IconEyeOffFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconEyeOffFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--eyeOffFilledLarge', '', null, 'IconEyeOffFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--eyeOffFilledLarge', '', null, 'IconEyeOffFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--eyeOffFilledLarge');
         this.root.append(svg);
     }

package/icons/IconEyeOffLarge.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--eyeOffLarge"><path d="M23.56 9.674 27.734 5.5h-2.468L22.17 8.598a11.375 11.375 0 0 0-14.193 1.496L2.08 16l5.897 5.906c.15.149.307.28.464.42L4.266 26.5h2.468l3.141-3.098a11.375 11.375 0 0 0 14.193-1.496L29.92 16l-5.897-5.906c-.149-.149-.306-.28-.464-.42ZM9.674 21.049a9.936 9.936 0 0 1-.455-.42L4.546 16l4.673-4.664A9.572 9.572 0 0 1 20.89 9.875l-2.17 2.161a4.76 4.76 0 0 0-2.72-.875A4.82 4.82 0 0 0 11.187 16a4.76 4.76 0 0 0 .875 2.721l-2.39 2.328Zm9.012-6.528a3.045 3.045 0 0 1-4.13 4.13l4.13-4.13Zm-5.372 2.888a3.045 3.045 0 0 1 4.13-4.13l-4.13 4.13Zm9.467 3.22a9.573 9.573 0 0 1-11.672 1.496l2.17-2.161a4.76 4.76 0 0 0 2.721.875A4.822 4.822 0 0 0 20.813 16a4.76 4.76 0 0 0-.875-2.721l2.362-2.363c.149.131.306.271.455.42L27.454 16l-4.673 4.629Z"></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--eyeOffLarge"><path d="M23.56 9.674 27.734 5.5h-2.468L22.17 8.598a11.375 11.375 0 0 0-14.193 1.496L2.08 16l5.897 5.906c.15.149.307.28.464.42L4.266 26.5h2.468l3.141-3.098a11.375 11.375 0 0 0 14.193-1.496L29.92 16l-5.897-5.906c-.149-.149-.306-.28-.464-.42ZM9.674 21.049a9.936 9.936 0 0 1-.455-.42L4.546 16l4.673-4.664A9.572 9.572 0 0 1 20.89 9.875l-2.17 2.161a4.76 4.76 0 0 0-2.72-.875A4.82 4.82 0 0 0 11.187 16a4.76 4.76 0 0 0 .875 2.721l-2.39 2.328Zm9.012-6.528a3.045 3.045 0 0 1-4.13 4.13l4.13-4.13Zm-5.372 2.888a3.045 3.045 0 0 1 4.13-4.13l-4.13 4.13Zm9.467 3.22a9.573 9.573 0 0 1-11.672 1.496l2.17-2.161a4.76 4.76 0 0 0 2.721.875A4.822 4.822 0 0 0 20.813 16a4.76 4.76 0 0 0-.875-2.721l2.362-2.363c.149.131.306.271.455.42L27.454 16l-4.673 4.629Z"></path></svg>';
 
 export class IconEyeOffLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconEyeOffLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--eyeOffLarge', '', null, 'IconEyeOffLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--eyeOffLarge', '', null, 'IconEyeOffLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--eyeOffLarge');
         this.root.append(svg);
     }

package/icons/IconEyeOn.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--eyeOn"><path d="M12.016 4.789a5.338 5.338 0 0 0-8.032 0L1.06 8l2.923 3.211a5.337 5.337 0 0 0 8.032 0l2.923-3.21-2.923-3.212Zm-.971 5.539a4.025 4.025 0 0 1-6.125 0L2.838 8l2.117-2.327a4.025 4.025 0 0 1 6.125 0L13.162 8l-2.117 2.328ZM6.303 6.303a2.406 2.406 0 1 0 3.395 0 2.38 2.38 0 0 0-3.395 0ZM8.77 8.77a1.085 1.085 0 0 1-1.54 0 1.094 1.094 0 1 1 1.54 0Z"></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--eyeOn"><path d="M12.016 4.789a5.338 5.338 0 0 0-8.032 0L1.06 8l2.923 3.211a5.337 5.337 0 0 0 8.032 0l2.923-3.21-2.923-3.212Zm-.971 5.539a4.025 4.025 0 0 1-6.125 0L2.838 8l2.117-2.327a4.025 4.025 0 0 1 6.125 0L13.162 8l-2.117 2.328ZM6.303 6.303a2.406 2.406 0 1 0 3.395 0 2.38 2.38 0 0 0-3.395 0ZM8.77 8.77a1.085 1.085 0 0 1-1.54 0 1.094 1.094 0 1 1 1.54 0Z"></path></svg>';
 
 export class IconEyeOn extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconEyeOn extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--eyeOn', '', null, 'IconEyeOn');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--eyeOn', '', null, 'IconEyeOn');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--eyeOn');
         this.root.append(svg);
     }

package/icons/IconEyeOnFilled.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--eyeOnFilled"><path d="M12.017 4.789a5.337 5.337 0 0 0-8.033 0L1.062 8l2.922 3.211a5.337 5.337 0 0 0 8.032 0l2.923-3.21-2.922-3.212Zm-2.32 4.909a2.398 2.398 0 1 1 0-3.395 2.38 2.38 0 0 1 0 3.395Z"></path><path d="M8 6.906a1.059 1.059 0 0 0-.77.324 1.085 1.085 0 1 0 1.54 0A1.059 1.059 0 0 0 8 6.906Z"></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--eyeOnFilled"><path d="M12.017 4.789a5.337 5.337 0 0 0-8.033 0L1.062 8l2.922 3.211a5.337 5.337 0 0 0 8.032 0l2.923-3.21-2.922-3.212Zm-2.32 4.909a2.398 2.398 0 1 1 0-3.395 2.38 2.38 0 0 1 0 3.395Z"></path><path d="M8 6.906a1.059 1.059 0 0 0-.77.324 1.085 1.085 0 1 0 1.54 0A1.059 1.059 0 0 0 8 6.906Z"></path></svg>';
 
 export class IconEyeOnFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconEyeOnFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--eyeOnFilled', '', null, 'IconEyeOnFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--eyeOnFilled', '', null, 'IconEyeOnFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--eyeOnFilled');
         this.root.append(svg);
     }

package/icons/IconEyeOnFilledLarge.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--eyeOnFilledLarge"><path d="M24.024 10.094a11.375 11.375 0 0 0-16.048 0L2.08 16l5.897 5.906a11.375 11.375 0 0 0 16.048 0L29.92 16l-5.897-5.906ZM16 20.813A4.813 4.813 0 1 1 20.813 16 4.821 4.821 0 0 1 16 20.813Z"></path><path d="M16 19.063a3.062 3.062 0 1 0 0-6.125 3.062 3.062 0 0 0 0 6.124Z"></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--eyeOnFilledLarge"><path d="M24.024 10.094a11.375 11.375 0 0 0-16.048 0L2.08 16l5.897 5.906a11.375 11.375 0 0 0 16.048 0L29.92 16l-5.897-5.906ZM16 20.813A4.813 4.813 0 1 1 20.813 16 4.821 4.821 0 0 1 16 20.813Z"></path><path d="M16 19.063a3.062 3.062 0 1 0 0-6.125 3.062 3.062 0 0 0 0 6.124Z"></path></svg>';
 
 export class IconEyeOnFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconEyeOnFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--eyeOnFilledLarge', '', null, 'IconEyeOnFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--eyeOnFilledLarge', '', null, 'IconEyeOnFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--eyeOnFilledLarge');
         this.root.append(svg);
     }

package/icons/IconEyeOnLarge.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--eyeOnLarge"><path d="M24.024 10.094a11.375 11.375 0 0 0-16.048 0L2.08 16l5.897 5.906a11.375 11.375 0 0 0 16.048 0L29.92 16l-5.897-5.906Zm-1.243 10.57a9.625 9.625 0 0 1-13.562 0L4.546 16l4.673-4.664a9.625 9.625 0 0 1 13.562 0L27.454 16l-4.673 4.664Zm-6.78-9.477A4.813 4.813 0 1 0 20.812 16 4.821 4.821 0 0 0 16 11.187Zm0 7.876A3.062 3.062 0 1 1 16 12.938a3.062 3.062 0 0 1 0 6.124Z"></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--eyeOnLarge"><path d="M24.024 10.094a11.375 11.375 0 0 0-16.048 0L2.08 16l5.897 5.906a11.375 11.375 0 0 0 16.048 0L29.92 16l-5.897-5.906Zm-1.243 10.57a9.625 9.625 0 0 1-13.562 0L4.546 16l4.673-4.664a9.625 9.625 0 0 1 13.562 0L27.454 16l-4.673 4.664Zm-6.78-9.477A4.813 4.813 0 1 0 20.812 16 4.821 4.821 0 0 0 16 11.187Zm0 7.876A3.062 3.062 0 1 1 16 12.938a3.062 3.062 0 0 1 0 6.124Z"></path></svg>';
 
 export class IconEyeOnLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconEyeOnLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--eyeOnLarge', '', null, 'IconEyeOnLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--eyeOnLarge', '', null, 'IconEyeOnLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--eyeOnLarge');
         this.root.append(svg);
     }

package/icons/IconFaceHappy.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--faceHappy"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm0 12.25A5.469 5.469 0 1 1 8 2.53a5.469 5.469 0 0 1 0 10.938Z"></path><path d="M5 6.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z"></path><path d="M9.5 6.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z"></path><path d="M11.125 9H9.751a1.846 1.846 0 0 1-3.377 0H5a3.168 3.168 0 0 0 6.125 0Z"></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--faceHappy"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm0 12.25A5.469 5.469 0 1 1 8 2.53a5.469 5.469 0 0 1 0 10.938Z"></path><path d="M5 6.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z"></path><path d="M9.5 6.75a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z"></path><path d="M11.125 9H9.751a1.846 1.846 0 0 1-3.377 0H5a3.168 3.168 0 0 0 6.125 0Z"></path></svg>';
 
 export class IconFaceHappy extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFaceHappy extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--faceHappy', '', null, 'IconFaceHappy');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--faceHappy', '', null, 'IconFaceHappy');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--faceHappy');
         this.root.append(svg);
     }

package/icons/IconFaceHappyLarge.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--faceHappyLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm0 22.75a10.5 10.5 0 1 1 0-21 10.5 10.5 0 0 1 0 21Zm-4.375-11.813a1.313 1.313 0 1 1-2.626 0 1.313 1.313 0 0 1 2.626 0Zm11.375 0a1.313 1.313 0 1 1-2.626 0 1.313 1.313 0 0 1 2.626 0Zm-4.288 3.938h1.847a4.717 4.717 0 0 1-9.118 0h1.846a2.975 2.975 0 0 0 5.425 0Z"></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--faceHappyLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm0 22.75a10.5 10.5 0 1 1 0-21 10.5 10.5 0 0 1 0 21Zm-4.375-11.813a1.313 1.313 0 1 1-2.626 0 1.313 1.313 0 0 1 2.626 0Zm11.375 0a1.313 1.313 0 1 1-2.626 0 1.313 1.313 0 0 1 2.626 0Zm-4.288 3.938h1.847a4.717 4.717 0 0 1-9.118 0h1.846a2.975 2.975 0 0 0 5.425 0Z"></path></svg>';
 
 export class IconFaceHappyLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFaceHappyLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--faceHappyLarge', '', null, 'IconFaceHappyLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--faceHappyLarge', '', null, 'IconFaceHappyLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--faceHappyLarge');
         this.root.append(svg);
     }

package/icons/IconFilters.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--filters"><path d="M15 3.844v1.312H6.031v1.532H4.72V5.155H1V3.844h3.719V2.313H6.03v1.53H15Zm-3.719 5.469H9.97v1.53H1v1.313h8.969v1.531h1.312v-1.53H15v-1.313h-3.719V9.313Z"></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--filters"><path d="M15 3.844v1.312H6.031v1.532H4.72V5.155H1V3.844h3.719V2.313H6.03v1.53H15Zm-3.719 5.469H9.97v1.53H1v1.313h8.969v1.531h1.312v-1.53H15v-1.313h-3.719V9.313Z"></path></svg>';
 
 export class IconFilters extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFilters extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--filters', '', null, 'IconFilters');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--filters', '', null, 'IconFilters');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--filters');
         this.root.append(svg);
     }

package/icons/IconFiltersFilled.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--filtersFilled"><path d="M15 3.844v1.312H6.031v1.532H4.72V5.155H1V3.844h3.719V2.313H6.03v1.53H15Zm-3.719 5.469H9.97v1.53H1v1.313h8.969v1.531h1.312v-1.53H15v-1.313h-3.719V9.313Z"></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--filtersFilled"><path d="M15 3.844v1.312H6.031v1.532H4.72V5.155H1V3.844h3.719V2.313H6.03v1.53H15Zm-3.719 5.469H9.97v1.53H1v1.313h8.969v1.531h1.312v-1.53H15v-1.313h-3.719V9.313Z"></path></svg>';
 
 export class IconFiltersFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFiltersFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--filtersFilled', '', null, 'IconFiltersFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--filtersFilled', '', null, 'IconFiltersFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--filtersFilled');
         this.root.append(svg);
     }

package/icons/IconFiltersFilledLarge.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--filtersFilledLarge"><path d="M14.25 9v-.875A2.625 2.625 0 0 0 11.625 5.5h-.875a2.625 2.625 0 0 0-2.625 2.625V9h-5.25v1.75h5.25v.875a2.625 2.625 0 0 0 2.625 2.625h.875a2.625 2.625 0 0 0 2.625-2.625v-.875h14.875V9H14.25Z"></path><path d="M23.875 20.375a2.625 2.625 0 0 0-2.625-2.625h-.875a2.625 2.625 0 0 0-2.625 2.625v.875H2.875V23H17.75v.875a2.625 2.625 0 0 0 2.625 2.625h.875a2.625 2.625 0 0 0 2.625-2.625V23h5.25v-1.75h-5.25v-.875Z"></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--filtersFilledLarge"><path d="M14.25 9v-.875A2.625 2.625 0 0 0 11.625 5.5h-.875a2.625 2.625 0 0 0-2.625 2.625V9h-5.25v1.75h5.25v.875a2.625 2.625 0 0 0 2.625 2.625h.875a2.625 2.625 0 0 0 2.625-2.625v-.875h14.875V9H14.25Z"></path><path d="M23.875 20.375a2.625 2.625 0 0 0-2.625-2.625h-.875a2.625 2.625 0 0 0-2.625 2.625v.875H2.875V23H17.75v.875a2.625 2.625 0 0 0 2.625 2.625h.875a2.625 2.625 0 0 0 2.625-2.625V23h5.25v-1.75h-5.25v-.875Z"></path></svg>';
 
 export class IconFiltersFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFiltersFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--filtersFilledLarge', '', null, 'IconFiltersFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--filtersFilledLarge', '', null, 'IconFiltersFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--filtersFilledLarge');
         this.root.append(svg);
     }

package/icons/IconFiltersLarge.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--filtersLarge"><path d="M14.25 9v-.875A2.625 2.625 0 0 0 11.625 5.5h-.875a2.625 2.625 0 0 0-2.625 2.625V9h-5.25v1.75h5.25v.875a2.625 2.625 0 0 0 2.625 2.625h.875a2.625 2.625 0 0 0 2.625-2.625v-.875h14.875V9H14.25Zm-1.75 2.625a.875.875 0 0 1-.875.875h-.875a.875.875 0 0 1-.875-.875v-3.5a.875.875 0 0 1 .875-.875h.875a.875.875 0 0 1 .875.875v3.5Zm11.375 8.75a2.625 2.625 0 0 0-2.625-2.625h-.875a2.625 2.625 0 0 0-2.625 2.625v.875H2.875V23H17.75v.875a2.625 2.625 0 0 0 2.625 2.625h.875a2.625 2.625 0 0 0 2.625-2.625V23h5.25v-1.75h-5.25v-.875Zm-1.75 3.5a.875.875 0 0 1-.875.875h-.875a.875.875 0 0 1-.875-.875v-3.5a.875.875 0 0 1 .875-.875h.875a.875.875 0 0 1 .875.875v3.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--filtersLarge"><path d="M14.25 9v-.875A2.625 2.625 0 0 0 11.625 5.5h-.875a2.625 2.625 0 0 0-2.625 2.625V9h-5.25v1.75h5.25v.875a2.625 2.625 0 0 0 2.625 2.625h.875a2.625 2.625 0 0 0 2.625-2.625v-.875h14.875V9H14.25Zm-1.75 2.625a.875.875 0 0 1-.875.875h-.875a.875.875 0 0 1-.875-.875v-3.5a.875.875 0 0 1 .875-.875h.875a.875.875 0 0 1 .875.875v3.5Zm11.375 8.75a2.625 2.625 0 0 0-2.625-2.625h-.875a2.625 2.625 0 0 0-2.625 2.625v.875H2.875V23H17.75v.875a2.625 2.625 0 0 0 2.625 2.625h.875a2.625 2.625 0 0 0 2.625-2.625V23h5.25v-1.75h-5.25v-.875Zm-1.75 3.5a.875.875 0 0 1-.875.875h-.875a.875.875 0 0 1-.875-.875v-3.5a.875.875 0 0 1 .875-.875h.875a.875.875 0 0 1 .875.875v3.5Z"></path></svg>';
 
 export class IconFiltersLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFiltersLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--filtersLarge', '', null, 'IconFiltersLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--filtersLarge', '', null, 'IconFiltersLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--filtersLarge');
         this.root.append(svg);
     }

package/icons/IconFingerprint.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--fingerprint"><path d="M11.841 4.036A6.02 6.02 0 0 0 7.66 2.348a5.801 5.801 0 0 0-2.013.35L5.21 1.454a7.359 7.359 0 0 1 7.542 1.627l-.91.954Zm1.75 2.949a7.201 7.201 0 0 0-6.545-3.736A7.875 7.875 0 0 0 3.118 4.28l.656 1.138a6.519 6.519 0 0 1 3.272-.875 5.88 5.88 0 0 1 5.329 3.027l1.216-.586ZM6.828 5.471a6.274 6.274 0 0 0-3.85 1.287L3.79 7.79a4.891 4.891 0 0 1 3.037-1.006c2.485 0 4.506 1.75 4.506 3.85h1.312c0-2.853-2.616-5.163-5.818-5.163Zm3.797 6.239A3.824 3.824 0 0 0 6.714 8a3.964 3.964 0 0 0-3.439 1.934l1.138.691a2.625 2.625 0 0 1 2.3-1.313A2.503 2.503 0 0 1 9.34 11.71c0 1.129-.105 2.222-.105 2.231l1.303.131c-.017-.052.088-1.163.088-2.362Zm-2.266 1.225a2.117 2.117 0 0 0-.254-1.514 1.889 1.889 0 0 0-1.251-.875A2.02 2.02 0 0 0 4.5 12.165l1.295.263a.7.7 0 0 1 .77-.613.579.579 0 0 1 .376.28.796.796 0 0 1 .097.586c-.122.432-.34.83-.64 1.164l.99.875c.459-.51.792-1.122.97-1.785Z"></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--fingerprint"><path d="M11.841 4.036A6.02 6.02 0 0 0 7.66 2.348a5.801 5.801 0 0 0-2.013.35L5.21 1.454a7.359 7.359 0 0 1 7.542 1.627l-.91.954Zm1.75 2.949a7.201 7.201 0 0 0-6.545-3.736A7.875 7.875 0 0 0 3.118 4.28l.656 1.138a6.519 6.519 0 0 1 3.272-.875 5.88 5.88 0 0 1 5.329 3.027l1.216-.586ZM6.828 5.471a6.274 6.274 0 0 0-3.85 1.287L3.79 7.79a4.891 4.891 0 0 1 3.037-1.006c2.485 0 4.506 1.75 4.506 3.85h1.312c0-2.853-2.616-5.163-5.818-5.163Zm3.797 6.239A3.824 3.824 0 0 0 6.714 8a3.964 3.964 0 0 0-3.439 1.934l1.138.691a2.625 2.625 0 0 1 2.3-1.313A2.503 2.503 0 0 1 9.34 11.71c0 1.129-.105 2.222-.105 2.231l1.303.131c-.017-.052.088-1.163.088-2.362Zm-2.266 1.225a2.117 2.117 0 0 0-.254-1.514 1.889 1.889 0 0 0-1.251-.875A2.02 2.02 0 0 0 4.5 12.165l1.295.263a.7.7 0 0 1 .77-.613.579.579 0 0 1 .376.28.796.796 0 0 1 .097.586c-.122.432-.34.83-.64 1.164l.99.875c.459-.51.792-1.122.97-1.785Z"></path></svg>';
 
 export class IconFingerprint extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFingerprint extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--fingerprint', '', null, 'IconFingerprint');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--fingerprint', '', null, 'IconFingerprint');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--fingerprint');
         this.root.append(svg);
     }

package/icons/IconFingerprintLarge.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--fingerprintLarge"><path d="m11.1 5.343-.586-1.646A13.842 13.842 0 0 1 24.697 6.76L23.49 8.02A12.128 12.128 0 0 0 11.1 5.343Zm3.08 1.697a13.842 13.842 0 0 0-7.744 2.362l.98 1.453a12.092 12.092 0 0 1 17.894 5.32l1.61-.683A13.807 13.807 0 0 0 14.18 7.04Zm-.613 3.964a11.611 11.611 0 0 0-7.673 2.879l1.155 1.312a9.86 9.86 0 0 1 6.518-2.441 9.695 9.695 0 0 1 9.774 9.625h1.75a11.445 11.445 0 0 0-11.524-11.375Zm-.28 3.955a7.936 7.936 0 0 0-7 4.165l1.54.831a6.195 6.195 0 0 1 11.673 2.94 16.87 16.87 0 0 1-.875 5.031l1.645.604c.62-1.815.95-3.717.98-5.635a7.944 7.944 0 0 0-7.963-7.936Zm.71 3.92a4.76 4.76 0 0 0-5.452 3.902l1.75.35a3.01 3.01 0 0 1 3.386-2.537 2.625 2.625 0 0 1 1.75 1.268c.423.717.563 1.566.394 2.38a9.834 9.834 0 0 1-2.048 3.807l1.313 1.163a11.647 11.647 0 0 0 2.45-4.62 5.066 5.066 0 0 0-.613-3.63 4.376 4.376 0 0 0-2.93-2.083Zm-1.75 4.235a8.112 8.112 0 0 1-1.34 2.695l1.234 1.242a9.994 9.994 0 0 0 1.75-3.421l-1.645-.516Z"></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--fingerprintLarge"><path d="m11.1 5.343-.586-1.646A13.842 13.842 0 0 1 24.697 6.76L23.49 8.02A12.128 12.128 0 0 0 11.1 5.343Zm3.08 1.697a13.842 13.842 0 0 0-7.744 2.362l.98 1.453a12.092 12.092 0 0 1 17.894 5.32l1.61-.683A13.807 13.807 0 0 0 14.18 7.04Zm-.613 3.964a11.611 11.611 0 0 0-7.673 2.879l1.155 1.312a9.86 9.86 0 0 1 6.518-2.441 9.695 9.695 0 0 1 9.774 9.625h1.75a11.445 11.445 0 0 0-11.524-11.375Zm-.28 3.955a7.936 7.936 0 0 0-7 4.165l1.54.831a6.195 6.195 0 0 1 11.673 2.94 16.87 16.87 0 0 1-.875 5.031l1.645.604c.62-1.815.95-3.717.98-5.635a7.944 7.944 0 0 0-7.963-7.936Zm.71 3.92a4.76 4.76 0 0 0-5.452 3.902l1.75.35a3.01 3.01 0 0 1 3.386-2.537 2.625 2.625 0 0 1 1.75 1.268c.423.717.563 1.566.394 2.38a9.834 9.834 0 0 1-2.048 3.807l1.313 1.163a11.647 11.647 0 0 0 2.45-4.62 5.066 5.066 0 0 0-.613-3.63 4.376 4.376 0 0 0-2.93-2.083Zm-1.75 4.235a8.112 8.112 0 0 1-1.34 2.695l1.234 1.242a9.994 9.994 0 0 0 1.75-3.421l-1.645-.516Z"></path></svg>';
 
 export class IconFingerprintLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFingerprintLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--fingerprintLarge', '', null, 'IconFingerprintLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--fingerprintLarge', '', null, 'IconFingerprintLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--fingerprintLarge');
         this.root.append(svg);
     }

package/icons/IconFire.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--fire"><path fill-rule="evenodd" d="M8.24 2.56 5.082 5.72l-.002.002a4.477 4.477 0 0 0-.004 6.302 4.364 4.364 0 0 0 6.278.002 4.459 4.459 0 0 0-.003-6.304L8.24 2.56Zm-2.518 8.833-.11.107.109-.108.001.001Zm.666-.194a2.864 2.864 0 0 0 3.669-.013 256.57 256.57 0 0 0-1.833-1.817L6.388 11.2Zm4.366.24.064.061-.063-.062v.001Zm.197-1.481a256.172 256.172 0 0 0-2.208-2.18l-.53-.516-2.722 2.713a2.977 2.977 0 0 1 .652-3.196L8.233 4.69l2.05 2.086.006.005a2.961 2.961 0 0 1 .663 3.177Z" 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--fire"><path fill-rule="evenodd" d="M8.24 2.56 5.082 5.72l-.002.002a4.477 4.477 0 0 0-.004 6.302 4.364 4.364 0 0 0 6.278.002 4.459 4.459 0 0 0-.003-6.304L8.24 2.56Zm-2.518 8.833-.11.107.109-.108.001.001Zm.666-.194a2.864 2.864 0 0 0 3.669-.013 256.57 256.57 0 0 0-1.833-1.817L6.388 11.2Zm4.366.24.064.061-.063-.062v.001Zm.197-1.481a256.172 256.172 0 0 0-2.208-2.18l-.53-.516-2.722 2.713a2.977 2.977 0 0 1 .652-3.196L8.233 4.69l2.05 2.086.006.005a2.961 2.961 0 0 1 .663 3.177Z" clip-rule="evenodd"></path></svg>';
 
 export class IconFire extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFire extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--fire', '', null, 'IconFire');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--fire', '', null, 'IconFire');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--fire');
         this.root.append(svg);
     }

package/icons/IconFireLarge.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--fireLarge"><path d="M22.125 11.625 16 5.5l-6.125 6.125a8.75 8.75 0 0 0 0 12.32 8.574 8.574 0 0 0 12.198 0 8.75 8.75 0 0 0 .052-12.32ZM11.18 12.85 16 7.968l4.848 4.9a7 7 0 0 1 1.128 8.33c-1.75-1.75-3.5-3.544-5.31-5.25l-.622-.604-.613.612-5.355 5.338a7 7 0 0 1 1.077-8.427l.026-.017ZM16 24.75a6.764 6.764 0 0 1-4.847-2.03l4.908-4.97a506.56 506.56 0 0 1 4.874 4.839l-.087.087A6.763 6.763 0 0 1 16 24.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--fireLarge"><path d="M22.125 11.625 16 5.5l-6.125 6.125a8.75 8.75 0 0 0 0 12.32 8.574 8.574 0 0 0 12.198 0 8.75 8.75 0 0 0 .052-12.32ZM11.18 12.85 16 7.968l4.848 4.9a7 7 0 0 1 1.128 8.33c-1.75-1.75-3.5-3.544-5.31-5.25l-.622-.604-.613.612-5.355 5.338a7 7 0 0 1 1.077-8.427l.026-.017ZM16 24.75a6.764 6.764 0 0 1-4.847-2.03l4.908-4.97a506.56 506.56 0 0 1 4.874 4.839l-.087.087A6.763 6.763 0 0 1 16 24.75Z"></path></svg>';
 
 export class IconFireLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFireLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--fireLarge', '', null, 'IconFireLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--fireLarge', '', null, 'IconFireLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--fireLarge');
         this.root.append(svg);
     }

package/icons/IconFlagAustralia.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--australia"><path fill="#0052B4" d="M15 8A7 7 0 1 1 1 8l7-7a7 7 0 0 1 7 7Z"></path><path fill="#EEE" d="M7.981 8h.02v-.02L7.98 8Z"></path><path fill="#EEE" d="M8 4.653V1a7 7 0 0 0-7 7h3.653V5.944L6.71 8h1.272l.02-.02L8 6.71 5.944 4.652H8Z"></path><path fill="#D80027" d="M4.54 1.913a7.033 7.033 0 0 0-2.627 2.628V8H3.74V3.74H8V1.913H4.54Z"></path><path fill="#D80027" d="M8 7.139 5.51 4.65h-.858L8 8v-.861Z"></path><path fill="#EEE" d="m5.222 9.217.382.804.87-.2-.388.801.697.553-.87.196.003.89-.694-.556-.695.555v-.889l-.864-.2.697-.551-.388-.802.867.2.383-.801Zm6.259 1.523.191.402.435-.101-.194.399.347.279-.435.095v.446l-.344-.279-.348.28v-.447l-.434-.095.35-.28-.195-.398.435.1.192-.401ZM9.692 6.477l.192.402.437-.099-.197.4.35.276-.437.098.003.446-.348-.279L9.345 8v-.446l-.432-.098.347-.274-.191-.402.432.099.191-.402Zm1.789-2.434.191.402.435-.1-.197.401.347.273-.435.102v.445l-.344-.279-.347.28V5.12l-.435-.099.35-.276-.194-.402.434.101.195-.402Zm1.558 1.827.192.402.437-.101-.194.402.347.273-.434.101v.443l-.345-.276-.347.276v-.443l-.435-.098.35-.276-.194-.402.432.1.191-.401ZM11.926 8l.153.465h.487l-.396.287.15.465-.396-.287-.394.287.15-.465-.396-.287h.492l.15-.465Z"></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--australia"><path fill="#0052B4" d="M15 8A7 7 0 1 1 1 8l7-7a7 7 0 0 1 7 7Z"></path><path fill="#EEE" d="M7.981 8h.02v-.02L7.98 8Z"></path><path fill="#EEE" d="M8 4.653V1a7 7 0 0 0-7 7h3.653V5.944L6.71 8h1.272l.02-.02L8 6.71 5.944 4.652H8Z"></path><path fill="#D80027" d="M4.54 1.913a7.033 7.033 0 0 0-2.627 2.628V8H3.74V3.74H8V1.913H4.54Z"></path><path fill="#D80027" d="M8 7.139 5.51 4.65h-.858L8 8v-.861Z"></path><path fill="#EEE" d="m5.222 9.217.382.804.87-.2-.388.801.697.553-.87.196.003.89-.694-.556-.695.555v-.889l-.864-.2.697-.551-.388-.802.867.2.383-.801Zm6.259 1.523.191.402.435-.101-.194.399.347.279-.435.095v.446l-.344-.279-.348.28v-.447l-.434-.095.35-.28-.195-.398.435.1.192-.401ZM9.692 6.477l.192.402.437-.099-.197.4.35.276-.437.098.003.446-.348-.279L9.345 8v-.446l-.432-.098.347-.274-.191-.402.432.099.191-.402Zm1.789-2.434.191.402.435-.1-.197.401.347.273-.435.102v.445l-.344-.279-.347.28V5.12l-.435-.099.35-.276-.194-.402.434.101.195-.402Zm1.558 1.827.192.402.437-.101-.194.402.347.273-.434.101v.443l-.345-.276-.347.276v-.443l-.435-.098.35-.276-.194-.402.432.1.191-.401ZM11.926 8l.153.465h.487l-.396.287.15.465-.396-.287-.394.287.15-.465-.396-.287h.492l.15-.465Z"></path></svg>';
 
 export class IconFlagAustralia extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFlagAustralia extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--australia', '', null, 'IconFlagAustralia');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--australia', '', null, 'IconFlagAustralia');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--australia');
         this.root.append(svg);
     }

package/icons/IconFlagAustria.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--austria"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M8 1a7 7 0 0 0-6.563 4.566h13.126A7 7 0 0 0 8 1Z"></path><path fill="#D80027" d="M8 15a7 7 0 0 0 6.563-4.566H1.437A7 7 0 0 0 8 15Z"></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--austria"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M8 1a7 7 0 0 0-6.563 4.566h13.126A7 7 0 0 0 8 1Z"></path><path fill="#D80027" d="M8 15a7 7 0 0 0 6.563-4.566H1.437A7 7 0 0 0 8 15Z"></path></svg>';
 
 export class IconFlagAustria extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFlagAustria extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--austria', '', null, 'IconFlagAustria');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--austria', '', null, 'IconFlagAustria');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--austria');
         this.root.append(svg);
     }

package/icons/IconFlagBelgium.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--belgium"><path fill="#FFDA44" d="M10.433 1.438a6.986 6.986 0 0 0-4.867 0L4.956 8l.61 6.562a6.984 6.984 0 0 0 4.867 0L11.043 8l-.61-6.562Z"></path><path fill="#D80027" d="M15 8a7 7 0 0 0-4.567-6.562v13.124A7.001 7.001 0 0 0 15 8Z"></path><path fill="#333" d="M1 8a7 7 0 0 0 4.566 6.562V1.438A6.999 6.999 0 0 0 1 8Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--belgium"><path fill="#FFDA44" d="M10.433 1.438a6.986 6.986 0 0 0-4.867 0L4.956 8l.61 6.562a6.984 6.984 0 0 0 4.867 0L11.043 8l-.61-6.562Z"></path><path fill="#D80027" d="M15 8a7 7 0 0 0-4.567-6.562v13.124A7.001 7.001 0 0 0 15 8Z"></path><path fill="#333" d="M1 8a7 7 0 0 0 4.566 6.562V1.438A6.999 6.999 0 0 0 1 8Z"></path></svg>';
 
 export class IconFlagBelgium extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFlagBelgium extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--belgium', '', null, 'IconFlagBelgium');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--belgium', '', null, 'IconFlagBelgium');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--belgium');
         this.root.append(svg);
     }