@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/icons/IconInfoCircleFilledLarge.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--infoCircleFilledLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm.875 18.375h-1.75V14.25h1.75v7.875ZM16 12.5a1.313 1.313 0 1 1 0-2.626 1.313 1.313 0 0 1 0 2.626Z"></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--infoCircleFilledLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm.875 18.375h-1.75V14.25h1.75v7.875ZM16 12.5a1.313 1.313 0 1 1 0-2.626 1.313 1.313 0 0 1 0 2.626Z"></path></svg>';
 
 export class IconInfoCircleFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconInfoCircleFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--infoCircleFilledLarge', '', null, 'IconInfoCircleFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--infoCircleFilledLarge', '', null, 'IconInfoCircleFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--infoCircleFilledLarge');
         this.root.append(svg);
     }

package/icons/IconInfoCircleLarge.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--infoCircleLarge"><path d="M15.125 14.25h1.75v7.875h-1.75V14.25ZM16 9.875a1.313 1.313 0 1 0 0 2.625 1.313 1.313 0 0 0 0-2.625ZM28.25 16a12.25 12.25 0 1 1-24.499 0 12.25 12.25 0 0 1 24.499 0Zm-1.75 0a10.5 10.5 0 1 0-21 0 10.5 10.5 0 0 0 21 0Z"></path></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--infoCircleLarge"><path d="M15.125 14.25h1.75v7.875h-1.75V14.25ZM16 9.875a1.313 1.313 0 1 0 0 2.625 1.313 1.313 0 0 0 0-2.625ZM28.25 16a12.25 12.25 0 1 1-24.499 0 12.25 12.25 0 0 1 24.499 0Zm-1.75 0a10.5 10.5 0 1 0-21 0 10.5 10.5 0 0 0 21 0Z"></path></svg>';
 
 export class IconInfoCircleLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconInfoCircleLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--infoCircleLarge', '', null, 'IconInfoCircleLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--infoCircleLarge', '', null, 'IconInfoCircleLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--infoCircleLarge');
         this.root.append(svg);
     }

package/icons/IconInfoMarker.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--infoMarker"><path d="M12.281 1h-8.75A1.54 1.54 0 0 0 2 2.531v7.875a1.54 1.54 0 0 0 1.531 1.531H5.16l2.747 2.748 2.748-2.748h1.627a1.54 1.54 0 0 0 1.531-1.53V2.53A1.54 1.54 0 0 0 12.283 1Zm.219 9.406a.218.218 0 0 1-.219.219h-2.17L7.906 12.83l-2.205-2.205h-2.17a.218.218 0 0 1-.219-.219V2.531a.219.219 0 0 1 .22-.219h8.75a.219.219 0 0 1 .218.22v7.874ZM7.25 6.197h1.313v3.334H7.25V6.197Zm1.531-1.916a.875.875 0 1 1-1.75 0 .875.875 0 0 1 1.75 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--infoMarker"><path d="M12.281 1h-8.75A1.54 1.54 0 0 0 2 2.531v7.875a1.54 1.54 0 0 0 1.531 1.531H5.16l2.747 2.748 2.748-2.748h1.627a1.54 1.54 0 0 0 1.531-1.53V2.53A1.54 1.54 0 0 0 12.283 1Zm.219 9.406a.218.218 0 0 1-.219.219h-2.17L7.906 12.83l-2.205-2.205h-2.17a.218.218 0 0 1-.219-.219V2.531a.219.219 0 0 1 .22-.219h8.75a.219.219 0 0 1 .218.22v7.874ZM7.25 6.197h1.313v3.334H7.25V6.197Zm1.531-1.916a.875.875 0 1 1-1.75 0 .875.875 0 0 1 1.75 0Z"></path></svg>';
 
 export class IconInfoMarker extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconInfoMarker extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--infoMarker', '', null, 'IconInfoMarker');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--infoMarker', '', null, 'IconInfoMarker');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--infoMarker');
         this.root.append(svg);
     }

package/icons/IconInfoMarkerLarge.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--infoMarkerLarge"><path d="M24.75 3.024H7.25a2.625 2.625 0 0 0-2.625 2.625v15.75a2.625 2.625 0 0 0 2.625 2.625h3.439L16 29.335l5.311-5.311h3.439a2.625 2.625 0 0 0 2.625-2.625V5.649a2.625 2.625 0 0 0-2.625-2.625Zm.875 18.375a.875.875 0 0 1-.875.875h-4.165L16 26.859l-4.585-4.585H7.25a.875.875 0 0 1-.875-.875V5.649a.875.875 0 0 1 .875-.875h17.5a.875.875 0 0 1 .875.875v15.75Zm-10.5-9.774h1.75V19.5h-1.75v-7.875Zm2.188-3.063a1.313 1.313 0 1 1-2.626 0 1.313 1.313 0 0 1 2.626 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--infoMarkerLarge"><path d="M24.75 3.024H7.25a2.625 2.625 0 0 0-2.625 2.625v15.75a2.625 2.625 0 0 0 2.625 2.625h3.439L16 29.335l5.311-5.311h3.439a2.625 2.625 0 0 0 2.625-2.625V5.649a2.625 2.625 0 0 0-2.625-2.625Zm.875 18.375a.875.875 0 0 1-.875.875h-4.165L16 26.859l-4.585-4.585H7.25a.875.875 0 0 1-.875-.875V5.649a.875.875 0 0 1 .875-.875h17.5a.875.875 0 0 1 .875.875v15.75Zm-10.5-9.774h1.75V19.5h-1.75v-7.875Zm2.188-3.063a1.313 1.313 0 1 1-2.626 0 1.313 1.313 0 0 1 2.626 0Z"></path></svg>';
 
 export class IconInfoMarkerLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconInfoMarkerLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--infoMarkerLarge', '', null, 'IconInfoMarkerLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--infoMarkerLarge', '', null, 'IconInfoMarkerLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--infoMarkerLarge');
         this.root.append(svg);
     }

package/icons/IconKebab.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--kebab"><path d="M13.25 2.531V1.22H2.75V2.53h4.594v1.313H5.97A1.969 1.969 0 0 0 4.01 6.03l.586 5.25a1.96 1.96 0 0 0 1.952 1.75h.796v1.094h1.312v-1.094h.796a1.96 1.96 0 0 0 1.952-1.75l.586-5.25a1.969 1.969 0 0 0-1.96-2.187H8.656V2.53h4.594Zm-3.22 2.625a.656.656 0 0 1 .656.727l-.061.638-1.82-.332v1.338l1.662.298-.175 1.593-1.487-.272v1.33l1.348.245-.053.412a.656.656 0 0 1-.647.586H6.548a.657.657 0 0 1-.648-.586L5.716 9.47l1.479-.42V7.685l-1.628.464-.253-2.266a.656.656 0 0 1 .656-.727h4.06Z"></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--kebab"><path d="M13.25 2.531V1.22H2.75V2.53h4.594v1.313H5.97A1.969 1.969 0 0 0 4.01 6.03l.586 5.25a1.96 1.96 0 0 0 1.952 1.75h.796v1.094h1.312v-1.094h.796a1.96 1.96 0 0 0 1.952-1.75l.586-5.25a1.969 1.969 0 0 0-1.96-2.187H8.656V2.53h4.594Zm-3.22 2.625a.656.656 0 0 1 .656.727l-.061.638-1.82-.332v1.338l1.662.298-.175 1.593-1.487-.272v1.33l1.348.245-.053.412a.656.656 0 0 1-.647.586H6.548a.657.657 0 0 1-.648-.586L5.716 9.47l1.479-.42V7.685l-1.628.464-.253-2.266a.656.656 0 0 1 .656-.727h4.06Z"></path></svg>';
 
 export class IconKebab extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconKebab extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--kebab', '', null, 'IconKebab');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--kebab', '', null, 'IconKebab');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--kebab');
         this.root.append(svg);
     }

package/icons/IconKebabBowl.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--kebabBowl"><path d="m14.711 7.886-.096-.542h-.271a3.23 3.23 0 0 0 .402-1.89 1.252 1.252 0 0 0-.604-.875 1.347 1.347 0 0 0-.892-.079 1.917 1.917 0 0 0-.131-.665 1.295 1.295 0 0 0-.814-.77 1.592 1.592 0 0 0-1.68.56 1.058 1.058 0 0 0-.875-.332c-.586 0-1.068.525-1.435 1.452a2.143 2.143 0 0 0-.341 0 2.372 2.372 0 0 0-.35 0c-.35-.875-.823-1.356-1.4-1.391a1.12 1.12 0 0 0-.875.332 1.566 1.566 0 0 0-1.637-.656 1.269 1.269 0 0 0-.813.77c-.09.223-.14.46-.149.7a1.251 1.251 0 0 0-1.496.954 3.229 3.229 0 0 0 .402 1.89h-.271l-.096.542c-.047.29-.07.582-.07.875 0 3.317 3.045 6.012 6.781 6.012 3.736 0 6.781-2.695 6.781-6.012 0-.293-.023-.585-.07-.875ZM9.83 4.72c.067.11.123.228.166.35a.639.639 0 0 0 .578.411.648.648 0 0 0 .612-.359 2.52 2.52 0 0 1 .691-.875c.07.318.045.65-.07.954a.647.647 0 0 0 .07.761.656.656 0 0 0 .875.088 3.88 3.88 0 0 1 .683-.35 3.133 3.133 0 0 1-.613 1.627h-1.925a2.819 2.819 0 0 0-1.312-2.161c.067-.156.149-.306.245-.446Zm-.245 2.625H6.416a1.61 1.61 0 0 1 3.168 0ZM2.53 5.778c.245.077.473.199.674.358a.656.656 0 0 0 1.015-.761 2.774 2.774 0 0 1-.149-1.076c.32.219.575.522.735.875a.674.674 0 0 0 .622.376.656.656 0 0 0 .586-.42c.045-.133.107-.26.183-.376.082.128.152.262.21.402a2.835 2.835 0 0 0-1.303 2.188H3.152a3.5 3.5 0 0 1-.62-1.566ZM8 13.468c-3.019 0-5.469-2.108-5.469-4.698v-.114H13.47v.114c0 2.59-2.45 4.699-5.469 4.699Z"></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--kebabBowl"><path d="m14.711 7.886-.096-.542h-.271a3.23 3.23 0 0 0 .402-1.89 1.252 1.252 0 0 0-.604-.875 1.347 1.347 0 0 0-.892-.079 1.917 1.917 0 0 0-.131-.665 1.295 1.295 0 0 0-.814-.77 1.592 1.592 0 0 0-1.68.56 1.058 1.058 0 0 0-.875-.332c-.586 0-1.068.525-1.435 1.452a2.143 2.143 0 0 0-.341 0 2.372 2.372 0 0 0-.35 0c-.35-.875-.823-1.356-1.4-1.391a1.12 1.12 0 0 0-.875.332 1.566 1.566 0 0 0-1.637-.656 1.269 1.269 0 0 0-.813.77c-.09.223-.14.46-.149.7a1.251 1.251 0 0 0-1.496.954 3.229 3.229 0 0 0 .402 1.89h-.271l-.096.542c-.047.29-.07.582-.07.875 0 3.317 3.045 6.012 6.781 6.012 3.736 0 6.781-2.695 6.781-6.012 0-.293-.023-.585-.07-.875ZM9.83 4.72c.067.11.123.228.166.35a.639.639 0 0 0 .578.411.648.648 0 0 0 .612-.359 2.52 2.52 0 0 1 .691-.875c.07.318.045.65-.07.954a.647.647 0 0 0 .07.761.656.656 0 0 0 .875.088 3.88 3.88 0 0 1 .683-.35 3.133 3.133 0 0 1-.613 1.627h-1.925a2.819 2.819 0 0 0-1.312-2.161c.067-.156.149-.306.245-.446Zm-.245 2.625H6.416a1.61 1.61 0 0 1 3.168 0ZM2.53 5.778c.245.077.473.199.674.358a.656.656 0 0 0 1.015-.761 2.774 2.774 0 0 1-.149-1.076c.32.219.575.522.735.875a.674.674 0 0 0 .622.376.656.656 0 0 0 .586-.42c.045-.133.107-.26.183-.376.082.128.152.262.21.402a2.835 2.835 0 0 0-1.303 2.188H3.152a3.5 3.5 0 0 1-.62-1.566ZM8 13.468c-3.019 0-5.469-2.108-5.469-4.698v-.114H13.47v.114c0 2.59-2.45 4.699-5.469 4.699Z"></path></svg>';
 
 export class IconKebabBowl extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconKebabBowl extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--kebabBowl', '', null, 'IconKebabBowl');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--kebabBowl', '', null, 'IconKebabBowl');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--kebabBowl');
         this.root.append(svg);
     }

package/icons/IconKebabBowlLarge.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--kebabBowlLarge"><g clip-path="url(#prefix__clip0_18_709)"><path d="m28.994 14.985-.123-.735H27.49c1.365-3.141.656-4.524-.263-5.127a2.223 2.223 0 0 0-2.073-.07 3.561 3.561 0 0 0-.21-1.278 2.195 2.195 0 0 0-1.348-1.269 2.94 2.94 0 0 0-3.08 1.085 2.091 2.091 0 0 0-1.829-1.172c-1.128.052-2.038 1.234-2.712 3.5h-.377c-.647-1.75-1.487-2.625-2.502-2.625a2.091 2.091 0 0 0-1.75 1.067 3.01 3.01 0 0 0-3.01-.997 2.082 2.082 0 0 0-1.374 1.26c-.125.32-.187.662-.184 1.006a2.319 2.319 0 0 0-1.986.061c-.875.543-1.636 1.75-.359 4.559H3.13l-.123.735c-.088.58-.132 1.164-.131 1.75 0 6.843 5.889 12.39 13.125 12.39s13.125-5.547 13.125-12.355c.003-.598-.04-1.194-.131-1.785Zm-10.282-6.86s.36.184.797 1.418a.875.875 0 0 0 .744.586.875.875 0 0 0 .875-.438c.376-.656 1.338-1.75 1.924-1.575a.464.464 0 0 1 .298.272 3.5 3.5 0 0 1-.219 2.03.875.875 0 0 0 1.348 1.085 3.15 3.15 0 0 1 1.82-.946c.42.272.341 1.532-.709 3.658h-4.288a5.32 5.32 0 0 0-3.552-4.016 5.048 5.048 0 0 1 .962-2.074Zm-3.876 3.693a3.71 3.71 0 0 1 2.345 0A3.544 3.544 0 0 1 19.5 14.25h-7a3.578 3.578 0 0 1 2.336-2.398v-.034Zm-9.152-.622c.683.084 1.32.392 1.811.875a.875.875 0 0 0 1.435-.665.875.875 0 0 0-.105-.429 2.686 2.686 0 0 1-.227-1.68.35.35 0 0 1 .27-.297c.64-.166 1.567.875 1.882 1.409a.875.875 0 0 0 1.549-.158c.13-.473.38-.904.726-1.251.114 0 .464.376.875 1.33a5.312 5.312 0 0 0-3.203 3.92H6.375c-.875-1.75-1.059-2.835-.691-3.054ZM16 27.375A11.654 11.654 0 0 1 6.812 23h-.07v-.087a10.08 10.08 0 0 1-2.117-6.125v-.77h6.23L7.941 21.25h2.004L12.894 16h4.532l-3.99 7h2.013l3.99-7h3.885l-2.949 5.25h2.004L25.327 16h2.048v.77c0 5.845-5.101 10.605-11.375 10.605Z"></path></g><defs><clipPath id="prefix__clip0_18_709"><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--kebabBowlLarge"><g clip-path="url(#prefix__clip0_18_709)"><path d="m28.994 14.985-.123-.735H27.49c1.365-3.141.656-4.524-.263-5.127a2.223 2.223 0 0 0-2.073-.07 3.561 3.561 0 0 0-.21-1.278 2.195 2.195 0 0 0-1.348-1.269 2.94 2.94 0 0 0-3.08 1.085 2.091 2.091 0 0 0-1.829-1.172c-1.128.052-2.038 1.234-2.712 3.5h-.377c-.647-1.75-1.487-2.625-2.502-2.625a2.091 2.091 0 0 0-1.75 1.067 3.01 3.01 0 0 0-3.01-.997 2.082 2.082 0 0 0-1.374 1.26c-.125.32-.187.662-.184 1.006a2.319 2.319 0 0 0-1.986.061c-.875.543-1.636 1.75-.359 4.559H3.13l-.123.735c-.088.58-.132 1.164-.131 1.75 0 6.843 5.889 12.39 13.125 12.39s13.125-5.547 13.125-12.355c.003-.598-.04-1.194-.131-1.785Zm-10.282-6.86s.36.184.797 1.418a.875.875 0 0 0 .744.586.875.875 0 0 0 .875-.438c.376-.656 1.338-1.75 1.924-1.575a.464.464 0 0 1 .298.272 3.5 3.5 0 0 1-.219 2.03.875.875 0 0 0 1.348 1.085 3.15 3.15 0 0 1 1.82-.946c.42.272.341 1.532-.709 3.658h-4.288a5.32 5.32 0 0 0-3.552-4.016 5.048 5.048 0 0 1 .962-2.074Zm-3.876 3.693a3.71 3.71 0 0 1 2.345 0A3.544 3.544 0 0 1 19.5 14.25h-7a3.578 3.578 0 0 1 2.336-2.398v-.034Zm-9.152-.622c.683.084 1.32.392 1.811.875a.875.875 0 0 0 1.435-.665.875.875 0 0 0-.105-.429 2.686 2.686 0 0 1-.227-1.68.35.35 0 0 1 .27-.297c.64-.166 1.567.875 1.882 1.409a.875.875 0 0 0 1.549-.158c.13-.473.38-.904.726-1.251.114 0 .464.376.875 1.33a5.312 5.312 0 0 0-3.203 3.92H6.375c-.875-1.75-1.059-2.835-.691-3.054ZM16 27.375A11.654 11.654 0 0 1 6.812 23h-.07v-.087a10.08 10.08 0 0 1-2.117-6.125v-.77h6.23L7.941 21.25h2.004L12.894 16h4.532l-3.99 7h2.013l3.99-7h3.885l-2.949 5.25h2.004L25.327 16h2.048v.77c0 5.845-5.101 10.605-11.375 10.605Z"></path></g><defs><clipPath id="prefix__clip0_18_709"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
 
 export class IconKebabBowlLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconKebabBowlLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--kebabBowlLarge', '', null, 'IconKebabBowlLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--kebabBowlLarge', '', null, 'IconKebabBowlLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--kebabBowlLarge');
         this.root.append(svg);
     }

package/icons/IconKebabLarge.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--kebabLarge"><path d="M26.5 4.625v-1.75h-21v1.75h9.625V7.25H11.52a3.789 3.789 0 0 0-2.809 1.251 3.841 3.841 0 0 0-.945 2.958L9.053 23.13a3.78 3.78 0 0 0 3.744 3.369h2.328v2.625h1.75V26.5h2.328a3.788 3.788 0 0 0 3.745-3.378l1.286-11.663a3.841 3.841 0 0 0-.945-2.958A3.788 3.788 0 0 0 20.48 7.25h-3.605V4.625H26.5ZM20.48 9a1.986 1.986 0 0 1 1.505.674 2.065 2.065 0 0 1 .508 1.592l-.22 1.978-4.523-.744v1.75l4.331.726-.56 5.084-3.771-.674v1.75l3.579.648-.079 1.146a2.03 2.03 0 0 1-2.047 1.82h-6.405a2.021 2.021 0 0 1-2.004-1.811l-.482-4.314 3.938-.875v-1.846l-4.13.971-.612-5.574a2.065 2.065 0 0 1 .507-1.592A1.986 1.986 0 0 1 11.52 9h8.96Z"></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--kebabLarge"><path d="M26.5 4.625v-1.75h-21v1.75h9.625V7.25H11.52a3.789 3.789 0 0 0-2.809 1.251 3.841 3.841 0 0 0-.945 2.958L9.053 23.13a3.78 3.78 0 0 0 3.744 3.369h2.328v2.625h1.75V26.5h2.328a3.788 3.788 0 0 0 3.745-3.378l1.286-11.663a3.841 3.841 0 0 0-.945-2.958A3.788 3.788 0 0 0 20.48 7.25h-3.605V4.625H26.5ZM20.48 9a1.986 1.986 0 0 1 1.505.674 2.065 2.065 0 0 1 .508 1.592l-.22 1.978-4.523-.744v1.75l4.331.726-.56 5.084-3.771-.674v1.75l3.579.648-.079 1.146a2.03 2.03 0 0 1-2.047 1.82h-6.405a2.021 2.021 0 0 1-2.004-1.811l-.482-4.314 3.938-.875v-1.846l-4.13.971-.612-5.574a2.065 2.065 0 0 1 .507-1.592A1.986 1.986 0 0 1 11.52 9h8.96Z"></path></svg>';
 
 export class IconKebabLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconKebabLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--kebabLarge', '', null, 'IconKebabLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--kebabLarge', '', null, 'IconKebabLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--kebabLarge');
         this.root.append(svg);
     }

package/icons/IconKey.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--key"><path d="M6.171 5.375a.875.875 0 1 1-.796-.875.823.823 0 0 1 .796.875Zm7.823 5.11v3.386h-3.5l-.665-.665.148-1.172-.227-.237L8.639 12l-.446-.42v-1.287l-.123-.122-1.199.07-.735-.735a.184.184 0 0 0-.227 0l-.306.158a1.523 1.523 0 0 1-1.75-.307L1.664 7.125a1.479 1.479 0 0 1-.315-1.697A8.199 8.199 0 0 1 3.021 3.02 8.4 8.4 0 0 1 5.375 1.36a1.54 1.54 0 0 1 1.75.297L9.339 3.88a1.496 1.496 0 0 1 .306 1.689l-.105.227a.193.193 0 0 0 0 .228l4.454 4.462Zm-1.313.534L8.64 6.95a1.496 1.496 0 0 1-.271-1.75l.087-.184a.21.21 0 0 0 0-.218L6.189 2.584a.201.201 0 0 0-.237 0A6.904 6.904 0 0 0 2.55 5.96a.184.184 0 0 0 .043.219l2.223 2.223a.184.184 0 0 0 .219 0l.253-.132a1.496 1.496 0 0 1 1.75.263l.333.341 1.199-.07.927.945v.761l.691-.122 1.147 1.111-.123.998h1.461l.01-1.48Z"></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--key"><path d="M6.171 5.375a.875.875 0 1 1-.796-.875.823.823 0 0 1 .796.875Zm7.823 5.11v3.386h-3.5l-.665-.665.148-1.172-.227-.237L8.639 12l-.446-.42v-1.287l-.123-.122-1.199.07-.735-.735a.184.184 0 0 0-.227 0l-.306.158a1.523 1.523 0 0 1-1.75-.307L1.664 7.125a1.479 1.479 0 0 1-.315-1.697A8.199 8.199 0 0 1 3.021 3.02 8.4 8.4 0 0 1 5.375 1.36a1.54 1.54 0 0 1 1.75.297L9.339 3.88a1.496 1.496 0 0 1 .306 1.689l-.105.227a.193.193 0 0 0 0 .228l4.454 4.462Zm-1.313.534L8.64 6.95a1.496 1.496 0 0 1-.271-1.75l.087-.184a.21.21 0 0 0 0-.218L6.189 2.584a.201.201 0 0 0-.237 0A6.904 6.904 0 0 0 2.55 5.96a.184.184 0 0 0 .043.219l2.223 2.223a.184.184 0 0 0 .219 0l.253-.132a1.496 1.496 0 0 1 1.75.263l.333.341 1.199-.07.927.945v.761l.691-.122 1.147 1.111-.123.998h1.461l.01-1.48Z"></path></svg>';
 
 export class IconKey extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconKey extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--key', '', null, 'IconKey');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--key', '', null, 'IconKey');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--key');
         this.root.append(svg);
     }

package/icons/IconKeyLarge.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--keyLarge"><path d="M10.75 8.125a2.625 2.625 0 1 0 0 5.25 2.625 2.625 0 0 0 0-5.25Zm0 3.5a.874.874 0 1 1 0-1.748.874.874 0 0 1 0 1.748Zm9.082 1.496a.989.989 0 0 1-.166-1.137c.079-.158.149-.315.219-.464a2.704 2.704 0 0 0-.551-3.036L14.582 3.67a2.721 2.721 0 0 0-3.07-.542 17.229 17.229 0 0 0-8.4 8.496 2.713 2.713 0 0 0 .55 3.036L8.414 19.5a2.686 2.686 0 0 0 3.062.543c.219-.105.429-.21.63-.324a.955.955 0 0 1 1.111.157l2.18 2.249 1.863-.297.359.358-.368 2.328.875.919 2.249-.604.551.56-.455 1.837 1.864 1.899h6.79v-6.554l-9.293-9.45Zm7.543 14.254h-4.288l-.665-.683.456-1.837-1.978-1.969-1.697.438.28-1.75-1.61-1.628-1.873.28-1.54-1.601a2.625 2.625 0 0 0-3.168-.473l-.568.28a.918.918 0 0 1-1.068-.192l-4.751-4.769a.988.988 0 0 1-.193-1.094 15.426 15.426 0 0 1 7.534-7.656.963.963 0 0 1 1.094.175l4.751 4.821a.962.962 0 0 1 .201 1.085l-.2.412a2.747 2.747 0 0 0 .533 3.141l8.75 8.899v4.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--keyLarge"><path d="M10.75 8.125a2.625 2.625 0 1 0 0 5.25 2.625 2.625 0 0 0 0-5.25Zm0 3.5a.874.874 0 1 1 0-1.748.874.874 0 0 1 0 1.748Zm9.082 1.496a.989.989 0 0 1-.166-1.137c.079-.158.149-.315.219-.464a2.704 2.704 0 0 0-.551-3.036L14.582 3.67a2.721 2.721 0 0 0-3.07-.542 17.229 17.229 0 0 0-8.4 8.496 2.713 2.713 0 0 0 .55 3.036L8.414 19.5a2.686 2.686 0 0 0 3.062.543c.219-.105.429-.21.63-.324a.955.955 0 0 1 1.111.157l2.18 2.249 1.863-.297.359.358-.368 2.328.875.919 2.249-.604.551.56-.455 1.837 1.864 1.899h6.79v-6.554l-9.293-9.45Zm7.543 14.254h-4.288l-.665-.683.456-1.837-1.978-1.969-1.697.438.28-1.75-1.61-1.628-1.873.28-1.54-1.601a2.625 2.625 0 0 0-3.168-.473l-.568.28a.918.918 0 0 1-1.068-.192l-4.751-4.769a.988.988 0 0 1-.193-1.094 15.426 15.426 0 0 1 7.534-7.656.963.963 0 0 1 1.094.175l4.751 4.821a.962.962 0 0 1 .201 1.085l-.2.412a2.747 2.747 0 0 0 .533 3.141l8.75 8.899v4.121Z"></path></svg>';
 
 export class IconKeyLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconKeyLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--keyLarge', '', null, 'IconKeyLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--keyLarge', '', null, 'IconKeyLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--keyLarge');
         this.root.append(svg);
     }

package/icons/IconKeyUnlock.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--keyUnlock"><path d="M14.781 3.625v8.75a1.54 1.54 0 0 1-1.531 1.531H8.875a1.54 1.54 0 0 1-1.531-1.531V11.5h1.312v.875a.219.219 0 0 0 .219.219h4.375a.22.22 0 0 0 .219-.219v-8.75a.219.219 0 0 0-.22-.219H8.876a.219.219 0 0 0-.219.219V4.5H7.344v-.875a1.54 1.54 0 0 1 1.53-1.531h4.376a1.54 1.54 0 0 1 1.531 1.531ZM7.667 10.38l-.437-.446-.175.219a3.317 3.317 0 1 1-2.511-5.478c.858.001 1.682.34 2.292.945h3.211L12.427 8l-2.38 2.38h-.735l-.437-.446-.446.446h-.762ZM7.24 8.07l.805.805.83-.796.806.796.875-.875-1.05-1.067H6.25l-.201-.228a1.986 1.986 0 0 0-1.505-.718 2.013 2.013 0 0 0 0 4.025 1.951 1.951 0 0 0 1.146-.376L7.239 8.07Zm-2.975-.875A.796.796 0 1 0 5.06 8a.796.796 0 0 0-.796-.796v-.009Z"></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--keyUnlock"><path d="M14.781 3.625v8.75a1.54 1.54 0 0 1-1.531 1.531H8.875a1.54 1.54 0 0 1-1.531-1.531V11.5h1.312v.875a.219.219 0 0 0 .219.219h4.375a.22.22 0 0 0 .219-.219v-8.75a.219.219 0 0 0-.22-.219H8.876a.219.219 0 0 0-.219.219V4.5H7.344v-.875a1.54 1.54 0 0 1 1.53-1.531h4.376a1.54 1.54 0 0 1 1.531 1.531ZM7.667 10.38l-.437-.446-.175.219a3.317 3.317 0 1 1-2.511-5.478c.858.001 1.682.34 2.292.945h3.211L12.427 8l-2.38 2.38h-.735l-.437-.446-.446.446h-.762ZM7.24 8.07l.805.805.83-.796.806.796.875-.875-1.05-1.067H6.25l-.201-.228a1.986 1.986 0 0 0-1.505-.718 2.013 2.013 0 0 0 0 4.025 1.951 1.951 0 0 0 1.146-.376L7.239 8.07Zm-2.975-.875A.796.796 0 1 0 5.06 8a.796.796 0 0 0-.796-.796v-.009Z"></path></svg>';
 
 export class IconKeyUnlock extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconKeyUnlock extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--keyUnlock', '', null, 'IconKeyUnlock');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--keyUnlock', '', null, 'IconKeyUnlock');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--keyUnlock');
         this.root.append(svg);
     }

package/icons/IconKeyUnlockLarge.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--keyUnlockLarge"><g clip-path="url(#prefix__clip0_18_2240)"><path d="M29.125 7.25v17.5a2.625 2.625 0 0 1-2.625 2.625h-9.625a2.625 2.625 0 0 1-2.625-2.625v-2.625H16v2.625a.875.875 0 0 0 .875.875H26.5a.875.875 0 0 0 .875-.875V7.25a.875.875 0 0 0-.875-.875h-9.625A.875.875 0 0 0 16 7.25v2.625h-1.75V7.25a2.625 2.625 0 0 1 2.625-2.625H26.5a2.625 2.625 0 0 1 2.625 2.625ZM15.23 20.148h-1.103l-.988-.998-.744.744a5.862 5.862 0 0 1-4.454 2.047 5.94 5.94 0 1 1 4.218-10.088h6.177L22.484 16l-4.148 4.148h-1.093l-1.007-1.007-1.006 1.007Zm-.543-1.925 1.55-1.55 1.513 1.55L20.016 16l-2.406-2.398h-6.239l-.262-.306a4.192 4.192 0 1 0 0 5.408l2.039-2.039 1.54 1.558ZM6.97 14.53a1.47 1.47 0 1 0 .017 2.94 1.47 1.47 0 0 0-.017-2.94Zm16.905-2.03v6.125h1.75V12.5h-1.75Z"></path></g><defs><clipPath id="prefix__clip0_18_2240"><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--keyUnlockLarge"><g clip-path="url(#prefix__clip0_18_2240)"><path d="M29.125 7.25v17.5a2.625 2.625 0 0 1-2.625 2.625h-9.625a2.625 2.625 0 0 1-2.625-2.625v-2.625H16v2.625a.875.875 0 0 0 .875.875H26.5a.875.875 0 0 0 .875-.875V7.25a.875.875 0 0 0-.875-.875h-9.625A.875.875 0 0 0 16 7.25v2.625h-1.75V7.25a2.625 2.625 0 0 1 2.625-2.625H26.5a2.625 2.625 0 0 1 2.625 2.625ZM15.23 20.148h-1.103l-.988-.998-.744.744a5.862 5.862 0 0 1-4.454 2.047 5.94 5.94 0 1 1 4.218-10.088h6.177L22.484 16l-4.148 4.148h-1.093l-1.007-1.007-1.006 1.007Zm-.543-1.925 1.55-1.55 1.513 1.55L20.016 16l-2.406-2.398h-6.239l-.262-.306a4.192 4.192 0 1 0 0 5.408l2.039-2.039 1.54 1.558ZM6.97 14.53a1.47 1.47 0 1 0 .017 2.94 1.47 1.47 0 0 0-.017-2.94Zm16.905-2.03v6.125h1.75V12.5h-1.75Z"></path></g><defs><clipPath id="prefix__clip0_18_2240"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
 
 export class IconKeyUnlockLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconKeyUnlockLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--keyUnlockLarge', '', null, 'IconKeyUnlockLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--keyUnlockLarge', '', null, 'IconKeyUnlockLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--keyUnlockLarge');
         this.root.append(svg);
     }

package/icons/IconKosher.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--kosher"><path d="m11.938 8.053 1.986-3.387H9.986L8 1.22 6.014 4.666H2.076l1.986 3.386-1.925 3.334h3.877L8 14.773l1.986-3.387h3.877l-1.925-3.333Zm.078-2.293-.7 1.199-.691-1.199h1.391Zm-1.338 2.284-1.322 2.248H6.644L5.322 8.044 6.644 5.76h2.712l1.322 2.284ZM8 3.406l.726 1.26H7.274L8 3.406ZM3.984 5.76h1.391l-.7 1.199-.691-1.199Zm0 4.533.708-1.155.683 1.155H3.984ZM8 12.603l-.718-1.217h1.435L8 12.602Zm3.307-3.5.665 1.155h-1.347l.682-1.155Z"></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--kosher"><path d="m11.938 8.053 1.986-3.387H9.986L8 1.22 6.014 4.666H2.076l1.986 3.386-1.925 3.334h3.877L8 14.773l1.986-3.387h3.877l-1.925-3.333Zm.078-2.293-.7 1.199-.691-1.199h1.391Zm-1.338 2.284-1.322 2.248H6.644L5.322 8.044 6.644 5.76h2.712l1.322 2.284ZM8 3.406l.726 1.26H7.274L8 3.406ZM3.984 5.76h1.391l-.7 1.199-.691-1.199Zm0 4.533.708-1.155.683 1.155H3.984ZM8 12.603l-.718-1.217h1.435L8 12.602Zm3.307-3.5.665 1.155h-1.347l.682-1.155Z"></path></svg>';
 
 export class IconKosher extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconKosher extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--kosher', '', null, 'IconKosher');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--kosher', '', null, 'IconKosher');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--kosher');
         this.root.append(svg);
     }

package/icons/IconKosherLarge.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--kosherLarge"><path d="m23.63 16.105 3.841-6.554H19.85L16 2.875l-3.85 6.676H4.529l3.841 6.554-3.745 6.449h7.508L16 29.125l3.841-6.554h7.534l-3.745-6.466Zm.788-4.804-1.794 3.054-1.75-3.054h3.544ZM21.6 16.096l-2.756 4.708h-5.688L10.4 16.096l2.756-4.795h5.688l2.756 4.795ZM16 6.375l1.829 3.176H14.17L16 6.375Zm-8.418 4.926h3.553l-1.75 3.054-1.803-3.054Zm.097 9.503 1.75-2.966 1.75 2.966h-3.5ZM16 25.625l-1.811-3.089h3.622L16 25.625Zm6.606-7.805 1.75 2.966h-3.482l1.732-2.966Z"></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--kosherLarge"><path d="m23.63 16.105 3.841-6.554H19.85L16 2.875l-3.85 6.676H4.529l3.841 6.554-3.745 6.449h7.508L16 29.125l3.841-6.554h7.534l-3.745-6.466Zm.788-4.804-1.794 3.054-1.75-3.054h3.544ZM21.6 16.096l-2.756 4.708h-5.688L10.4 16.096l2.756-4.795h5.688l2.756 4.795ZM16 6.375l1.829 3.176H14.17L16 6.375Zm-8.418 4.926h3.553l-1.75 3.054-1.803-3.054Zm.097 9.503 1.75-2.966 1.75 2.966h-3.5ZM16 25.625l-1.811-3.089h3.622L16 25.625Zm6.606-7.805 1.75 2.966h-3.482l1.732-2.966Z"></path></svg>';
 
 export class IconKosherLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconKosherLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--kosherLarge', '', null, 'IconKosherLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--kosherLarge', '', null, 'IconKosherLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--kosherLarge');
         this.root.append(svg);
     }

package/icons/IconLanguage.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--language"><path d="M14.946 7.08c0-.264-.09-.518-.145-.772a7.053 7.053 0 0 0-2.282-3.667A7.015 7.015 0 0 0 8.534 1H7.475a7.005 7.005 0 0 0-3.674 1.387 7.039 7.039 0 0 0-2.358 3.15c-.081.236-.163.48-.226.735a7.28 7.28 0 0 0-.145.77c-.045.301-.07.604-.072.908.001.304.025.607.072.907.024.288.07.573.136.853a7.044 7.044 0 0 0 2.285 3.657A7.006 7.006 0 0 0 7.475 15H8.534a6.986 6.986 0 0 0 3.676-1.384 7.021 7.021 0 0 0 2.356-3.153 6.33 6.33 0 0 0 .226-.753c.063-.254.111-.511.145-.77.039-.302.06-.605.063-.908a7.96 7.96 0 0 0-.054-.953Zm-2.09-1.96a22.505 22.505 0 0 0-2.052-.336A9.88 9.88 0 0 0 9.8 2.634a5.647 5.647 0 0 1 3.057 2.485ZM8 2.451a8.77 8.77 0 0 1 1.311 2.195 25.118 25.118 0 0 0-2.613 0A8.734 8.734 0 0 1 8 2.452Zm-1.809.172c-.4.68-.722 1.405-.958 2.16-.688.081-1.366.19-2.044.326a5.675 5.675 0 0 1 3.02-2.477l-.018-.009ZM2.52 9.33a6.75 6.75 0 0 1-.108-.617v-.045a5.315 5.315 0 0 1 0-.662 5.579 5.579 0 0 1 0-.672c.021-.226.057-.45.108-.671.76-.195 1.53-.35 2.307-.463-.222 1.2-.222 2.43 0 3.63a20.491 20.491 0 0 1-2.307-.5Zm.624 1.552c.688.145 1.375.245 2.062.335.248.762.589 1.49 1.013 2.169a5.729 5.729 0 0 1-3.084-2.504h.01Zm4.866 2.722a8.926 8.926 0 0 1-1.32-2.26H9.32A8.69 8.69 0 0 1 8 13.558l.009.046Zm-1.754-3.63a8.783 8.783 0 0 1 0-3.892c1.164-.09 2.335-.09 3.5 0a8.782 8.782 0 0 1 0 3.874 22.78 22.78 0 0 1-3.51 0l.01.018Zm3.554 3.43c.419-.685.759-1.415 1.013-2.178a22.434 22.434 0 0 0 2.053-.326A5.71 5.71 0 0 1 9.8 13.385l.009.018Zm3.816-4.718v.045c0 .21-.063.418-.108.617-.763.195-1.536.35-2.316.463a10.365 10.365 0 0 0 0-3.584c.777.11 1.547.264 2.307.463 0 .2.09.408.117.617a.12.12 0 0 0 0 .054c.014.22.014.442 0 .663.01.214.007.43-.009.644l.01.018Z"></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--language"><path d="M14.946 7.08c0-.264-.09-.518-.145-.772a7.053 7.053 0 0 0-2.282-3.667A7.015 7.015 0 0 0 8.534 1H7.475a7.005 7.005 0 0 0-3.674 1.387 7.039 7.039 0 0 0-2.358 3.15c-.081.236-.163.48-.226.735a7.28 7.28 0 0 0-.145.77c-.045.301-.07.604-.072.908.001.304.025.607.072.907.024.288.07.573.136.853a7.044 7.044 0 0 0 2.285 3.657A7.006 7.006 0 0 0 7.475 15H8.534a6.986 6.986 0 0 0 3.676-1.384 7.021 7.021 0 0 0 2.356-3.153 6.33 6.33 0 0 0 .226-.753c.063-.254.111-.511.145-.77.039-.302.06-.605.063-.908a7.96 7.96 0 0 0-.054-.953Zm-2.09-1.96a22.505 22.505 0 0 0-2.052-.336A9.88 9.88 0 0 0 9.8 2.634a5.647 5.647 0 0 1 3.057 2.485ZM8 2.451a8.77 8.77 0 0 1 1.311 2.195 25.118 25.118 0 0 0-2.613 0A8.734 8.734 0 0 1 8 2.452Zm-1.809.172c-.4.68-.722 1.405-.958 2.16-.688.081-1.366.19-2.044.326a5.675 5.675 0 0 1 3.02-2.477l-.018-.009ZM2.52 9.33a6.75 6.75 0 0 1-.108-.617v-.045a5.315 5.315 0 0 1 0-.662 5.579 5.579 0 0 1 0-.672c.021-.226.057-.45.108-.671.76-.195 1.53-.35 2.307-.463-.222 1.2-.222 2.43 0 3.63a20.491 20.491 0 0 1-2.307-.5Zm.624 1.552c.688.145 1.375.245 2.062.335.248.762.589 1.49 1.013 2.169a5.729 5.729 0 0 1-3.084-2.504h.01Zm4.866 2.722a8.926 8.926 0 0 1-1.32-2.26H9.32A8.69 8.69 0 0 1 8 13.558l.009.046Zm-1.754-3.63a8.783 8.783 0 0 1 0-3.892c1.164-.09 2.335-.09 3.5 0a8.782 8.782 0 0 1 0 3.874 22.78 22.78 0 0 1-3.51 0l.01.018Zm3.554 3.43c.419-.685.759-1.415 1.013-2.178a22.434 22.434 0 0 0 2.053-.326A5.71 5.71 0 0 1 9.8 13.385l.009.018Zm3.816-4.718v.045c0 .21-.063.418-.108.617-.763.195-1.536.35-2.316.463a10.365 10.365 0 0 0 0-3.584c.777.11 1.547.264 2.307.463 0 .2.09.408.117.617a.12.12 0 0 0 0 .054c.014.22.014.442 0 .663.01.214.007.43-.009.644l.01.018Z"></path></svg>';
 
 export class IconLanguage extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconLanguage extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--language', '', null, 'IconLanguage');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--language', '', null, 'IconLanguage');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--language');
         this.root.append(svg);
     }

package/icons/IconLanguageLarge.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--languageLarge"><path d="M27.664 19.719a12.146 12.146 0 0 0 0-7.455v-.07a12.25 12.25 0 0 0-23.275 0h-.07v.087a12.145 12.145 0 0 0 0 7.455v.07a12.25 12.25 0 0 0 23.275 0h.043l.027-.087Zm-15.217-.657a15.69 15.69 0 0 1 0-6.125 54.607 54.607 0 0 1 7.08 0 15.855 15.855 0 0 1 0 6.126 56.07 56.07 0 0 1-7.08 0Zm6.59 1.75a15.462 15.462 0 0 1-3.09 5.373 15.489 15.489 0 0 1-3.036-5.381c1.059.052 2.109.096 3.159.096 1.05 0 1.977 0 2.966-.052v-.035ZM5.5 16c0-.76.084-1.517.254-2.258l1.81-.28a53.691 53.691 0 0 1 3.107-.384 17.607 17.607 0 0 0 0 5.827 46.307 46.307 0 0 1-2.581-.315l-2.328-.341A10.604 10.604 0 0 1 5.5 16Zm7.455-4.848a15.305 15.305 0 0 1 3.089-5.372 15.278 15.278 0 0 1 3.036 5.381 57.195 57.195 0 0 0-6.125-.008Zm8.391 1.943c.875.087 1.75.184 2.581.315l2.328.341c.161.739.244 1.493.245 2.249 0 .76-.085 1.517-.254 2.258l-1.811.28c-1.033.157-2.074.28-3.106.384.33-1.928.335-3.897.017-5.827Zm4.279-1.199-1.47-.219a57.303 57.303 0 0 0-3.238-.376 16.992 16.992 0 0 0-2.695-5.547 10.5 10.5 0 0 1 7.403 6.142ZM13.804 5.771a16.878 16.878 0 0 0-2.765 5.557 54.69 54.69 0 0 0-3.772.446l-.892.105a10.5 10.5 0 0 1 7.464-6.152l-.035.044Zm-7.43 14.333 1.47.219c1.077.157 2.153.28 3.238.376a16.994 16.994 0 0 0 2.695 5.547 10.499 10.499 0 0 1-7.402-6.142Zm11.822 6.125a16.967 16.967 0 0 0 2.765-5.556c1.26-.105 2.52-.254 3.771-.447l.893-.105a10.5 10.5 0 0 1-7.464 6.152l.035-.044Z"></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--languageLarge"><path d="M27.664 19.719a12.146 12.146 0 0 0 0-7.455v-.07a12.25 12.25 0 0 0-23.275 0h-.07v.087a12.145 12.145 0 0 0 0 7.455v.07a12.25 12.25 0 0 0 23.275 0h.043l.027-.087Zm-15.217-.657a15.69 15.69 0 0 1 0-6.125 54.607 54.607 0 0 1 7.08 0 15.855 15.855 0 0 1 0 6.126 56.07 56.07 0 0 1-7.08 0Zm6.59 1.75a15.462 15.462 0 0 1-3.09 5.373 15.489 15.489 0 0 1-3.036-5.381c1.059.052 2.109.096 3.159.096 1.05 0 1.977 0 2.966-.052v-.035ZM5.5 16c0-.76.084-1.517.254-2.258l1.81-.28a53.691 53.691 0 0 1 3.107-.384 17.607 17.607 0 0 0 0 5.827 46.307 46.307 0 0 1-2.581-.315l-2.328-.341A10.604 10.604 0 0 1 5.5 16Zm7.455-4.848a15.305 15.305 0 0 1 3.089-5.372 15.278 15.278 0 0 1 3.036 5.381 57.195 57.195 0 0 0-6.125-.008Zm8.391 1.943c.875.087 1.75.184 2.581.315l2.328.341c.161.739.244 1.493.245 2.249 0 .76-.085 1.517-.254 2.258l-1.811.28c-1.033.157-2.074.28-3.106.384.33-1.928.335-3.897.017-5.827Zm4.279-1.199-1.47-.219a57.303 57.303 0 0 0-3.238-.376 16.992 16.992 0 0 0-2.695-5.547 10.5 10.5 0 0 1 7.403 6.142ZM13.804 5.771a16.878 16.878 0 0 0-2.765 5.557 54.69 54.69 0 0 0-3.772.446l-.892.105a10.5 10.5 0 0 1 7.464-6.152l-.035.044Zm-7.43 14.333 1.47.219c1.077.157 2.153.28 3.238.376a16.994 16.994 0 0 0 2.695 5.547 10.499 10.499 0 0 1-7.402-6.142Zm11.822 6.125a16.967 16.967 0 0 0 2.765-5.556c1.26-.105 2.52-.254 3.771-.447l.893-.105a10.5 10.5 0 0 1-7.464 6.152l.035-.044Z"></path></svg>';
 
 export class IconLanguageLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconLanguageLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--languageLarge', '', null, 'IconLanguageLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--languageLarge', '', null, 'IconLanguageLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--languageLarge');
         this.root.append(svg);
     }

package/icons/IconLaptop.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--laptop"><path d="M13.031 9.549V4.5A1.54 1.54 0 0 0 11.5 2.969h-7A1.54 1.54 0 0 0 2.969 4.5v5.049l-1.75 2.625v.201a1.54 1.54 0 0 0 1.531 1.531h10.5a1.54 1.54 0 0 0 1.531-1.531v-.201l-1.75-2.625ZM4.281 4.5a.219.219 0 0 1 .219-.219h7a.219.219 0 0 1 .219.219v4.594H4.28V4.5Zm8.969 8.094H9.566l-.315-.718H6.75l-.315.718H2.75a.229.229 0 0 1-.175-.088l1.4-2.1h8.05l1.4 2.1a.228.228 0 0 1-.175.088Z"></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--laptop"><path d="M13.031 9.549V4.5A1.54 1.54 0 0 0 11.5 2.969h-7A1.54 1.54 0 0 0 2.969 4.5v5.049l-1.75 2.625v.201a1.54 1.54 0 0 0 1.531 1.531h10.5a1.54 1.54 0 0 0 1.531-1.531v-.201l-1.75-2.625ZM4.281 4.5a.219.219 0 0 1 .219-.219h7a.219.219 0 0 1 .219.219v4.594H4.28V4.5Zm8.969 8.094H9.566l-.315-.718H6.75l-.315.718H2.75a.229.229 0 0 1-.175-.088l1.4-2.1h8.05l1.4 2.1a.228.228 0 0 1-.175.088Z"></path></svg>';
 
 export class IconLaptop extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconLaptop extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--laptop', '', null, 'IconLaptop');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--laptop', '', null, 'IconLaptop');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--laptop');
         this.root.append(svg);
     }

package/icons/IconLaptopError.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--laptopError"><path d="m8.919 6.25.971-.963-.928-.927L8 5.305l-.963-.945-.927.927.945.963h.07l-1.015.963.927.927L8 7.195l.962.945.928-.928-.945-.962h-.026Z"></path><path d="M13.031 9.111V4.062a1.54 1.54 0 0 0-1.531-1.53h-7a1.54 1.54 0 0 0-1.531 1.53v5.05l-1.75 2.624v.201A1.54 1.54 0 0 0 2.75 13.47h10.5a1.54 1.54 0 0 0 1.531-1.531v-.202l-1.75-2.625Zm-8.75-5.049a.219.219 0 0 1 .219-.218h7a.219.219 0 0 1 .219.219v4.593H4.28V4.062Zm8.969 8.094H9.566l-.315-.717H6.75l-.315.717H2.75a.227.227 0 0 1-.175-.087l1.4-2.1h8.05l1.4 2.1a.228.228 0 0 1-.175.087Z"></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--laptopError"><path d="m8.919 6.25.971-.963-.928-.927L8 5.305l-.963-.945-.927.927.945.963h.07l-1.015.963.927.927L8 7.195l.962.945.928-.928-.945-.962h-.026Z"></path><path d="M13.031 9.111V4.062a1.54 1.54 0 0 0-1.531-1.53h-7a1.54 1.54 0 0 0-1.531 1.53v5.05l-1.75 2.624v.201A1.54 1.54 0 0 0 2.75 13.47h10.5a1.54 1.54 0 0 0 1.531-1.531v-.202l-1.75-2.625Zm-8.75-5.049a.219.219 0 0 1 .219-.218h7a.219.219 0 0 1 .219.219v4.593H4.28V4.062Zm8.969 8.094H9.566l-.315-.717H6.75l-.315.717H2.75a.227.227 0 0 1-.175-.087l1.4-2.1h8.05l1.4 2.1a.228.228 0 0 1-.175.087Z"></path></svg>';
 
 export class IconLaptopError extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconLaptopError extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--laptopError', '', null, 'IconLaptopError');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--laptopError', '', null, 'IconLaptopError');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--laptopError');
         this.root.append(svg);
     }

package/icons/IconLaptopErrorLarge.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--laptopErrorLarge"><path d="m18.817 8.449-2.835 2.8-2.8-2.8-1.233 1.233 2.817 2.81-2.817 2.825 1.233 1.234 2.835-2.8 2.8 2.8 1.234-1.233-2.817-2.818 2.817-2.818-1.233-1.233Z"></path><path d="M26.5 19.264V7.25a2.625 2.625 0 0 0-2.625-2.625H8.125A2.625 2.625 0 0 0 5.5 7.25v12.014L2 25.389v.236a2.625 2.625 0 0 0 2.625 2.625h22.75A2.625 2.625 0 0 0 30 25.625v-.236l-3.5-6.125ZM7.25 7.25a.875.875 0 0 1 .875-.875h15.75a.875.875 0 0 1 .875.875v11.375H7.25V7.25ZM27.375 26.5h-8.207l-.657-.875H13.49l-.657.875H4.625a.875.875 0 0 1-.875-.683l3.133-5.442h18.235l3.132 5.442a.875.875 0 0 1-.875.683Z"></path><path d="M17.75 22.125h-3.5v1.75h3.5v-1.75Z"></path><path d="M23 22.125h-3.5v1.75H23v-1.75Z"></path><path d="M12.5 22.125H9v1.75h3.5v-1.75Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--laptopErrorLarge"><path d="m18.817 8.449-2.835 2.8-2.8-2.8-1.233 1.233 2.817 2.81-2.817 2.825 1.233 1.234 2.835-2.8 2.8 2.8 1.234-1.233-2.817-2.818 2.817-2.818-1.233-1.233Z"></path><path d="M26.5 19.264V7.25a2.625 2.625 0 0 0-2.625-2.625H8.125A2.625 2.625 0 0 0 5.5 7.25v12.014L2 25.389v.236a2.625 2.625 0 0 0 2.625 2.625h22.75A2.625 2.625 0 0 0 30 25.625v-.236l-3.5-6.125ZM7.25 7.25a.875.875 0 0 1 .875-.875h15.75a.875.875 0 0 1 .875.875v11.375H7.25V7.25ZM27.375 26.5h-8.207l-.657-.875H13.49l-.657.875H4.625a.875.875 0 0 1-.875-.683l3.133-5.442h18.235l3.132 5.442a.875.875 0 0 1-.875.683Z"></path><path d="M17.75 22.125h-3.5v1.75h3.5v-1.75Z"></path><path d="M23 22.125h-3.5v1.75H23v-1.75Z"></path><path d="M12.5 22.125H9v1.75h3.5v-1.75Z"></path></svg>';
 
 export class IconLaptopErrorLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconLaptopErrorLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--laptopErrorLarge', '', null, 'IconLaptopErrorLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--laptopErrorLarge', '', null, 'IconLaptopErrorLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--laptopErrorLarge');
         this.root.append(svg);
     }

package/icons/IconLaptopHighlight.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--laptopHighlight"><path d="M13.031 9.094V4.5A1.54 1.54 0 0 0 11.5 2.969h-7A1.54 1.54 0 0 0 2.969 4.5v4.594h-1.75V11.5a1.54 1.54 0 0 0 1.531 1.531h10.5a1.54 1.54 0 0 0 1.531-1.531V9.094h-1.75ZM4.281 4.5a.219.219 0 0 1 .219-.219h7a.219.219 0 0 1 .219.219v4.594H4.28V4.5Zm9.188 7a.219.219 0 0 1-.219.219H2.75a.219.219 0 0 1-.219-.219v-1.094H13.47V11.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--laptopHighlight"><path d="M13.031 9.094V4.5A1.54 1.54 0 0 0 11.5 2.969h-7A1.54 1.54 0 0 0 2.969 4.5v4.594h-1.75V11.5a1.54 1.54 0 0 0 1.531 1.531h10.5a1.54 1.54 0 0 0 1.531-1.531V9.094h-1.75ZM4.281 4.5a.219.219 0 0 1 .219-.219h7a.219.219 0 0 1 .219.219v4.594H4.28V4.5Zm9.188 7a.219.219 0 0 1-.219.219H2.75a.219.219 0 0 1-.219-.219v-1.094H13.47V11.5Z"></path></svg>';
 
 export class IconLaptopHighlight extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconLaptopHighlight extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--laptopHighlight', '', null, 'IconLaptopHighlight');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--laptopHighlight', '', null, 'IconLaptopHighlight');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--laptopHighlight');
         this.root.append(svg);
     }