@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/icons/IconFlagBulgaria.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--bulgaria"><path fill="#496E2D" d="M15.002 7.999a6.91 6.91 0 0 0-.437-2.434L8 5.259l-6.563.306a6.987 6.987 0 0 0 0 4.868L8 10.739l6.564-.306a6.91 6.91 0 0 0 .437-2.434Z"></path><path fill="#D80027" d="M8.001 15a7 7 0 0 0 6.564-4.567H1.438A7 7 0 0 0 8 15Z"></path><path fill="#EEE" d="M1.438 5.565h13.127a7.002 7.002 0 0 0-13.127 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--bulgaria"><path fill="#496E2D" d="M15.002 7.999a6.91 6.91 0 0 0-.437-2.434L8 5.259l-6.563.306a6.987 6.987 0 0 0 0 4.868L8 10.739l6.564-.306a6.91 6.91 0 0 0 .437-2.434Z"></path><path fill="#D80027" d="M8.001 15a7 7 0 0 0 6.564-4.567H1.438A7 7 0 0 0 8 15Z"></path><path fill="#EEE" d="M1.438 5.565h13.127a7.002 7.002 0 0 0-13.127 0Z"></path></svg>';
 
 export class IconFlagBulgaria extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFlagBulgaria extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--bulgaria', '', null, 'IconFlagBulgaria');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--bulgaria', '', null, 'IconFlagBulgaria');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--bulgaria');
         this.root.append(svg);
     }

package/icons/IconFlagCanada.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--canada"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M15 8a7 7 0 0 0-3.957-6.305v12.61A7 7 0 0 0 15 8ZM1 8a7 7 0 0 0 3.957 6.306V1.694A7 7 0 0 0 1 8Zm8.217.913 1.217-.612L9.827 8v-.61L8.61 8l.607-1.217H8.61L8 5.867l-.61.914h-.607l.607 1.216-1.217-.61V8l-.607.304 1.217.61-.306.61h1.222v.91h.602v-.91h1.22l-.304-.61Z"></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--canada"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M15 8a7 7 0 0 0-3.957-6.305v12.61A7 7 0 0 0 15 8ZM1 8a7 7 0 0 0 3.957 6.306V1.694A7 7 0 0 0 1 8Zm8.217.913 1.217-.612L9.827 8v-.61L8.61 8l.607-1.217H8.61L8 5.867l-.61.914h-.607l.607 1.216-1.217-.61V8l-.607.304 1.217.61-.306.61h1.222v.91h.602v-.91h1.22l-.304-.61Z"></path></svg>';
 
 export class IconFlagCanada extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFlagCanada extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--canada', '', null, 'IconFlagCanada');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--canada', '', null, 'IconFlagCanada');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--canada');
         this.root.append(svg);
     }

package/icons/IconFlagDenmark.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--denmark"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M6.476 7.087h8.463A7 7 0 0 0 8 1a7.027 7.027 0 0 0-1.523.164v5.923Zm-1.823 0V1.85A7.005 7.005 0 0 0 1.06 7.087h3.593Zm0 1.826H1.06a7.005 7.005 0 0 0 3.593 5.236V8.913Zm1.823 0v5.92a7 7 0 0 0 8.463-5.92H6.476Z"></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--denmark"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M6.476 7.087h8.463A7 7 0 0 0 8 1a7.027 7.027 0 0 0-1.523.164v5.923Zm-1.823 0V1.85A7.005 7.005 0 0 0 1.06 7.087h3.593Zm0 1.826H1.06a7.005 7.005 0 0 0 3.593 5.236V8.913Zm1.823 0v5.92a7 7 0 0 0 8.463-5.92H6.476Z"></path></svg>';
 
 export class IconFlagDenmark extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFlagDenmark extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--denmark', '', null, 'IconFlagDenmark');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--denmark', '', null, 'IconFlagDenmark');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--denmark');
         this.root.append(svg);
     }

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

package/icons/IconFlagGermany.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--germany"><path fill="#FFDA44" d="M1.438 10.435a7.001 7.001 0 0 0 13.127 0L8 9.828l-6.563.607Z"></path><path fill="#333" d="M8.001 1a7.001 7.001 0 0 0-6.563 4.567L8 6.174l6.564-.607A7.001 7.001 0 0 0 8 1Z"></path><path fill="#D80027" d="M1.438 5.567a6.987 6.987 0 0 0 0 4.868h13.127a6.984 6.984 0 0 0 0-4.868H1.438Z"></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--germany"><path fill="#FFDA44" d="M1.438 10.435a7.001 7.001 0 0 0 13.127 0L8 9.828l-6.563.607Z"></path><path fill="#333" d="M8.001 1a7.001 7.001 0 0 0-6.563 4.567L8 6.174l6.564-.607A7.001 7.001 0 0 0 8 1Z"></path><path fill="#D80027" d="M1.438 5.567a6.987 6.987 0 0 0 0 4.868h13.127a6.984 6.984 0 0 0 0-4.868H1.438Z"></path></svg>';
 
 export class IconFlagGermany extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFlagGermany extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--germany', '', null, 'IconFlagGermany');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--germany', '', null, 'IconFlagGermany');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--germany');
         this.root.append(svg);
     }

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

package/icons/IconFlagIsrael.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--israel"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#0052B4" d="M10.636 6.477h-1.76L8 4.957l-.877 1.52H5.364L6.242 8l-.875 1.523h1.756L8 11.043l.878-1.52h1.758L9.758 8l.876-1.523h.002ZM9.078 8l-.54.935H7.463L6.92 8l.542-.935h1.077L9.08 8h-.002ZM8 6.13l.2.347h-.4L8 6.13Zm-1.618.935h.401l-.202.347-.2-.347Zm0 1.87.2-.347.201.347h-.401ZM8 9.87l-.2-.347h.4L8 9.87Zm1.619-.935h-.402l.202-.347.2.347Zm-.402-1.87h.402l-.2.347-.202-.347Zm3.142-4.542H3.642a7.036 7.036 0 0 0-1.614 1.824h11.944a7.034 7.034 0 0 0-1.613-1.824ZM3.642 13.477h8.717a7.033 7.033 0 0 0 1.613-1.824H2.028a7.034 7.034 0 0 0 1.614 1.824Z"></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--israel"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#0052B4" d="M10.636 6.477h-1.76L8 4.957l-.877 1.52H5.364L6.242 8l-.875 1.523h1.756L8 11.043l.878-1.52h1.758L9.758 8l.876-1.523h.002ZM9.078 8l-.54.935H7.463L6.92 8l.542-.935h1.077L9.08 8h-.002ZM8 6.13l.2.347h-.4L8 6.13Zm-1.618.935h.401l-.202.347-.2-.347Zm0 1.87.2-.347.201.347h-.401ZM8 9.87l-.2-.347h.4L8 9.87Zm1.619-.935h-.402l.202-.347.2.347Zm-.402-1.87h.402l-.2.347-.202-.347Zm3.142-4.542H3.642a7.036 7.036 0 0 0-1.614 1.824h11.944a7.034 7.034 0 0 0-1.613-1.824ZM3.642 13.477h8.717a7.033 7.033 0 0 0 1.613-1.824H2.028a7.034 7.034 0 0 0 1.614 1.824Z"></path></svg>';
 
 export class IconFlagIsrael extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFlagIsrael extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--israel', '', null, 'IconFlagIsrael');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--israel', '', null, 'IconFlagIsrael');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--israel');
         this.root.append(svg);
     }

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

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

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

package/icons/IconFlagNewZealand.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--newZealand"><path fill="#0052B4" d="M15 8A7 7 0 1 1 1 8l7-7a7 7 0 0 1 7 7Z"></path><path fill="#EEE" d="M8 1a7 7 0 0 0-7 7h3.653V5.944L6.71 8H8V6.71L5.944 4.652H8V1Zm3.44 2.502-.31.957h-1.003l.813.585-.31.957.81-.593.812.59-.315-.951.813-.588h-1.004l-.309-.954.003-.003Zm1.676 1.982-.309.957h-1.004l.813.586-.31.957.81-.594.812.59-.312-.953.813-.588h-1.004l-.309-.955Zm-3.358.282-.309.954H8.446l.812.588-.31.954.81-.59.812.59-.311-.957.812-.587h-1.004l-.309-.952Zm1.616 3.546-.309.955h-1.003l.812.588-.31.954.81-.59.812.59-.311-.957.812-.588h-1.004l-.309-.951Z"></path><path fill="#D80027" d="M4.54 1.913a7.033 7.033 0 0 0-2.627 2.628V8H3.74V3.74H8V1.913H4.54Zm6.9 2.28-.153.476h-.504l.408.296-.156.476.405-.296.407.296-.156-.476.405-.296h-.5l-.156-.475Zm-6.787.46L8 8v-.861L5.51 4.65h-.858v.003Zm8.46 1.523-.153.476h-.503l.407.295-.156.476.405-.295.41.298-.156-.476.405-.295h-.5l-.156-.476-.003-.003Zm-3.358.279-.153.479H9.1l.407.292-.155.479.404-.296.408.296-.156-.479.405-.292h-.498l-.156-.479h-.003Zm1.616 3.546-.153.479h-.503l.407.293-.155.478.404-.295.405.295-.153-.478.405-.293h-.5l-.157-.479Z"></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--newZealand"><path fill="#0052B4" d="M15 8A7 7 0 1 1 1 8l7-7a7 7 0 0 1 7 7Z"></path><path fill="#EEE" d="M8 1a7 7 0 0 0-7 7h3.653V5.944L6.71 8H8V6.71L5.944 4.652H8V1Zm3.44 2.502-.31.957h-1.003l.813.585-.31.957.81-.593.812.59-.315-.951.813-.588h-1.004l-.309-.954.003-.003Zm1.676 1.982-.309.957h-1.004l.813.586-.31.957.81-.594.812.59-.312-.953.813-.588h-1.004l-.309-.955Zm-3.358.282-.309.954H8.446l.812.588-.31.954.81-.59.812.59-.311-.957.812-.587h-1.004l-.309-.952Zm1.616 3.546-.309.955h-1.003l.812.588-.31.954.81-.59.812.59-.311-.957.812-.588h-1.004l-.309-.951Z"></path><path fill="#D80027" d="M4.54 1.913a7.033 7.033 0 0 0-2.627 2.628V8H3.74V3.74H8V1.913H4.54Zm6.9 2.28-.153.476h-.504l.408.296-.156.476.405-.296.407.296-.156-.476.405-.296h-.5l-.156-.475Zm-6.787.46L8 8v-.861L5.51 4.65h-.858v.003Zm8.46 1.523-.153.476h-.503l.407.295-.156.476.405-.295.41.298-.156-.476.405-.295h-.5l-.156-.476-.003-.003Zm-3.358.279-.153.479H9.1l.407.292-.155.479.404-.296.408.296-.156-.479.405-.292h-.498l-.156-.479h-.003Zm1.616 3.546-.153.479h-.503l.407.293-.155.478.404-.295.405.295-.153-.478.405-.293h-.5l-.157-.479Z"></path></svg>';
 
 export class IconFlagNewZealand extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFlagNewZealand extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--newZealand', '', null, 'IconFlagNewZealand');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--newZealand', '', null, 'IconFlagNewZealand');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--newZealand');
         this.root.append(svg);
     }

package/icons/IconFlagNorway.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--norway"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M1.241 9.827a7.006 7.006 0 0 0 2.5 3.724V9.827h-2.5Zm6.152 5.146a7 7 0 0 0 7.366-5.146H7.392v5.146h.002Zm7.367-8.8a7 7 0 0 0-7.37-5.146v5.146h7.37ZM3.74 2.45a7.005 7.005 0 0 0-2.499 3.724h2.5V2.45Z"></path><path fill="#0052B4" d="M14.94 7.087H6.477v-5.92a6.954 6.954 0 0 0-1.823.683v5.237H1.06a7.06 7.06 0 0 0 0 1.826h3.593v5.237a6.951 6.951 0 0 0 1.823.683v-5.92h8.463a7.077 7.077 0 0 0 0-1.826Z"></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--norway"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#D80027" d="M1.241 9.827a7.006 7.006 0 0 0 2.5 3.724V9.827h-2.5Zm6.152 5.146a7 7 0 0 0 7.366-5.146H7.392v5.146h.002Zm7.367-8.8a7 7 0 0 0-7.37-5.146v5.146h7.37ZM3.74 2.45a7.005 7.005 0 0 0-2.499 3.724h2.5V2.45Z"></path><path fill="#0052B4" d="M14.94 7.087H6.477v-5.92a6.954 6.954 0 0 0-1.823.683v5.237H1.06a7.06 7.06 0 0 0 0 1.826h3.593v5.237a6.951 6.951 0 0 0 1.823.683v-5.92h8.463a7.077 7.077 0 0 0 0-1.826Z"></path></svg>';
 
 export class IconFlagNorway extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFlagNorway extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--norway', '', null, 'IconFlagNorway');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--norway', '', null, 'IconFlagNorway');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--norway');
         this.root.append(svg);
     }

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

package/icons/IconFlagPortugal.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--portugal"><path fill="#6DA544" d="M1 8a7 7 0 0 0 4.567 6.563L6.174 8l-.607-6.563A7 7 0 0 0 1 8Z"></path><path fill="#D80027" d="M15.002 8a7 7 0 0 0-9.435-6.563v13.126A7.002 7.002 0 0 0 15.002 8Z"></path><path fill="#FFDA44" d="M5.567 10.434a2.434 2.434 0 1 0 0-4.868 2.434 2.434 0 0 0 0 4.868Z"></path><path fill="#D80027" d="M4.197 6.783v1.518a1.369 1.369 0 1 0 2.737 0V6.78H4.199l-.002.002Z"></path><path fill="#EEE" d="M5.567 8.76a.458.458 0 0 1-.456-.456v-.605h.913v.602a.458.458 0 0 1-.457.457v.002Z"></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--portugal"><path fill="#6DA544" d="M1 8a7 7 0 0 0 4.567 6.563L6.174 8l-.607-6.563A7 7 0 0 0 1 8Z"></path><path fill="#D80027" d="M15.002 8a7 7 0 0 0-9.435-6.563v13.126A7.002 7.002 0 0 0 15.002 8Z"></path><path fill="#FFDA44" d="M5.567 10.434a2.434 2.434 0 1 0 0-4.868 2.434 2.434 0 0 0 0 4.868Z"></path><path fill="#D80027" d="M4.197 6.783v1.518a1.369 1.369 0 1 0 2.737 0V6.78H4.199l-.002.002Z"></path><path fill="#EEE" d="M5.567 8.76a.458.458 0 0 1-.456-.456v-.605h.913v.602a.458.458 0 0 1-.457.457v.002Z"></path></svg>';
 
 export class IconFlagPortugal extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFlagPortugal extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--portugal', '', null, 'IconFlagPortugal');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--portugal', '', null, 'IconFlagPortugal');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--portugal');
         this.root.append(svg);
     }

package/icons/IconFlagRomania.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--romania"><path fill="#FFDA44" d="M7.997 1a6.91 6.91 0 0 0-2.433.438L1.244 8l4.32 6.563a6.984 6.984 0 0 0 4.867 0L14.751 8l-4.32-6.563A6.986 6.986 0 0 0 7.997 1Z"></path><path fill="#D80027" d="M14.997 8a7 7 0 0 0-4.566-6.563v13.126A7 7 0 0 0 14.997 8Z"></path><path fill="#0052B4" d="M5.564 14.563V1.437a7 7 0 0 0 0 13.126Z"></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--romania"><path fill="#FFDA44" d="M7.997 1a6.91 6.91 0 0 0-2.433.438L1.244 8l4.32 6.563a6.984 6.984 0 0 0 4.867 0L14.751 8l-4.32-6.563A6.986 6.986 0 0 0 7.997 1Z"></path><path fill="#D80027" d="M14.997 8a7 7 0 0 0-4.566-6.563v13.126A7 7 0 0 0 14.997 8Z"></path><path fill="#0052B4" d="M5.564 14.563V1.437a7 7 0 0 0 0 13.126Z"></path></svg>';
 
 export class IconFlagRomania extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFlagRomania extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--romania', '', null, 'IconFlagRomania');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--romania', '', null, 'IconFlagRomania');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--romania');
         this.root.append(svg);
     }

package/icons/IconFlagSlovakia.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--slovakia"><path fill="#fff" d="M2.745 5.602v.444c-.007.575-.028 1.15-.017 1.725.018.98.36 1.84 1.006 2.577l.03.04c.105.105.207.213.316.314.449.418.962.744 1.508 1.018.058.029.117.055.173.086.036.02.066.018.103 0 .737-.352 1.416-.787 1.972-1.395a.13.13 0 0 1 .013-.012l.012-.01.104-.127a3.902 3.902 0 0 0 .898-2.03c.023-.172.035-.345.036-.52-.002-.577-.012-1.155-.02-1.733 0-.101-.007-.202-.01-.303v-.074h5.71a7.003 7.003 0 0 0-13.157 0h1.323Zm.202 1.111c.002-.309.01-.617.024-.926.019-.443.046-.885.07-1.328a.459.459 0 0 1 .009-.05h5.529c.011.146.025.288.033.43.055.93.071 1.861.073 2.793a3.81 3.81 0 0 1-.377 1.71c-.058.118-.13.228-.195.343-.024.04-.047.083-.073.122A4.565 4.565 0 0 1 7 10.878a7.024 7.024 0 0 1-1.135.689c-.035.017-.064.021-.102.003-.577-.284-1.116-.624-1.585-1.068a4.176 4.176 0 0 1-.641-.77 1.783 1.783 0 0 1-.015-.025l-.012-.023a2.601 2.601 0 0 1-.242-.442 5.232 5.232 0 0 1-.065-.155 3.326 3.326 0 0 1-.25-1.12c-.013-.418-.01-.836-.007-1.254Z"></path><path fill="#D80027" d="m7.861 10.389-.012.01a.13.13 0 0 0-.013.012c-.556.608-1.235 1.043-1.972 1.396-.037.017-.067.018-.103-.001-.056-.03-.115-.057-.173-.086a6.379 6.379 0 0 1-1.508-1.018c-.109-.101-.211-.209-.317-.313l-.084.002h-2.26a7.003 7.003 0 0 0 13.162 0H7.98l-.118-.002Z"></path><path fill="#0052B4" d="M3.763 10.389c-.01-.014-.018-.028-.03-.04A3.913 3.913 0 0 1 2.729 7.77c-.011-.575.01-1.15.017-1.725v-.444H1.422a7.03 7.03 0 0 0-.003 4.79h2.26l.084-.003Z"></path><path fill="#0052B4" d="M14.58 5.602H8.867v.074c.004.1.01.202.011.303.008.578.018 1.156.02 1.734 0 .174-.013.347-.036.52a3.876 3.876 0 0 1-.898 2.03c-.034.041-.07.083-.104.126l.118.002h6.602a7.03 7.03 0 0 0-.002-4.789Z"></path><path fill="#D80027" d="M3.204 9.087a5.232 5.232 0 0 0 .094.22c.06.13.132.257.213.377.04-.062.08-.125.124-.184.044-.06.093-.117.147-.168a.659.659 0 0 1 .339-.19.713.713 0 0 1 .722.29c.019.024.035.05.056.078a2.755 2.755 0 0 1 .19-.344 1.658 1.658 0 0 1 .182-.22 1.12 1.12 0 0 1 .292-.207V7.594c-.51-.01-1.005.015-1.494.164v-.853c.485.152.981.176 1.487.163v-.771a3.44 3.44 0 0 0-1.176.164v-.856c.336.11.682.162 1.034.167h.14a3.202 3.202 0 0 0-.052-.557c-.03-.182-.063-.363-.094-.541h.812c-.07.359-.142.72-.151 1.098.406.008.795-.044 1.175-.166v.854a3.493 3.493 0 0 0-1.171-.164v.772c.502.014.998-.01 1.486-.164v.854c-.484-.149-.98-.172-1.49-.165L6.064 8.74c.324.16.506.446.66.768.024-.033.04-.058.059-.081a.715.715 0 0 1 .726-.284.645.645 0 0 1 .32.177c.115.105.202.233.283.365.065-.115.137-.225.195-.343a3.81 3.81 0 0 0 .377-1.71 48.631 48.631 0 0 0-.073-2.793c-.008-.142-.022-.284-.033-.43h-5.53a.459.459 0 0 0-.008.05c-.024.443-.051.885-.07 1.328-.014.309-.022.617-.024.926-.003.418-.006.836.008 1.253.013.388.106.762.25 1.121Z"></path><path fill="#0052B4" d="M7.83 9.32a.645.645 0 0 0-.32-.177.715.715 0 0 0-.726.284l-.06.08c-.153-.321-.335-.606-.659-.767a.734.734 0 0 0-.355-.036c-.05.01-.098.023-.147.035a1.12 1.12 0 0 0-.357.276 1.465 1.465 0 0 0-.152.205c-.057.093-.11.19-.155.29-.02-.029-.037-.054-.056-.078a.713.713 0 0 0-.722-.29.659.659 0 0 0-.34.19 1.184 1.184 0 0 0-.146.168c-.043.059-.084.122-.124.184l.012.023a1.783 1.783 0 0 0 .033.056c.178.27.387.518.623.739.469.444 1.008.784 1.585 1.068.038.018.067.014.102-.003.399-.197.78-.42 1.135-.689A4.565 4.565 0 0 0 8.04 9.807c.026-.04.049-.082.073-.122a1.643 1.643 0 0 0-.283-.365Z"></path><path fill="#FFFDFD" d="M5.71 8.704a.734.734 0 0 1 .355.036l.003-1.147c.51-.007 1.007.016 1.49.165v-.854c-.487.154-.983.178-1.485.164v-.772c.396-.012.792.043 1.17.164v-.854c-.379.122-.768.174-1.174.166.01-.378.081-.74.15-1.098h-.81c.03.178.063.36.093.541.029.182.053.365.051.557h-.139a3.484 3.484 0 0 1-1.034-.167v.856a3.44 3.44 0 0 1 1.176-.164v.771c-.506.013-1.002-.01-1.487-.163v.853c.49-.149.985-.173 1.494-.164V8.74c.049-.012.097-.025.147-.035Z"></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--slovakia"><path fill="#fff" d="M2.745 5.602v.444c-.007.575-.028 1.15-.017 1.725.018.98.36 1.84 1.006 2.577l.03.04c.105.105.207.213.316.314.449.418.962.744 1.508 1.018.058.029.117.055.173.086.036.02.066.018.103 0 .737-.352 1.416-.787 1.972-1.395a.13.13 0 0 1 .013-.012l.012-.01.104-.127a3.902 3.902 0 0 0 .898-2.03c.023-.172.035-.345.036-.52-.002-.577-.012-1.155-.02-1.733 0-.101-.007-.202-.01-.303v-.074h5.71a7.003 7.003 0 0 0-13.157 0h1.323Zm.202 1.111c.002-.309.01-.617.024-.926.019-.443.046-.885.07-1.328a.459.459 0 0 1 .009-.05h5.529c.011.146.025.288.033.43.055.93.071 1.861.073 2.793a3.81 3.81 0 0 1-.377 1.71c-.058.118-.13.228-.195.343-.024.04-.047.083-.073.122A4.565 4.565 0 0 1 7 10.878a7.024 7.024 0 0 1-1.135.689c-.035.017-.064.021-.102.003-.577-.284-1.116-.624-1.585-1.068a4.176 4.176 0 0 1-.641-.77 1.783 1.783 0 0 1-.015-.025l-.012-.023a2.601 2.601 0 0 1-.242-.442 5.232 5.232 0 0 1-.065-.155 3.326 3.326 0 0 1-.25-1.12c-.013-.418-.01-.836-.007-1.254Z"></path><path fill="#D80027" d="m7.861 10.389-.012.01a.13.13 0 0 0-.013.012c-.556.608-1.235 1.043-1.972 1.396-.037.017-.067.018-.103-.001-.056-.03-.115-.057-.173-.086a6.379 6.379 0 0 1-1.508-1.018c-.109-.101-.211-.209-.317-.313l-.084.002h-2.26a7.003 7.003 0 0 0 13.162 0H7.98l-.118-.002Z"></path><path fill="#0052B4" d="M3.763 10.389c-.01-.014-.018-.028-.03-.04A3.913 3.913 0 0 1 2.729 7.77c-.011-.575.01-1.15.017-1.725v-.444H1.422a7.03 7.03 0 0 0-.003 4.79h2.26l.084-.003Z"></path><path fill="#0052B4" d="M14.58 5.602H8.867v.074c.004.1.01.202.011.303.008.578.018 1.156.02 1.734 0 .174-.013.347-.036.52a3.876 3.876 0 0 1-.898 2.03c-.034.041-.07.083-.104.126l.118.002h6.602a7.03 7.03 0 0 0-.002-4.789Z"></path><path fill="#D80027" d="M3.204 9.087a5.232 5.232 0 0 0 .094.22c.06.13.132.257.213.377.04-.062.08-.125.124-.184.044-.06.093-.117.147-.168a.659.659 0 0 1 .339-.19.713.713 0 0 1 .722.29c.019.024.035.05.056.078a2.755 2.755 0 0 1 .19-.344 1.658 1.658 0 0 1 .182-.22 1.12 1.12 0 0 1 .292-.207V7.594c-.51-.01-1.005.015-1.494.164v-.853c.485.152.981.176 1.487.163v-.771a3.44 3.44 0 0 0-1.176.164v-.856c.336.11.682.162 1.034.167h.14a3.202 3.202 0 0 0-.052-.557c-.03-.182-.063-.363-.094-.541h.812c-.07.359-.142.72-.151 1.098.406.008.795-.044 1.175-.166v.854a3.493 3.493 0 0 0-1.171-.164v.772c.502.014.998-.01 1.486-.164v.854c-.484-.149-.98-.172-1.49-.165L6.064 8.74c.324.16.506.446.66.768.024-.033.04-.058.059-.081a.715.715 0 0 1 .726-.284.645.645 0 0 1 .32.177c.115.105.202.233.283.365.065-.115.137-.225.195-.343a3.81 3.81 0 0 0 .377-1.71 48.631 48.631 0 0 0-.073-2.793c-.008-.142-.022-.284-.033-.43h-5.53a.459.459 0 0 0-.008.05c-.024.443-.051.885-.07 1.328-.014.309-.022.617-.024.926-.003.418-.006.836.008 1.253.013.388.106.762.25 1.121Z"></path><path fill="#0052B4" d="M7.83 9.32a.645.645 0 0 0-.32-.177.715.715 0 0 0-.726.284l-.06.08c-.153-.321-.335-.606-.659-.767a.734.734 0 0 0-.355-.036c-.05.01-.098.023-.147.035a1.12 1.12 0 0 0-.357.276 1.465 1.465 0 0 0-.152.205c-.057.093-.11.19-.155.29-.02-.029-.037-.054-.056-.078a.713.713 0 0 0-.722-.29.659.659 0 0 0-.34.19 1.184 1.184 0 0 0-.146.168c-.043.059-.084.122-.124.184l.012.023a1.783 1.783 0 0 0 .033.056c.178.27.387.518.623.739.469.444 1.008.784 1.585 1.068.038.018.067.014.102-.003.399-.197.78-.42 1.135-.689A4.565 4.565 0 0 0 8.04 9.807c.026-.04.049-.082.073-.122a1.643 1.643 0 0 0-.283-.365Z"></path><path fill="#FFFDFD" d="M5.71 8.704a.734.734 0 0 1 .355.036l.003-1.147c.51-.007 1.007.016 1.49.165v-.854c-.487.154-.983.178-1.485.164v-.772c.396-.012.792.043 1.17.164v-.854c-.379.122-.768.174-1.174.166.01-.378.081-.74.15-1.098h-.81c.03.178.063.36.093.541.029.182.053.365.051.557h-.139a3.484 3.484 0 0 1-1.034-.167v.856a3.44 3.44 0 0 1 1.176-.164v.771c-.506.013-1.002-.01-1.487-.163v.853c.49-.149.985-.173 1.494-.164V8.74c.049-.012.097-.025.147-.035Z"></path></svg>';
 
 export class IconFlagSlovakia extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFlagSlovakia extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--slovakia', '', null, 'IconFlagSlovakia');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--slovakia', '', null, 'IconFlagSlovakia');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--slovakia');
         this.root.append(svg);
     }

package/icons/IconFlagSpain.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--spain"><path fill="#FFDA44" d="M1 8c0 .856.153 1.677.438 2.434l6.562.61 6.562-.61a6.99 6.99 0 0 0 0-4.868L8 4.956l-6.563.61A6.99 6.99 0 0 0 1 8Z"></path><path fill="#D80027" d="M14.562 5.566A7.001 7.001 0 0 0 4.003 2.254a7.002 7.002 0 0 0-2.566 3.312h13.125ZM1.438 10.434A7.002 7.002 0 0 0 8 15a6.999 6.999 0 0 0 6.562-4.566H1.438Z"></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--spain"><path fill="#FFDA44" d="M1 8c0 .856.153 1.677.438 2.434l6.562.61 6.562-.61a6.99 6.99 0 0 0 0-4.868L8 4.956l-6.563.61A6.99 6.99 0 0 0 1 8Z"></path><path fill="#D80027" d="M14.562 5.566A7.001 7.001 0 0 0 4.003 2.254a7.002 7.002 0 0 0-2.566 3.312h13.125ZM1.438 10.434A7.002 7.002 0 0 0 8 15a6.999 6.999 0 0 0 6.562-4.566H1.438Z"></path></svg>';
 
 export class IconFlagSpain extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFlagSpain extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--spain', '', null, 'IconFlagSpain');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--spain', '', null, 'IconFlagSpain');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--spain');
         this.root.append(svg);
     }

package/icons/IconFlagSwitzerland.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--switzerland"><path fill="#D80027" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#EEE" d="M11.653 6.783H9.22V4.35H6.783v2.433H4.35v2.434h2.433v2.433h2.434V9.217h2.433l.003-2.434Z"></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--switzerland"><path fill="#D80027" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#EEE" d="M11.653 6.783H9.22V4.35H6.783v2.433H4.35v2.434h2.433v2.433h2.434V9.217h2.433l.003-2.434Z"></path></svg>';
 
 export class IconFlagSwitzerland extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFlagSwitzerland extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--switzerland', '', null, 'IconFlagSwitzerland');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--switzerland', '', null, 'IconFlagSwitzerland');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--switzerland');
         this.root.append(svg);
     }

package/icons/IconFlagUnitedKingdom.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--unitedKingdom"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#0052B4" d="M2.45 3.737A6.973 6.973 0 0 0 1.24 6.173h3.642L2.45 3.74v-.003Zm12.31 2.436a6.973 6.973 0 0 0-1.206-2.433L11.12 6.173h3.64ZM1.24 9.827c.239.882.648 1.709 1.206 2.433L4.88 9.827H1.241Zm11.02-7.38a6.972 6.972 0 0 0-2.434-1.204v3.64l2.434-2.434v-.003ZM3.74 13.553a6.973 6.973 0 0 0 2.436 1.203v-3.64L3.74 13.553ZM6.173 1.24A6.973 6.973 0 0 0 3.74 2.446l2.434 2.437V1.24Zm3.653 13.518a6.971 6.971 0 0 0 2.434-1.206L9.826 11.12v3.64Zm1.29-4.932 2.434 2.433a6.972 6.972 0 0 0 1.209-2.433h-3.643Z"></path><path fill="#D80027" d="M14.94 7.087H8.913V1.06a7.07 7.07 0 0 0-1.826 0v6.027H1.06a7.07 7.07 0 0 0 0 1.826h6.027v6.027c.606.079 1.22.079 1.826 0V8.913h6.027a7.061 7.061 0 0 0 0-1.826Z"></path><path fill="#D80027" d="m9.827 9.827 3.122 3.122c.143-.143.28-.293.41-.448l-2.671-2.674h-.861Zm-3.654 0-3.122 3.122c.143.143.293.28.448.41l2.674-2.671v-.861Zm0-3.654L3.051 3.051a7.02 7.02 0 0 0-.41.448l2.671 2.674h.861Zm3.654 0 3.122-3.122a7.027 7.027 0 0 0-.448-.41L9.827 5.312v.861Z"></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--unitedKingdom"><path fill="#EEE" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"></path><path fill="#0052B4" d="M2.45 3.737A6.973 6.973 0 0 0 1.24 6.173h3.642L2.45 3.74v-.003Zm12.31 2.436a6.973 6.973 0 0 0-1.206-2.433L11.12 6.173h3.64ZM1.24 9.827c.239.882.648 1.709 1.206 2.433L4.88 9.827H1.241Zm11.02-7.38a6.972 6.972 0 0 0-2.434-1.204v3.64l2.434-2.434v-.003ZM3.74 13.553a6.973 6.973 0 0 0 2.436 1.203v-3.64L3.74 13.553ZM6.173 1.24A6.973 6.973 0 0 0 3.74 2.446l2.434 2.437V1.24Zm3.653 13.518a6.971 6.971 0 0 0 2.434-1.206L9.826 11.12v3.64Zm1.29-4.932 2.434 2.433a6.972 6.972 0 0 0 1.209-2.433h-3.643Z"></path><path fill="#D80027" d="M14.94 7.087H8.913V1.06a7.07 7.07 0 0 0-1.826 0v6.027H1.06a7.07 7.07 0 0 0 0 1.826h6.027v6.027c.606.079 1.22.079 1.826 0V8.913h6.027a7.061 7.061 0 0 0 0-1.826Z"></path><path fill="#D80027" d="m9.827 9.827 3.122 3.122c.143-.143.28-.293.41-.448l-2.671-2.674h-.861Zm-3.654 0-3.122 3.122c.143.143.293.28.448.41l2.674-2.671v-.861Zm0-3.654L3.051 3.051a7.02 7.02 0 0 0-.41.448l2.671 2.674h.861Zm3.654 0 3.122-3.122a7.027 7.027 0 0 0-.448-.41L9.827 5.312v.861Z"></path></svg>';
 
 export class IconFlagUnitedKingdom extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconFlagUnitedKingdom extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--unitedKingdom', '', null, 'IconFlagUnitedKingdom');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--unitedKingdom', '', null, 'IconFlagUnitedKingdom');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--unitedKingdom');
         this.root.append(svg);
     }