@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/icons/IconReceiptLarge.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--receiptLarge"><path d="M21.25 15.125h-10.5v1.75h10.5v-1.75Z"></path><path d="M19.5 18.625h-7v1.75h7v-1.75Z"></path><path d="M19.5 11.625h-7v1.75h7v-1.75Z"></path><path d="M22.939 6.471 19.5 4.494 16 6.463l-3.5-1.97-3.439 1.978L5.5 4.573v22.854l3.561-1.898 3.439 1.977 3.5-1.968 3.5 1.968 3.43-1.977 3.57 1.898V4.573L22.939 6.47Zm1.811 18.043-.989-.525a1.75 1.75 0 0 0-1.688 0l-2.625 1.479-2.625-1.488a1.75 1.75 0 0 0-1.75 0l-2.626 1.488-2.52-1.453a1.75 1.75 0 0 0-1.688 0l-.989.499V7.486l.989.525a1.75 1.75 0 0 0 1.688 0L12.5 6.506l2.625 1.488a1.75 1.75 0 0 0 1.75 0L19.5 6.506l2.625 1.479a1.75 1.75 0 0 0 1.689 0l.936-.499v17.028Z"></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--receiptLarge"><path d="M21.25 15.125h-10.5v1.75h10.5v-1.75Z"></path><path d="M19.5 18.625h-7v1.75h7v-1.75Z"></path><path d="M19.5 11.625h-7v1.75h7v-1.75Z"></path><path d="M22.939 6.471 19.5 4.494 16 6.463l-3.5-1.97-3.439 1.978L5.5 4.573v22.854l3.561-1.898 3.439 1.977 3.5-1.968 3.5 1.968 3.43-1.977 3.57 1.898V4.573L22.939 6.47Zm1.811 18.043-.989-.525a1.75 1.75 0 0 0-1.688 0l-2.625 1.479-2.625-1.488a1.75 1.75 0 0 0-1.75 0l-2.626 1.488-2.52-1.453a1.75 1.75 0 0 0-1.688 0l-.989.499V7.486l.989.525a1.75 1.75 0 0 0 1.688 0L12.5 6.506l2.625 1.488a1.75 1.75 0 0 0 1.75 0L19.5 6.506l2.625 1.479a1.75 1.75 0 0 0 1.689 0l.936-.499v17.028Z"></path></svg>';
 
 export class IconReceiptLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconReceiptLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--receiptLarge', '', null, 'IconReceiptLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--receiptLarge', '', null, 'IconReceiptLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--receiptLarge');
         this.root.append(svg);
     }

package/icons/IconReceiptSuccess.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--receiptSuccess"><path d="M10.713 3.249a.201.201 0 0 1-.175 0L8 2.102 5.463 3.25a.201.201 0 0 1-.176 0L2.094 1.805v12.39l3.193-1.444a.202.202 0 0 1 .176 0L8 13.898l2.537-1.147a.202.202 0 0 1 .175 0l3.194 1.444V1.805l-3.194 1.444Zm1.88 8.916-1.338-.604a1.506 1.506 0 0 0-1.26 0L8 12.463l-1.995-.875a1.488 1.488 0 0 0-1.26 0l-1.339.603V3.835l1.339.604a1.505 1.505 0 0 0 1.26 0L8 3.537l1.995.875a1.487 1.487 0 0 0 1.26 0l1.339-.603v8.356Z"></path><path d="m11.019 6.547-.963-.953-2.905 2.905-1.207-1.217-.963.954 2.17 2.17 3.868-3.859Z"></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--receiptSuccess"><path d="M10.713 3.249a.201.201 0 0 1-.175 0L8 2.102 5.463 3.25a.201.201 0 0 1-.176 0L2.094 1.805v12.39l3.193-1.444a.202.202 0 0 1 .176 0L8 13.898l2.537-1.147a.202.202 0 0 1 .175 0l3.194 1.444V1.805l-3.194 1.444Zm1.88 8.916-1.338-.604a1.506 1.506 0 0 0-1.26 0L8 12.463l-1.995-.875a1.488 1.488 0 0 0-1.26 0l-1.339.603V3.835l1.339.604a1.505 1.505 0 0 0 1.26 0L8 3.537l1.995.875a1.487 1.487 0 0 0 1.26 0l1.339-.603v8.356Z"></path><path d="m11.019 6.547-.963-.953-2.905 2.905-1.207-1.217-.963.954 2.17 2.17 3.868-3.859Z"></path></svg>';
 
 export class IconReceiptSuccess extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconReceiptSuccess extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--receiptSuccess', '', null, 'IconReceiptSuccess');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--receiptSuccess', '', null, 'IconReceiptSuccess');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--receiptSuccess');
         this.root.append(svg);
     }

package/icons/IconReceiptSuccessLarge.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--receiptSuccessLarge"><path d="M19.5 11.625h-7v1.75h7v-1.75Z"></path><path d="M15.65 15.125h-4.9v1.75h3.447a8.444 8.444 0 0 1 1.453-1.75Z"></path><path d="m12.5 25.494-2.572-1.479a1.75 1.75 0 0 0-1.69 0l-.988.499V7.486l.989.525a1.75 1.75 0 0 0 1.688 0L12.5 6.506l2.625 1.488a1.75 1.75 0 0 0 1.75 0L19.5 6.506l2.625 1.479a1.75 1.75 0 0 0 1.689 0l.936-.499v6.239a8.361 8.361 0 0 1 1.75 1.085V4.573L22.939 6.47 19.5 4.494 16 6.463l-3.5-1.97-3.439 1.978L5.5 4.573v22.854l3.561-1.898 3.439 1.977 2.161-1.216a8.642 8.642 0 0 1-.875-1.496l-1.286.7Z"></path><path d="M27.226 18.896a6.677 6.677 0 0 0-1.802-2.511 6.501 6.501 0 0 0-8.549 0 6.44 6.44 0 0 0-1.855 2.625 6.447 6.447 0 0 0-.394 1.75v.551a6.563 6.563 0 1 0 12.644-2.45l-.044.035Zm-6.081 7.263a4.813 4.813 0 0 1-4.813-4.813v-.551a4.78 4.78 0 0 1 .56-1.75c.18-.318.397-.611.648-.875a4.786 4.786 0 0 1 7.149 0c.251.264.469.557.647.875a4.78 4.78 0 0 1 .56 1.75v.551a4.822 4.822 0 0 1-4.751 4.813Z"></path><path d="m24.418 20.34-1.243-1.234-2.879 2.879-1.19-1.19-1.242 1.234 2.432 2.432 4.122-4.121Z"></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--receiptSuccessLarge"><path d="M19.5 11.625h-7v1.75h7v-1.75Z"></path><path d="M15.65 15.125h-4.9v1.75h3.447a8.444 8.444 0 0 1 1.453-1.75Z"></path><path d="m12.5 25.494-2.572-1.479a1.75 1.75 0 0 0-1.69 0l-.988.499V7.486l.989.525a1.75 1.75 0 0 0 1.688 0L12.5 6.506l2.625 1.488a1.75 1.75 0 0 0 1.75 0L19.5 6.506l2.625 1.479a1.75 1.75 0 0 0 1.689 0l.936-.499v6.239a8.361 8.361 0 0 1 1.75 1.085V4.573L22.939 6.47 19.5 4.494 16 6.463l-3.5-1.97-3.439 1.978L5.5 4.573v22.854l3.561-1.898 3.439 1.977 2.161-1.216a8.642 8.642 0 0 1-.875-1.496l-1.286.7Z"></path><path d="M27.226 18.896a6.677 6.677 0 0 0-1.802-2.511 6.501 6.501 0 0 0-8.549 0 6.44 6.44 0 0 0-1.855 2.625 6.447 6.447 0 0 0-.394 1.75v.551a6.563 6.563 0 1 0 12.644-2.45l-.044.035Zm-6.081 7.263a4.813 4.813 0 0 1-4.813-4.813v-.551a4.78 4.78 0 0 1 .56-1.75c.18-.318.397-.611.648-.875a4.786 4.786 0 0 1 7.149 0c.251.264.469.557.647.875a4.78 4.78 0 0 1 .56 1.75v.551a4.822 4.822 0 0 1-4.751 4.813Z"></path><path d="m24.418 20.34-1.243-1.234-2.879 2.879-1.19-1.19-1.242 1.234 2.432 2.432 4.122-4.121Z"></path></svg>';
 
 export class IconReceiptSuccessLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconReceiptSuccessLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--receiptSuccessLarge', '', null, 'IconReceiptSuccessLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--receiptSuccessLarge', '', null, 'IconReceiptSuccessLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--receiptSuccessLarge');
         this.root.append(svg);
     }

package/icons/IconRecycle.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--recycle"><path d="M14.58 12.279a1.496 1.496 0 0 1-1.33.778h-3.246l.945.928-.928.936-2.546-2.546 2.546-2.529.928.937-.945.936h3.246a.21.21 0 0 0 .193-.114.184.184 0 0 0 0-.201l-1.55-2.625 1.13-.665 1.557 2.625a1.505 1.505 0 0 1 0 1.54ZM8.193 2.566l1.6 2.704-1.33-.385-.367 1.26 3.448.98 1.006-3.412-1.26-.377-.367 1.252L9.32 1.875a1.549 1.549 0 0 0-2.625 0L5.218 4.369l1.128.665 1.462-2.468c.113-.183.27-.183.385 0Zm-3.86 5.872.43 1.312 1.25-.402-1.075-3.36-3.43 1.058.367 1.252 1.208-.368-1.654 2.826a1.531 1.531 0 0 0 1.321 2.301h3.028v-1.312H2.75a.21.21 0 0 1-.192-.114.184.184 0 0 1 0-.201l1.776-2.992Z"></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--recycle"><path d="M14.58 12.279a1.496 1.496 0 0 1-1.33.778h-3.246l.945.928-.928.936-2.546-2.546 2.546-2.529.928.937-.945.936h3.246a.21.21 0 0 0 .193-.114.184.184 0 0 0 0-.201l-1.55-2.625 1.13-.665 1.557 2.625a1.505 1.505 0 0 1 0 1.54ZM8.193 2.566l1.6 2.704-1.33-.385-.367 1.26 3.448.98 1.006-3.412-1.26-.377-.367 1.252L9.32 1.875a1.549 1.549 0 0 0-2.625 0L5.218 4.369l1.128.665 1.462-2.468c.113-.183.27-.183.385 0Zm-3.86 5.872.43 1.312 1.25-.402-1.075-3.36-3.43 1.058.367 1.252 1.208-.368-1.654 2.826a1.531 1.531 0 0 0 1.321 2.301h3.028v-1.312H2.75a.21.21 0 0 1-.192-.114.184.184 0 0 1 0-.201l1.776-2.992Z"></path></svg>';
 
 export class IconRecycle extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconRecycle extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--recycle', '', null, 'IconRecycle');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--recycle', '', null, 'IconRecycle');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--recycle');
         this.root.append(svg);
     }

package/icons/IconRecycleLarge.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--recycleLarge"><path d="M28.364 24.33a2.502 2.502 0 0 1-2.205 1.295H19.07l2.441 2.415-1.233 1.242-4.585-4.532 4.585-4.541 1.233 1.242-2.44 2.424h7.087a.78.78 0 0 0 .69-.402.76.76 0 0 0 0-.762l-2.974-4.961 1.505-.875 2.957 4.996a2.476 2.476 0 0 1 .027 2.459ZM16.874 5.824l3.5 5.967-3.438-.997-.49 1.706 6.213 1.75 1.82-6.125-1.68-.499-.954 3.212-3.5-5.907a2.555 2.555 0 0 0-4.375 0L11.187 9.64l1.505.875 2.783-4.69a.806.806 0 0 1 1.374 0h.026Zm-7.56 10.5 1.06 3.368 1.67-.533-1.924-6.125-6.204 1.872.516 1.68L7.67 15.58l-3.693 6.23a2.476 2.476 0 0 0 0 2.52 2.52 2.52 0 0 0 2.197 1.295h5.766v-1.75H6.174a.761.761 0 0 1-.674-.411.735.735 0 0 1 0-.761l3.815-6.38Z"></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--recycleLarge"><path d="M28.364 24.33a2.502 2.502 0 0 1-2.205 1.295H19.07l2.441 2.415-1.233 1.242-4.585-4.532 4.585-4.541 1.233 1.242-2.44 2.424h7.087a.78.78 0 0 0 .69-.402.76.76 0 0 0 0-.762l-2.974-4.961 1.505-.875 2.957 4.996a2.476 2.476 0 0 1 .027 2.459ZM16.874 5.824l3.5 5.967-3.438-.997-.49 1.706 6.213 1.75 1.82-6.125-1.68-.499-.954 3.212-3.5-5.907a2.555 2.555 0 0 0-4.375 0L11.187 9.64l1.505.875 2.783-4.69a.806.806 0 0 1 1.374 0h.026Zm-7.56 10.5 1.06 3.368 1.67-.533-1.924-6.125-6.204 1.872.516 1.68L7.67 15.58l-3.693 6.23a2.476 2.476 0 0 0 0 2.52 2.52 2.52 0 0 0 2.197 1.295h5.766v-1.75H6.174a.761.761 0 0 1-.674-.411.735.735 0 0 1 0-.761l3.815-6.38Z"></path></svg>';
 
 export class IconRecycleLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconRecycleLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--recycleLarge', '', null, 'IconRecycleLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--recycleLarge', '', null, 'IconRecycleLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--recycleLarge');
         this.root.append(svg);
     }

package/icons/IconRefresh.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--refresh"><path d="M12.594 1.875v2.791L12.48 4.5a5.67 5.67 0 1 0 1.076 4.629l-1.286-.254a4.375 4.375 0 1 1-.875-3.553l.21.272h-2.73v1.312h3.938a1.094 1.094 0 0 0 1.093-1.093V1.874h-1.312Z"></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--refresh"><path d="M12.594 1.875v2.791L12.48 4.5a5.67 5.67 0 1 0 1.076 4.629l-1.286-.254a4.375 4.375 0 1 1-.875-3.553l.21.272h-2.73v1.312h3.938a1.094 1.094 0 0 0 1.093-1.093V1.874h-1.312Z"></path></svg>';
 
 export class IconRefresh extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconRefresh extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--refresh', '', null, 'IconRefresh');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--refresh', '', null, 'IconRefresh');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--refresh');
         this.root.append(svg);
     }

package/icons/IconRefreshLarge.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--refreshLarge"><path d="M18.406 12.797h6.414a1.68 1.68 0 0 0 1.68-1.68V4.774h-1.75v5.433l-.333-.55-.052-.07a10.5 10.5 0 1 0 2.047 7.717l-1.75-.228a8.75 8.75 0 1 1-1.75-6.466l.263.438h-4.769v1.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--refreshLarge"><path d="M18.406 12.797h6.414a1.68 1.68 0 0 0 1.68-1.68V4.774h-1.75v5.433l-.333-.55-.052-.07a10.5 10.5 0 1 0 2.047 7.717l-1.75-.228a8.75 8.75 0 1 1-1.75-6.466l.263.438h-4.769v1.75Z"></path></svg>';
 
 export class IconRefreshLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconRefreshLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--refreshLarge', '', null, 'IconRefreshLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--refreshLarge', '', null, 'IconRefreshLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--refreshLarge');
         this.root.append(svg);
     }

package/icons/IconResize.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--resize"><path d="M.928 10.325h.927l8.47-8.47V.928L.928 10.325Z"></path><path d="M10.325.928V0L0 10.325h.928L10.325.928Z"></path><path d="m6.501 10.325 3.824-3.824v-.927l-4.751 4.751H6.5Z"></path><path d="M7.429 10.325h-.928l3.824-3.824v.928L7.43 10.325Z"></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--resize"><path d="M.928 10.325h.927l8.47-8.47V.928L.928 10.325Z"></path><path d="M10.325.928V0L0 10.325h.928L10.325.928Z"></path><path d="m6.501 10.325 3.824-3.824v-.927l-4.751 4.751H6.5Z"></path><path d="M7.429 10.325h-.928l3.824-3.824v.928L7.43 10.325Z"></path></svg>';
 
 export class IconResize extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconResize extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--resize', '', null, 'IconResize');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--resize', '', null, 'IconResize');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--resize');
         this.root.append(svg);
     }

package/icons/IconResizeLarge.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--resizeLarge"><path d="M22.726 2.243V1L1 22.735h1.243L22.726 2.243Z"></path><path d="M2.243 22.735h1.233l19.25-19.259V2.243L2.243 22.735Z"></path><path d="M14.099 22.735h1.233l7.394-7.402v-1.234L14.1 22.735Z"></path><path d="m14.099 22.735 8.627-8.636v-1.234l-9.861 9.87h1.234Z"></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--resizeLarge"><path d="M22.726 2.243V1L1 22.735h1.243L22.726 2.243Z"></path><path d="M2.243 22.735h1.233l19.25-19.259V2.243L2.243 22.735Z"></path><path d="M14.099 22.735h1.233l7.394-7.402v-1.234L14.1 22.735Z"></path><path d="m14.099 22.735 8.627-8.636v-1.234l-9.861 9.87h1.234Z"></path></svg>';
 
 export class IconResizeLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconResizeLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--resizeLarge', '', null, 'IconResizeLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--resizeLarge', '', null, 'IconResizeLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--resizeLarge');
         this.root.append(svg);
     }

package/icons/IconRestaurant.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--restaurant"><path d="m13.863 3.485-1.19-1.015a1.487 1.487 0 0 0-.998-.376H4.351c-.365 0-.719.13-.997.367L2.155 3.485a2.572 2.572 0 0 0-.936 1.943 2.511 2.511 0 0 0 .875 1.88v6.598h11.812V7.31a2.518 2.518 0 0 0 .875-1.881 2.623 2.623 0 0 0-.918-1.943Zm-5.05 9.109H7.187v-1.216a.814.814 0 0 1 1.628 0v1.216Zm3.78 0h-2.467v-1.216a2.126 2.126 0 0 0-4.252 0v1.216H3.406V8a3.167 3.167 0 0 0 2.625-.621 3.132 3.132 0 0 0 3.903 0A3.167 3.167 0 0 0 12.559 8h.043l-.008 4.594Zm-.297-5.889a1.75 1.75 0 0 1-1.793-.656H9.4A1.654 1.654 0 0 1 8 6.74a1.654 1.654 0 0 1-1.4-.691H5.497a1.75 1.75 0 0 1-1.75.656 1.383 1.383 0 0 1-1.216-1.277 1.243 1.243 0 0 1 .473-.928L4.21 3.459a.201.201 0 0 1 .14-.053h7.324a.201.201 0 0 1 .14.053l1.19 1.041a1.26 1.26 0 0 1 .464.945 1.383 1.383 0 0 1-1.173 1.26Z"></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--restaurant"><path d="m13.863 3.485-1.19-1.015a1.487 1.487 0 0 0-.998-.376H4.351c-.365 0-.719.13-.997.367L2.155 3.485a2.572 2.572 0 0 0-.936 1.943 2.511 2.511 0 0 0 .875 1.88v6.598h11.812V7.31a2.518 2.518 0 0 0 .875-1.881 2.623 2.623 0 0 0-.918-1.943Zm-5.05 9.109H7.187v-1.216a.814.814 0 0 1 1.628 0v1.216Zm3.78 0h-2.467v-1.216a2.126 2.126 0 0 0-4.252 0v1.216H3.406V8a3.167 3.167 0 0 0 2.625-.621 3.132 3.132 0 0 0 3.903 0A3.167 3.167 0 0 0 12.559 8h.043l-.008 4.594Zm-.297-5.889a1.75 1.75 0 0 1-1.793-.656H9.4A1.654 1.654 0 0 1 8 6.74a1.654 1.654 0 0 1-1.4-.691H5.497a1.75 1.75 0 0 1-1.75.656 1.383 1.383 0 0 1-1.216-1.277 1.243 1.243 0 0 1 .473-.928L4.21 3.459a.201.201 0 0 1 .14-.053h7.324a.201.201 0 0 1 .14.053l1.19 1.041a1.26 1.26 0 0 1 .464.945 1.383 1.383 0 0 1-1.173 1.26Z"></path></svg>';
 
 export class IconRestaurant extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconRestaurant extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--restaurant', '', null, 'IconRestaurant');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--restaurant', '', null, 'IconRestaurant');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--restaurant');
         this.root.append(svg);
     }

package/icons/IconRestaurantFilled.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--restaurantFilled"><path d="M12.795 9.277c-.07.018-.14.018-.201.027-.901.131-1.838.008-2.643-.385-.437.218-.919.35-1.409.411A5.467 5.467 0 0 1 8 9.365a4.587 4.587 0 0 1-1.951-.446c-.805.393-1.742.516-2.643.385-.07-.009-.14-.009-.21-.027-.157-.026-.297-.078-.446-.13a3.576 3.576 0 0 1-.656-.272v5.023h11.812V8.875c-.21.105-.429.193-.656.271-.149.044-.297.096-.455.131Zm-5.618 3.317v-1.216c0-.447.368-.814.814-.814.446 0 .814.367.814.813v1.217H7.177Z"></path><path d="M14.72 4.885a2.626 2.626 0 0 0-.857-1.4l-1.103-.954-.079-.07c-.07-.061-.157-.096-.236-.14a1.487 1.487 0 0 0-.761-.227H4.35a1.5 1.5 0 0 0-.472.087c-.035.009-.07.026-.114.044-.149.061-.289.14-.411.245L2.146 3.502c-.595.508-.936 1.217-.936 1.952 0 .157.017.306.044.455.105.551.402 1.05.831 1.426a2.706 2.706 0 0 0 .656.438c.21.096.42.183.656.227 0 0 .027.009.044.018.219.043.438.06.656.052.07 0 .14-.009.21-.018.14-.008.29-.026.43-.052.078-.018.165-.044.244-.061.123-.035.245-.079.359-.131.079-.035.166-.07.236-.114.035-.018.079-.035.123-.061h.673l.044.026c.053.035.114.061.175.087.079.044.158.079.245.105.079.027.158.061.236.079.062.018.114.035.175.044.105.026.202.043.307.061h.035c.262.035.533.035.796 0h.035c.105-.018.21-.044.315-.061.061-.018.114-.027.175-.044.079-.026.166-.052.245-.079l.236-.105c.061-.026.123-.052.175-.087.018 0 .026-.018.044-.018h.674l.122.053c.079.043.166.079.245.114.114.052.228.087.35.122.088.026.167.053.254.07.131.026.262.044.402.053.08 0 .158.017.237.017.21 0 .428-.018.647-.053 0 0 .035-.008.044-.017.236-.053.455-.131.656-.228.245-.113.464-.262.657-.437.542-.481.875-1.155.875-1.89a2.17 2.17 0 0 0-.062-.534l.009-.026Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--restaurantFilled"><path d="M12.795 9.277c-.07.018-.14.018-.201.027-.901.131-1.838.008-2.643-.385-.437.218-.919.35-1.409.411A5.467 5.467 0 0 1 8 9.365a4.587 4.587 0 0 1-1.951-.446c-.805.393-1.742.516-2.643.385-.07-.009-.14-.009-.21-.027-.157-.026-.297-.078-.446-.13a3.576 3.576 0 0 1-.656-.272v5.023h11.812V8.875c-.21.105-.429.193-.656.271-.149.044-.297.096-.455.131Zm-5.618 3.317v-1.216c0-.447.368-.814.814-.814.446 0 .814.367.814.813v1.217H7.177Z"></path><path d="M14.72 4.885a2.626 2.626 0 0 0-.857-1.4l-1.103-.954-.079-.07c-.07-.061-.157-.096-.236-.14a1.487 1.487 0 0 0-.761-.227H4.35a1.5 1.5 0 0 0-.472.087c-.035.009-.07.026-.114.044-.149.061-.289.14-.411.245L2.146 3.502c-.595.508-.936 1.217-.936 1.952 0 .157.017.306.044.455.105.551.402 1.05.831 1.426a2.706 2.706 0 0 0 .656.438c.21.096.42.183.656.227 0 0 .027.009.044.018.219.043.438.06.656.052.07 0 .14-.009.21-.018.14-.008.29-.026.43-.052.078-.018.165-.044.244-.061.123-.035.245-.079.359-.131.079-.035.166-.07.236-.114.035-.018.079-.035.123-.061h.673l.044.026c.053.035.114.061.175.087.079.044.158.079.245.105.079.027.158.061.236.079.062.018.114.035.175.044.105.026.202.043.307.061h.035c.262.035.533.035.796 0h.035c.105-.018.21-.044.315-.061.061-.018.114-.027.175-.044.079-.026.166-.052.245-.079l.236-.105c.061-.026.123-.052.175-.087.018 0 .026-.018.044-.018h.674l.122.053c.079.043.166.079.245.114.114.052.228.087.35.122.088.026.167.053.254.07.131.026.262.044.402.053.08 0 .158.017.237.017.21 0 .428-.018.647-.053 0 0 .035-.008.044-.017.236-.053.455-.131.656-.228.245-.113.464-.262.657-.437.542-.481.875-1.155.875-1.89a2.17 2.17 0 0 0-.062-.534l.009-.026Z"></path></svg>';
 
 export class IconRestaurantFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconRestaurantFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--restaurantFilled', '', null, 'IconRestaurantFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--restaurantFilled', '', null, 'IconRestaurantFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--restaurantFilled');
         this.root.append(svg);
     }

package/icons/IconRestaurantFilledLarge.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--restaurantFilledLarge"><path d="M26.5 15.912c-.079.01-.149.027-.227.035a5.715 5.715 0 0 1-.762.044 6.178 6.178 0 0 1-3.167-.866c-1.917 1.137-4.419 1.137-6.335 0-1.925 1.137-4.428 1.137-6.344 0A6.13 6.13 0 0 1 6.603 16a6.51 6.51 0 0 1-1.094-.096 7.088 7.088 0 0 1-.875-.21 6.33 6.33 0 0 1-.875-.359v12.924H28.25V15.36c-.28.14-.569.263-.875.359-.28.087-.578.149-.875.201v-.008ZM9 26.5v-5.25c0-.962.787-1.75 1.75-1.75s1.75.788 1.75 1.75v5.25H9Zm14-7.875v3.5h-5.25v-3.5H23Z"></path><path d="M28.74 6.454 26.806 4.51s-.079-.061-.114-.096a2.613 2.613 0 0 0-1.74-.674H7.091c-.69 0-1.347.271-1.846.753l-1.969 1.96A4.32 4.32 0 0 0 2 9.507v.15c0 .297.035.594.087.892.027.122.08.245.114.367.044.166.088.333.158.49.052.123.122.236.192.359.079.149.149.297.236.438.07.104.158.2.246.306.096.122.175.245.288.358.018.018.035.027.053.044.017.018.026.035.035.044.087.088.183.14.271.219.026.026.052.043.079.07.105.087.21.184.323.262.044.035.106.053.15.088a4.324 4.324 0 0 0 2.152.639c.061 0 .131.017.192.017h.009c.271 0 .534-.035.796-.088a.927.927 0 0 0 .167-.043c.2-.053.402-.114.595-.193l.183-.079a4.7 4.7 0 0 0 .7-.402c.035-.026.07-.044.105-.07h1.041s.062.026.088.053c.079.052.166.104.254.157.14.087.28.166.429.227.122.053.245.106.367.15.105.034.201.07.306.095.167.044.333.097.508.123h.035c.227.035.446.07.682.07.237 0 .447-.035.665-.07h.035c.175-.026.35-.07.516-.123.097-.026.193-.052.28-.087.132-.044.263-.096.394-.158.132-.06.263-.13.394-.21.096-.052.193-.104.28-.175.026-.017.061-.034.088-.052h1.032s.061.035.088.053c.078.06.166.104.253.157.14.079.271.157.42.227.123.053.254.106.377.158.096.035.192.061.297.087.166.044.341.097.516.123h.018c.227.035.455.07.682.07.228 0 .455-.035.674-.07h.026c.175-.026.341-.079.508-.123.105-.026.201-.06.306-.096.122-.043.245-.096.367-.149.15-.07.29-.148.43-.227.078-.053.166-.096.244-.149.035-.017.07-.035.096-.061h1.033s.035.018.053.035c.21.149.437.289.665.402.017 0 .035.01.052.018.201.096.411.166.621.227.07.018.131.044.201.062.22.052.438.087.665.105.07 0 .132 0 .202.008.245.01.49.01.744-.017.148-.018.288-.061.437-.096a4.639 4.639 0 0 0 1.75-.822c.157-.132.315-.263.455-.412.026-.026.044-.053.061-.07.394-.429.718-.936.928-1.496a4.735 4.735 0 0 0 .297-1.654v-.166a4.262 4.262 0 0 0-1.26-3.037l.009-.008Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--restaurantFilledLarge"><path d="M26.5 15.912c-.079.01-.149.027-.227.035a5.715 5.715 0 0 1-.762.044 6.178 6.178 0 0 1-3.167-.866c-1.917 1.137-4.419 1.137-6.335 0-1.925 1.137-4.428 1.137-6.344 0A6.13 6.13 0 0 1 6.603 16a6.51 6.51 0 0 1-1.094-.096 7.088 7.088 0 0 1-.875-.21 6.33 6.33 0 0 1-.875-.359v12.924H28.25V15.36c-.28.14-.569.263-.875.359-.28.087-.578.149-.875.201v-.008ZM9 26.5v-5.25c0-.962.787-1.75 1.75-1.75s1.75.788 1.75 1.75v5.25H9Zm14-7.875v3.5h-5.25v-3.5H23Z"></path><path d="M28.74 6.454 26.806 4.51s-.079-.061-.114-.096a2.613 2.613 0 0 0-1.74-.674H7.091c-.69 0-1.347.271-1.846.753l-1.969 1.96A4.32 4.32 0 0 0 2 9.507v.15c0 .297.035.594.087.892.027.122.08.245.114.367.044.166.088.333.158.49.052.123.122.236.192.359.079.149.149.297.236.438.07.104.158.2.246.306.096.122.175.245.288.358.018.018.035.027.053.044.017.018.026.035.035.044.087.088.183.14.271.219.026.026.052.043.079.07.105.087.21.184.323.262.044.035.106.053.15.088a4.324 4.324 0 0 0 2.152.639c.061 0 .131.017.192.017h.009c.271 0 .534-.035.796-.088a.927.927 0 0 0 .167-.043c.2-.053.402-.114.595-.193l.183-.079a4.7 4.7 0 0 0 .7-.402c.035-.026.07-.044.105-.07h1.041s.062.026.088.053c.079.052.166.104.254.157.14.087.28.166.429.227.122.053.245.106.367.15.105.034.201.07.306.095.167.044.333.097.508.123h.035c.227.035.446.07.682.07.237 0 .447-.035.665-.07h.035c.175-.026.35-.07.516-.123.097-.026.193-.052.28-.087.132-.044.263-.096.394-.158.132-.06.263-.13.394-.21.096-.052.193-.104.28-.175.026-.017.061-.034.088-.052h1.032s.061.035.088.053c.078.06.166.104.253.157.14.079.271.157.42.227.123.053.254.106.377.158.096.035.192.061.297.087.166.044.341.097.516.123h.018c.227.035.455.07.682.07.228 0 .455-.035.674-.07h.026c.175-.026.341-.079.508-.123.105-.026.201-.06.306-.096.122-.043.245-.096.367-.149.15-.07.29-.148.43-.227.078-.053.166-.096.244-.149.035-.017.07-.035.096-.061h1.033s.035.018.053.035c.21.149.437.289.665.402.017 0 .035.01.052.018.201.096.411.166.621.227.07.018.131.044.201.062.22.052.438.087.665.105.07 0 .132 0 .202.008.245.01.49.01.744-.017.148-.018.288-.061.437-.096a4.639 4.639 0 0 0 1.75-.822c.157-.132.315-.263.455-.412.026-.026.044-.053.061-.07.394-.429.718-.936.928-1.496a4.735 4.735 0 0 0 .297-1.654v-.166a4.262 4.262 0 0 0-1.26-3.037l.009-.008Z"></path></svg>';
 
 export class IconRestaurantFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconRestaurantFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--restaurantFilledLarge', '', null, 'IconRestaurantFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--restaurantFilledLarge', '', null, 'IconRestaurantFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--restaurantFilledLarge');
         this.root.append(svg);
     }

package/icons/IconRestaurantLarge.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--restaurantLarge"><g fill-rule="evenodd" clip-path="url(#prefix__clip0_2_2344)" clip-rule="evenodd"><path d="M24.75 23.875H16v-7h8.75v7ZM23 18.625h-5.25v3.5H23v-3.5Z"></path><path d="m26.806 4.52 1.934 1.934A4.261 4.261 0 0 1 30 9.49v.175a4.612 4.612 0 0 1-1.75 3.631V28.25H3.75V13.235a2.74 2.74 0 0 0-.142-.11 1.806 1.806 0 0 1-.208-.17A4.664 4.664 0 0 1 2 9.656v-.148a4.305 4.305 0 0 1 1.277-3.054l1.97-1.951a2.625 2.625 0 0 1 1.846-.753H24.95c.696 0 1.363.278 1.855.77ZM9 21.25v5.25h3.5v-5.25a1.75 1.75 0 0 0-3.5 0Zm5.25 5.25H26.5V14.154c-.144.04-.29.072-.438.096a4.497 4.497 0 0 1-3.727-1.33 4.48 4.48 0 0 1-6.335 0 4.48 4.48 0 0 1-6.352 0 4.377 4.377 0 0 1-3.08 1.33c-.36-.01-.719-.06-1.068-.149V26.5h1.75v-5.25a3.5 3.5 0 0 1 7 0v5.25Zm13.332-14.969c.44-.52.678-1.184.668-1.866V9.49a2.52 2.52 0 0 0-.744-1.794l-1.942-1.942a.875.875 0 0 0-.613-.254H7.093a.875.875 0 0 0-.613.254L4.511 7.696a2.564 2.564 0 0 0-.761 1.812v.148a2.879 2.879 0 0 0 .875 2.048 2.626 2.626 0 0 0 1.916.796 2.817 2.817 0 0 0 2.38-1.444l.263-.411h.989l.253.438a2.738 2.738 0 0 0 4.804 0l.245-.447h1.05l.254.464a2.74 2.74 0 0 0 4.786 0l.254-.446h1.024l.262.437a2.783 2.783 0 0 0 2.747 1.409 2.826 2.826 0 0 0 1.73-.969Z"></path></g><defs><clipPath id="prefix__clip0_2_2344"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--restaurantLarge"><g fill-rule="evenodd" clip-path="url(#prefix__clip0_2_2344)" clip-rule="evenodd"><path d="M24.75 23.875H16v-7h8.75v7ZM23 18.625h-5.25v3.5H23v-3.5Z"></path><path d="m26.806 4.52 1.934 1.934A4.261 4.261 0 0 1 30 9.49v.175a4.612 4.612 0 0 1-1.75 3.631V28.25H3.75V13.235a2.74 2.74 0 0 0-.142-.11 1.806 1.806 0 0 1-.208-.17A4.664 4.664 0 0 1 2 9.656v-.148a4.305 4.305 0 0 1 1.277-3.054l1.97-1.951a2.625 2.625 0 0 1 1.846-.753H24.95c.696 0 1.363.278 1.855.77ZM9 21.25v5.25h3.5v-5.25a1.75 1.75 0 0 0-3.5 0Zm5.25 5.25H26.5V14.154c-.144.04-.29.072-.438.096a4.497 4.497 0 0 1-3.727-1.33 4.48 4.48 0 0 1-6.335 0 4.48 4.48 0 0 1-6.352 0 4.377 4.377 0 0 1-3.08 1.33c-.36-.01-.719-.06-1.068-.149V26.5h1.75v-5.25a3.5 3.5 0 0 1 7 0v5.25Zm13.332-14.969c.44-.52.678-1.184.668-1.866V9.49a2.52 2.52 0 0 0-.744-1.794l-1.942-1.942a.875.875 0 0 0-.613-.254H7.093a.875.875 0 0 0-.613.254L4.511 7.696a2.564 2.564 0 0 0-.761 1.812v.148a2.879 2.879 0 0 0 .875 2.048 2.626 2.626 0 0 0 1.916.796 2.817 2.817 0 0 0 2.38-1.444l.263-.411h.989l.253.438a2.738 2.738 0 0 0 4.804 0l.245-.447h1.05l.254.464a2.74 2.74 0 0 0 4.786 0l.254-.446h1.024l.262.437a2.783 2.783 0 0 0 2.747 1.409 2.826 2.826 0 0 0 1.73-.969Z"></path></g><defs><clipPath id="prefix__clip0_2_2344"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
 
 export class IconRestaurantLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconRestaurantLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--restaurantLarge', '', null, 'IconRestaurantLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--restaurantLarge', '', null, 'IconRestaurantLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--restaurantLarge');
         this.root.append(svg);
     }

package/icons/IconRestaurantMenu.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--restaurantMenu"><path d="M12.375 2.094h-8.75a1.54 1.54 0 0 0-1.531 1.531v10.281h11.812V3.625a1.54 1.54 0 0 0-1.531-1.531Zm.219 10.5H3.406V3.625a.219.219 0 0 1 .219-.219h8.75a.219.219 0 0 1 .219.219v8.969Z"></path><path d="M10.625 7.668a2.625 2.625 0 0 0-2.196-2.144.437.437 0 1 0-.875 0 2.625 2.625 0 0 0-2.135 2.144 2.478 2.478 0 0 0 0 .437v.438h5.25v-.438a2.48 2.48 0 0 0-.044-.438Z"></path><path d="M10.625 9.645h-5.25v1.313h5.25V9.644Z"></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--restaurantMenu"><path d="M12.375 2.094h-8.75a1.54 1.54 0 0 0-1.531 1.531v10.281h11.812V3.625a1.54 1.54 0 0 0-1.531-1.531Zm.219 10.5H3.406V3.625a.219.219 0 0 1 .219-.219h8.75a.219.219 0 0 1 .219.219v8.969Z"></path><path d="M10.625 7.668a2.625 2.625 0 0 0-2.196-2.144.437.437 0 1 0-.875 0 2.625 2.625 0 0 0-2.135 2.144 2.478 2.478 0 0 0 0 .437v.438h5.25v-.438a2.48 2.48 0 0 0-.044-.438Z"></path><path d="M10.625 9.645h-5.25v1.313h5.25V9.644Z"></path></svg>';
 
 export class IconRestaurantMenu extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconRestaurantMenu extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--restaurantMenu', '', null, 'IconRestaurantMenu');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--restaurantMenu', '', null, 'IconRestaurantMenu');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--restaurantMenu');
         this.root.append(svg);
     }

package/icons/IconRestaurantMenuLarge.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--restaurantMenuLarge"><path d="M19.5 22.125h-7v1.75h7v-1.75Z"></path><path d="M23.875 3.75H8.125A2.625 2.625 0 0 0 5.5 6.375v21.927l.088-.052h20.825l.087.052V6.375a2.625 2.625 0 0 0-2.625-2.625ZM7.25 26.5V6.375a.875.875 0 0 1 .875-.875h15.75a.875.875 0 0 1 .875.875V26.5H7.25Z"></path><path d="M21.25 18.625h-10.5v1.75h10.5v-1.75Z"></path><path d="M21.171 13.375a5.25 5.25 0 0 0-4.296-4.296.254.254 0 0 0 0-.079.875.875 0 0 0-1.75 0 .254.254 0 0 0 0 .079 5.25 5.25 0 0 0-4.296 4.296c-.049.29-.075.582-.079.875v.875h10.5v-.875a5.807 5.807 0 0 0-.079-.875Zm-8.548 0a3.5 3.5 0 0 1 6.755 0h-6.755Z"></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--restaurantMenuLarge"><path d="M19.5 22.125h-7v1.75h7v-1.75Z"></path><path d="M23.875 3.75H8.125A2.625 2.625 0 0 0 5.5 6.375v21.927l.088-.052h20.825l.087.052V6.375a2.625 2.625 0 0 0-2.625-2.625ZM7.25 26.5V6.375a.875.875 0 0 1 .875-.875h15.75a.875.875 0 0 1 .875.875V26.5H7.25Z"></path><path d="M21.25 18.625h-10.5v1.75h10.5v-1.75Z"></path><path d="M21.171 13.375a5.25 5.25 0 0 0-4.296-4.296.254.254 0 0 0 0-.079.875.875 0 0 0-1.75 0 .254.254 0 0 0 0 .079 5.25 5.25 0 0 0-4.296 4.296c-.049.29-.075.582-.079.875v.875h10.5v-.875a5.807 5.807 0 0 0-.079-.875Zm-8.548 0a3.5 3.5 0 0 1 6.755 0h-6.755Z"></path></svg>';
 
 export class IconRestaurantMenuLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconRestaurantMenuLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--restaurantMenuLarge', '', null, 'IconRestaurantMenuLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--restaurantMenuLarge', '', null, 'IconRestaurantMenuLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--restaurantMenuLarge');
         this.root.append(svg);
     }

package/icons/IconRestricted.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--restricted"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219ZM2.531 8A5.469 5.469 0 0 1 8 2.531a5.408 5.408 0 0 1 3.369 1.173l-7.665 7.665A5.408 5.408 0 0 1 2.53 8ZM8 13.469a5.408 5.408 0 0 1-3.369-1.173l7.665-7.665A5.408 5.408 0 0 1 13.47 8 5.47 5.47 0 0 1 8 13.469Z"></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--restricted"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219ZM2.531 8A5.469 5.469 0 0 1 8 2.531a5.408 5.408 0 0 1 3.369 1.173l-7.665 7.665A5.408 5.408 0 0 1 2.53 8ZM8 13.469a5.408 5.408 0 0 1-3.369-1.173l7.665-7.665A5.408 5.408 0 0 1 13.47 8 5.47 5.47 0 0 1 8 13.469Z"></path></svg>';
 
 export class IconRestricted extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconRestricted extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--restricted', '', null, 'IconRestricted');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--restricted', '', null, 'IconRestricted');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--restricted');
         this.root.append(svg);
     }

package/icons/IconRestrictedLarge.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--restrictedLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5ZM5.5 16A10.5 10.5 0 0 1 23 8.195L8.195 23A10.421 10.421 0 0 1 5.5 16ZM16 26.5a10.5 10.5 0 0 1-6.527-2.293L24.207 9.473A10.5 10.5 0 0 1 16 26.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--restrictedLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5ZM5.5 16A10.5 10.5 0 0 1 23 8.195L8.195 23A10.421 10.421 0 0 1 5.5 16ZM16 26.5a10.5 10.5 0 0 1-6.527-2.293L24.207 9.473A10.5 10.5 0 0 1 16 26.5Z"></path></svg>';
 
 export class IconRestrictedLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconRestrictedLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--restrictedLarge', '', null, 'IconRestrictedLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--restrictedLarge', '', null, 'IconRestrictedLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--restrictedLarge');
         this.root.append(svg);
     }

package/icons/IconReview.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--review"><path d="M12.375 1.219h-8.75A1.54 1.54 0 0 0 2.094 2.75v7.875a1.54 1.54 0 0 0 1.531 1.531h1.628L8 14.904l2.748-2.748h1.627a1.54 1.54 0 0 0 1.531-1.531V2.75a1.54 1.54 0 0 0-1.531-1.531Zm.219 9.406a.219.219 0 0 1-.219.219h-2.17L8 13.049l-2.205-2.205h-2.17a.219.219 0 0 1-.219-.219V2.75a.219.219 0 0 1 .219-.219h8.75a.219.219 0 0 1 .219.219v7.875ZM8.814 5.83l1.82.263L9.32 7.379l.306 1.811L8 8.341l-1.628.875.307-1.811-1.304-1.313 1.82-.262L8 4.185l.814 1.645Z"></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--review"><path d="M12.375 1.219h-8.75A1.54 1.54 0 0 0 2.094 2.75v7.875a1.54 1.54 0 0 0 1.531 1.531h1.628L8 14.904l2.748-2.748h1.627a1.54 1.54 0 0 0 1.531-1.531V2.75a1.54 1.54 0 0 0-1.531-1.531Zm.219 9.406a.219.219 0 0 1-.219.219h-2.17L8 13.049l-2.205-2.205h-2.17a.219.219 0 0 1-.219-.219V2.75a.219.219 0 0 1 .219-.219h8.75a.219.219 0 0 1 .219.219v7.875ZM8.814 5.83l1.82.263L9.32 7.379l.306 1.811L8 8.341l-1.628.875.307-1.811-1.304-1.313 1.82-.262L8 4.185l.814 1.645Z"></path></svg>';
 
 export class IconReview extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconReview extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--review', '', null, 'IconReview');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--review', '', null, 'IconReview');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--review');
         this.root.append(svg);
     }

package/icons/IconReviewLarge.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--reviewLarge"><path d="m16 29.335-5.311-5.311H7.25a2.625 2.625 0 0 1-2.625-2.625V5.649A2.625 2.625 0 0 1 7.25 3.024h17.5a2.625 2.625 0 0 1 2.625 2.625v15.75a2.625 2.625 0 0 1-2.625 2.625h-3.439L16 29.335ZM7.25 4.774a.875.875 0 0 0-.875.875v15.75a.875.875 0 0 0 .875.875h4.165L16 26.859l4.585-4.585h4.165a.875.875 0 0 0 .875-.875V5.649a.875.875 0 0 0-.875-.875H7.25ZM19.413 19.5a.875.875 0 0 1-.412-.105L16 17.82l-3.001 1.575a.876.876 0 0 1-1.269-.919l.569-3.351-2.424-2.363a.875.875 0 0 1-.219-.875.875.875 0 0 1 .709-.603l3.351-.534 1.497-3.01a.875.875 0 0 1 1.575 0l1.496 3.01 3.36.481a.876.876 0 0 1 .709.604.875.875 0 0 1-.22.875l-2.432 2.415.569 3.343a.874.874 0 0 1-.341.875.875.875 0 0 1-.516.157ZM16 16c.144 0 .285.037.411.105l1.838.962-.35-2.047a.875.875 0 0 1 .253-.779l1.488-1.452-2.056-.298a.875.875 0 0 1-.665-.481L16 10.102l-.875 1.864a.874.874 0 0 1-.665.482l-2.056.297 1.487 1.453a.876.876 0 0 1 .254.778l-.35 2.048 1.838-.963A.876.876 0 0 1 16 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--reviewLarge"><path d="m16 29.335-5.311-5.311H7.25a2.625 2.625 0 0 1-2.625-2.625V5.649A2.625 2.625 0 0 1 7.25 3.024h17.5a2.625 2.625 0 0 1 2.625 2.625v15.75a2.625 2.625 0 0 1-2.625 2.625h-3.439L16 29.335ZM7.25 4.774a.875.875 0 0 0-.875.875v15.75a.875.875 0 0 0 .875.875h4.165L16 26.859l4.585-4.585h4.165a.875.875 0 0 0 .875-.875V5.649a.875.875 0 0 0-.875-.875H7.25ZM19.413 19.5a.875.875 0 0 1-.412-.105L16 17.82l-3.001 1.575a.876.876 0 0 1-1.269-.919l.569-3.351-2.424-2.363a.875.875 0 0 1-.219-.875.875.875 0 0 1 .709-.603l3.351-.534 1.497-3.01a.875.875 0 0 1 1.575 0l1.496 3.01 3.36.481a.876.876 0 0 1 .709.604.875.875 0 0 1-.22.875l-2.432 2.415.569 3.343a.874.874 0 0 1-.341.875.875.875 0 0 1-.516.157ZM16 16c.144 0 .285.037.411.105l1.838.962-.35-2.047a.875.875 0 0 1 .253-.779l1.488-1.452-2.056-.298a.875.875 0 0 1-.665-.481L16 10.102l-.875 1.864a.874.874 0 0 1-.665.482l-2.056.297 1.487 1.453a.876.876 0 0 1 .254.778l-.35 2.048 1.838-.963A.876.876 0 0 1 16 16Z"></path></svg>';
 
 export class IconReviewLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconReviewLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--reviewLarge', '', null, 'IconReviewLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--reviewLarge', '', null, 'IconReviewLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--reviewLarge');
         this.root.append(svg);
     }