@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/icons/IconHiVis.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--hiVis"><g clip-path="url(#prefix__clip0_3329_5152)"><path d="M14.204 6.679a1.034 1.034 0 0 0-.735-.306.384.384 0 0 1-.272-.114.384.384 0 0 1-.113-.271V2.645a1.115 1.115 0 0 0-1.112-1.094h-1.706L9.225 2.645H6.81L5.769 1.551H4.062c-.603 0-1.093.49-1.093 1.094v3.351a.434.434 0 0 1-.123.272.384.384 0 0 1-.271.113c-.28 0-.543.105-.744.307a1.039 1.039 0 0 0-.306.743l.026 5.381a1.66 1.66 0 0 0 1.645 1.646h3.701c.412 0 .797-.14 1.103-.403.306.254.691.402 1.102.402h3.737c.9 0 1.645-.743 1.645-1.645l.026-5.38c0-.28-.105-.543-.306-.744v-.01Zm-3.387-3.824h.928v3.133c.009.455.192.883.507 1.198.254.254.587.42.937.473v.271H8.674V5.078l2.135-2.232.008.009ZM2.811 9.251h4.506v1.269H2.82V9.251H2.81Zm5.863 0h4.506v1.269H8.674V9.251ZM3.739 7.195c.323-.324.498-.744.498-1.199V2.855h.945l2.135 2.231V7.94H2.811v-.271c.35-.053.674-.22.936-.473H3.74Zm3.456 5.819a.417.417 0 0 1-.298.122H3.161a.332.332 0 0 1-.332-.332v-.972h4.488v.884a.417.417 0 0 1-.122.298Zm5.644.122H9.102a.417.417 0 0 1-.42-.42v-.883h4.498v.98a.34.34 0 0 1-.341.332v-.009Z"></path></g><defs><clipPath id="prefix__clip0_3329_5152"><rect width="14" height="14" transform="translate(1 1)"></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 16 16" class="c-pieIcon c-pieIcon--hiVis"><g clip-path="url(#prefix__clip0_3329_5152)"><path d="M14.204 6.679a1.034 1.034 0 0 0-.735-.306.384.384 0 0 1-.272-.114.384.384 0 0 1-.113-.271V2.645a1.115 1.115 0 0 0-1.112-1.094h-1.706L9.225 2.645H6.81L5.769 1.551H4.062c-.603 0-1.093.49-1.093 1.094v3.351a.434.434 0 0 1-.123.272.384.384 0 0 1-.271.113c-.28 0-.543.105-.744.307a1.039 1.039 0 0 0-.306.743l.026 5.381a1.66 1.66 0 0 0 1.645 1.646h3.701c.412 0 .797-.14 1.103-.403.306.254.691.402 1.102.402h3.737c.9 0 1.645-.743 1.645-1.645l.026-5.38c0-.28-.105-.543-.306-.744v-.01Zm-3.387-3.824h.928v3.133c.009.455.192.883.507 1.198.254.254.587.42.937.473v.271H8.674V5.078l2.135-2.232.008.009ZM2.811 9.251h4.506v1.269H2.82V9.251H2.81Zm5.863 0h4.506v1.269H8.674V9.251ZM3.739 7.195c.323-.324.498-.744.498-1.199V2.855h.945l2.135 2.231V7.94H2.811v-.271c.35-.053.674-.22.936-.473H3.74Zm3.456 5.819a.417.417 0 0 1-.298.122H3.161a.332.332 0 0 1-.332-.332v-.972h4.488v.884a.417.417 0 0 1-.122.298Zm5.644.122H9.102a.417.417 0 0 1-.42-.42v-.883h4.498v.98a.34.34 0 0 1-.341.332v-.009Z"></path></g><defs><clipPath id="prefix__clip0_3329_5152"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconHiVis extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconHiVis extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--hiVis', '', null, 'IconHiVis');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--hiVis', '', null, 'IconHiVis');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--hiVis');
         this.root.append(svg);
     }

package/icons/IconHiVisLarge.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--hiVisLarge"><path d="M25.774 13.375a.978.978 0 0 1-.98-.98V6.349c0-.954-.77-1.724-1.724-1.724h-2.774l-.883.884h-6.817l-.883-.884H8.93c-.954 0-1.724.77-1.724 1.724v6.046c0 .543-.437.98-.98.98-.883 0-1.601.717-1.601 1.601v9.669a2.734 2.734 0 0 0 2.73 2.73h6.781a2.72 2.72 0 0 0 1.855-.744 2.72 2.72 0 0 0 1.855.744h6.782a2.737 2.737 0 0 0 2.747-2.73v-9.669c0-.884-.718-1.601-1.601-1.601Zm-4.752-7 2.022-.018v6.047a2.741 2.741 0 0 0 2.581 2.73v2.695h-8.75v-7.306l4.148-4.148Zm-5.897 14.936h-8.75v-1.75h8.75v1.75Zm1.75-1.75h8.75v1.75h-8.75v-1.75Zm.788-12.302L16 8.912l-.875-.875-.779-.778h3.317Zm-8.707 5.136v-6.02h2.03l4.139 4.139v7.306h-8.75v-2.695a2.741 2.741 0 0 0 2.581-2.73Zm5.189 13.23h-6.79a.978.978 0 0 1-.98-.98V23.07h8.75v1.575c0 .543-.438.98-.98.98Zm10.5 0h-6.781a.98.98 0 0 1-.989-.98V23.07h8.75v1.575c0 .543-.438.98-.98.98Z"></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--hiVisLarge"><path d="M25.774 13.375a.978.978 0 0 1-.98-.98V6.349c0-.954-.77-1.724-1.724-1.724h-2.774l-.883.884h-6.817l-.883-.884H8.93c-.954 0-1.724.77-1.724 1.724v6.046c0 .543-.437.98-.98.98-.883 0-1.601.717-1.601 1.601v9.669a2.734 2.734 0 0 0 2.73 2.73h6.781a2.72 2.72 0 0 0 1.855-.744 2.72 2.72 0 0 0 1.855.744h6.782a2.737 2.737 0 0 0 2.747-2.73v-9.669c0-.884-.718-1.601-1.601-1.601Zm-4.752-7 2.022-.018v6.047a2.741 2.741 0 0 0 2.581 2.73v2.695h-8.75v-7.306l4.148-4.148Zm-5.897 14.936h-8.75v-1.75h8.75v1.75Zm1.75-1.75h8.75v1.75h-8.75v-1.75Zm.788-12.302L16 8.912l-.875-.875-.779-.778h3.317Zm-8.707 5.136v-6.02h2.03l4.139 4.139v7.306h-8.75v-2.695a2.741 2.741 0 0 0 2.581-2.73Zm5.189 13.23h-6.79a.978.978 0 0 1-.98-.98V23.07h8.75v1.575c0 .543-.438.98-.98.98Zm10.5 0h-6.781a.98.98 0 0 1-.989-.98V23.07h8.75v1.575c0 .543-.438.98-.98.98Z"></path></svg>';
 
 export class IconHiVisLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconHiVisLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--hiVisLarge', '', null, 'IconHiVisLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--hiVisLarge', '', null, 'IconHiVisLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--hiVisLarge');
         this.root.append(svg);
     }

package/icons/IconHighContrast.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--highContrast"><g clip-path="url(#prefix__clip0_3104_5201)"><path d="M8 1.219C4.264 1.219 1.219 4.264 1.219 8c0 3.736 3.045 6.781 6.781 6.781 3.736 0 6.781-3.045 6.781-6.781 0-3.736-3.045-6.781-6.781-6.781Zm0 12.25A5.476 5.476 0 0 1 2.531 8c0-3.01 2.45-5.478 5.469-5.478a5.476 5.476 0 0 1 5.469 5.47A5.482 5.482 0 0 1 8 13.46v.009Z"></path><path d="M3.844 8A4.16 4.16 0 0 0 8 12.156V3.835a4.16 4.16 0 0 0-4.156 4.156V8Z"></path></g><defs><clipPath id="prefix__clip0_3104_5201"><rect width="14" height="14" transform="translate(1 1)"></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 16 16" class="c-pieIcon c-pieIcon--highContrast"><g clip-path="url(#prefix__clip0_3104_5201)"><path d="M8 1.219C4.264 1.219 1.219 4.264 1.219 8c0 3.736 3.045 6.781 6.781 6.781 3.736 0 6.781-3.045 6.781-6.781 0-3.736-3.045-6.781-6.781-6.781Zm0 12.25A5.476 5.476 0 0 1 2.531 8c0-3.01 2.45-5.478 5.469-5.478a5.476 5.476 0 0 1 5.469 5.47A5.482 5.482 0 0 1 8 13.46v.009Z"></path><path d="M3.844 8A4.16 4.16 0 0 0 8 12.156V3.835a4.16 4.16 0 0 0-4.156 4.156V8Z"></path></g><defs><clipPath id="prefix__clip0_3104_5201"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconHighContrast extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconHighContrast extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--highContrast', '', null, 'IconHighContrast');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--highContrast', '', null, 'IconHighContrast');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--highContrast');
         this.root.append(svg);
     }

package/icons/IconHighContrastLarge.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--highContrastLarge"><path d="M16 3.75C9.245 3.75 3.75 9.245 3.75 16S9.245 28.25 16 28.25 28.25 22.755 28.25 16 22.755 3.75 16 3.75Zm0 22.759c-5.793 0-10.509-4.716-10.509-10.509S10.207 5.491 16 5.491 26.509 10.207 26.509 16 21.793 26.509 16 26.509Z"></path><path d="M7.241 16c0 4.83 3.929 8.759 8.759 8.759V7.24c-4.83 0-8.759 3.929-8.759 8.759Z"></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--highContrastLarge"><path d="M16 3.75C9.245 3.75 3.75 9.245 3.75 16S9.245 28.25 16 28.25 28.25 22.755 28.25 16 22.755 3.75 16 3.75Zm0 22.759c-5.793 0-10.509-4.716-10.509-10.509S10.207 5.491 16 5.491 26.509 10.207 26.509 16 21.793 26.509 16 26.509Z"></path><path d="M7.241 16c0 4.83 3.929 8.759 8.759 8.759V7.24c-4.83 0-8.759 3.929-8.759 8.759Z"></path></svg>';
 
 export class IconHighContrastLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconHighContrastLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--highContrastLarge', '', null, 'IconHighContrastLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--highContrastLarge', '', null, 'IconHighContrastLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--highContrastLarge');
         this.root.append(svg);
     }

package/icons/IconHouse.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--house"><g clip-path="url(#prefix__clip0_15_1251)"><path d="M15.044 8.07c-.158-.166-3.815-4.174-6.125-5.722a1.75 1.75 0 0 0-1.794.008C4.771 3.896 1.114 7.904 1 8.07l.971.875 1.042-1.102v6.055h10.062V7.85c.613.648 1.024 1.094 1.041 1.103l.928-.884Zm-6.169 4.524v-1.969a.875.875 0 1 0-1.75 0v1.969H4.281V6.52a28.148 28.148 0 0 1 3.5-3.062.429.429 0 0 1 .385 0 28.33 28.33 0 0 1 3.5 3.071v6.073l-2.791-.01Z"></path></g><defs><clipPath id="prefix__clip0_15_1251"><rect width="14" height="14" transform="translate(1 1)"></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 16 16" class="c-pieIcon c-pieIcon--house"><g clip-path="url(#prefix__clip0_15_1251)"><path d="M15.044 8.07c-.158-.166-3.815-4.174-6.125-5.722a1.75 1.75 0 0 0-1.794.008C4.771 3.896 1.114 7.904 1 8.07l.971.875 1.042-1.102v6.055h10.062V7.85c.613.648 1.024 1.094 1.041 1.103l.928-.884Zm-6.169 4.524v-1.969a.875.875 0 1 0-1.75 0v1.969H4.281V6.52a28.148 28.148 0 0 1 3.5-3.062.429.429 0 0 1 .385 0 28.33 28.33 0 0 1 3.5 3.071v6.073l-2.791-.01Z"></path></g><defs><clipPath id="prefix__clip0_15_1251"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconHouse extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconHouse extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--house', '', null, 'IconHouse');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--house', '', null, 'IconHouse');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--house');
         this.root.append(svg);
     }

package/icons/IconHouseFilled.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--houseFilled"><g clip-path="url(#prefix__clip0_2290_4013)"><path d="M8.875 2.348a1.75 1.75 0 0 0-1.75.008C4.771 3.905 1.114 7.904 1 8.08l.971.875s.42-.464 1.042-1.111v6.055h10.062V7.86a38.793 38.793 0 0 1 1.033 1.103l.97-.875a47.034 47.034 0 0 0-6.203-5.74Zm-1.75 8.277a.875.875 0 0 1 1.75 0v1.969h-1.75v-1.969Z"></path></g><defs><clipPath id="prefix__clip0_2290_4013"><rect width="14" height="14" transform="translate(1 1)"></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 16 16" class="c-pieIcon c-pieIcon--houseFilled"><g clip-path="url(#prefix__clip0_2290_4013)"><path d="M8.875 2.348a1.75 1.75 0 0 0-1.75.008C4.771 3.905 1.114 7.904 1 8.08l.971.875s.42-.464 1.042-1.111v6.055h10.062V7.86a38.793 38.793 0 0 1 1.033 1.103l.97-.875a47.034 47.034 0 0 0-6.203-5.74Zm-1.75 8.277a.875.875 0 0 1 1.75 0v1.969h-1.75v-1.969Z"></path></g><defs><clipPath id="prefix__clip0_2290_4013"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconHouseFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconHouseFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--houseFilled', '', null, 'IconHouseFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--houseFilled', '', null, 'IconHouseFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--houseFilled');
         this.root.append(svg);
     }

package/icons/IconHouseFilledLarge.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--houseFilledLarge"><path d="M17.488 5.027a2.993 2.993 0 0 0-3.002 0c-4.375 2.8-11.305 10.098-11.611 10.37l1.269 1.207s.918-.954 2.231-2.249v13.02h19.25v-13.02a102.43 102.43 0 0 1 2.214 2.249l1.286-1.208c-.306-.271-7.245-7.569-11.637-10.369Zm-3.054 16.914a1.566 1.566 0 1 1 3.132 0v3.684h-3.132v-3.684Z"></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--houseFilledLarge"><path d="M17.488 5.027a2.993 2.993 0 0 0-3.002 0c-4.375 2.8-11.305 10.098-11.611 10.37l1.269 1.207s.918-.954 2.231-2.249v13.02h19.25v-13.02a102.43 102.43 0 0 1 2.214 2.249l1.286-1.208c-.306-.271-7.245-7.569-11.637-10.369Zm-3.054 16.914a1.566 1.566 0 1 1 3.132 0v3.684h-3.132v-3.684Z"></path></svg>';
 
 export class IconHouseFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconHouseFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--houseFilledLarge', '', null, 'IconHouseFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--houseFilledLarge', '', null, 'IconHouseFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--houseFilledLarge');
         this.root.append(svg);
     }

package/icons/IconHouseLarge.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--houseLarge"><path d="M17.488 5.028a2.975 2.975 0 0 0-2.993 0c-4.375 2.8-11.314 10.097-11.62 10.368l1.269 1.208s.875-.954 2.222-2.249v13.02h19.259v-13.02c1.313 1.295 2.196 2.223 2.223 2.249l1.277-1.208c-.306-.271-7.245-7.568-11.637-10.368Zm-3.054 20.597v-3.684a1.566 1.566 0 1 1 3.132 0v3.684h-3.132Zm9.441 0h-4.559v-3.684a3.316 3.316 0 1 0-6.632 0v3.684H8.125V12.649a56.732 56.732 0 0 1 7.28-6.125 1.269 1.269 0 0 1 1.164 0 56.376 56.376 0 0 1 7.306 6.125v12.976Z"></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--houseLarge"><path d="M17.488 5.028a2.975 2.975 0 0 0-2.993 0c-4.375 2.8-11.314 10.097-11.62 10.368l1.269 1.208s.875-.954 2.222-2.249v13.02h19.259v-13.02c1.313 1.295 2.196 2.223 2.223 2.249l1.277-1.208c-.306-.271-7.245-7.568-11.637-10.368Zm-3.054 20.597v-3.684a1.566 1.566 0 1 1 3.132 0v3.684h-3.132Zm9.441 0h-4.559v-3.684a3.316 3.316 0 1 0-6.632 0v3.684H8.125V12.649a56.732 56.732 0 0 1 7.28-6.125 1.269 1.269 0 0 1 1.164 0 56.376 56.376 0 0 1 7.306 6.125v12.976Z"></path></svg>';
 
 export class IconHouseLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconHouseLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--houseLarge', '', null, 'IconHouseLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--houseLarge', '', null, 'IconHouseLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--houseLarge');
         this.root.append(svg);
     }

package/icons/IconIceCream.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--iceCream"><path d="M12.148 7.939v-.875a2.625 2.625 0 0 0-.98-2.048 1.71 1.71 0 0 0 0-.21 3.185 3.185 0 0 0-6.37 0c0 .206.024.412.07.613a2.188 2.188 0 0 0-1.024 1.794V8a.604.604 0 0 0 .087.324l3.5 6.125a.657.657 0 0 0 1.138 0l3.5-6.125a.604.604 0 0 0 .079-.385Zm-6.02-3.176a1.872 1.872 0 0 1 3.71-.333h-.22c-.25-.014-.5.01-.743.07l.385 1.251a1.4 1.4 0 0 1 .341 0 1.251 1.251 0 0 1 1.216 1.295v.411a18.376 18.376 0 0 1-5.661-.035v-.21a.998.998 0 0 1 1.094-.91.997.997 0 0 1 .359.062l.367-1.252a2.476 2.476 0 0 0-.726-.122h-.096a1.085 1.085 0 0 1-.026-.228ZM8 12.802 5.734 8.876c.753.076 1.51.108 2.266.096.754.012 1.508-.02 2.258-.096L8 12.804Z"></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--iceCream"><path d="M12.148 7.939v-.875a2.625 2.625 0 0 0-.98-2.048 1.71 1.71 0 0 0 0-.21 3.185 3.185 0 0 0-6.37 0c0 .206.024.412.07.613a2.188 2.188 0 0 0-1.024 1.794V8a.604.604 0 0 0 .087.324l3.5 6.125a.657.657 0 0 0 1.138 0l3.5-6.125a.604.604 0 0 0 .079-.385Zm-6.02-3.176a1.872 1.872 0 0 1 3.71-.333h-.22c-.25-.014-.5.01-.743.07l.385 1.251a1.4 1.4 0 0 1 .341 0 1.251 1.251 0 0 1 1.216 1.295v.411a18.376 18.376 0 0 1-5.661-.035v-.21a.998.998 0 0 1 1.094-.91.997.997 0 0 1 .359.062l.367-1.252a2.476 2.476 0 0 0-.726-.122h-.096a1.085 1.085 0 0 1-.026-.228ZM8 12.802 5.734 8.876c.753.076 1.51.108 2.266.096.754.012 1.508-.02 2.258-.096L8 12.804Z"></path></svg>';
 
 export class IconIceCream extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconIceCream extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--iceCream', '', null, 'IconIceCream');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--iceCream', '', null, 'IconIceCream');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--iceCream');
         this.root.append(svg);
     }

package/icons/IconIceCreamLarge.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--iceCreamLarge"><path d="M24.698 15.694a.875.875 0 0 0-.272-.263V14.25a4.576 4.576 0 0 0-1.067-2.922c.053-.336.08-.676.078-1.015a7.438 7.438 0 0 0-14.875 0 7 7 0 0 0 .21 1.644 3.657 3.657 0 0 0-1.207 2.625v.823a.928.928 0 0 0-.254.236.874.874 0 0 0 0 .945c1.339 2.188 2.695 4.165 4.008 6.125 1.312 1.96 2.625 3.859 3.955 6.003a.875.875 0 0 0 .726.411.874.874 0 0 0 .726-.394l7.963-12.084a.875.875 0 0 0 .009-.953ZM16 4.625a5.688 5.688 0 0 1 5.67 5.364 5.136 5.136 0 0 0-2.17-.49 4.944 4.944 0 0 0-1.391.192l.472 1.68c.286-.077.58-.118.875-.122a3.09 3.09 0 0 1 3.22 3.001v1.225c-1.688.21-3.911.411-4.13.429a3.123 3.123 0 0 0-2.896 2.108c-.298.63-.35.63-.525.63-.175 0-.262 0-.586-.752a2.913 2.913 0 0 0-2.485-2.083 43.72 43.72 0 0 1-2.713-.315v-.875c0-1.225 1.269-2.213 2.827-2.213a4.1 4.1 0 0 1 .735.07l.358-1.75a5.311 5.311 0 0 0-2.87.192 5.239 5.239 0 0 1-.079-.604A5.696 5.696 0 0 1 16 4.625Zm0 22.006c-1.094-1.75-2.205-3.342-3.273-4.917-.97-1.418-1.968-2.87-2.957-4.375.656.087 1.321.157 2.004.21h.096c.543 0 .709.306 1.059 1.067a2.39 2.39 0 0 0 2.196 1.759 2.266 2.266 0 0 0 2.109-1.636c.323-.683.507-1.068 1.417-1.111.105 0 1.864-.158 3.5-.342L16 26.631Z"></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--iceCreamLarge"><path d="M24.698 15.694a.875.875 0 0 0-.272-.263V14.25a4.576 4.576 0 0 0-1.067-2.922c.053-.336.08-.676.078-1.015a7.438 7.438 0 0 0-14.875 0 7 7 0 0 0 .21 1.644 3.657 3.657 0 0 0-1.207 2.625v.823a.928.928 0 0 0-.254.236.874.874 0 0 0 0 .945c1.339 2.188 2.695 4.165 4.008 6.125 1.312 1.96 2.625 3.859 3.955 6.003a.875.875 0 0 0 .726.411.874.874 0 0 0 .726-.394l7.963-12.084a.875.875 0 0 0 .009-.953ZM16 4.625a5.688 5.688 0 0 1 5.67 5.364 5.136 5.136 0 0 0-2.17-.49 4.944 4.944 0 0 0-1.391.192l.472 1.68c.286-.077.58-.118.875-.122a3.09 3.09 0 0 1 3.22 3.001v1.225c-1.688.21-3.911.411-4.13.429a3.123 3.123 0 0 0-2.896 2.108c-.298.63-.35.63-.525.63-.175 0-.262 0-.586-.752a2.913 2.913 0 0 0-2.485-2.083 43.72 43.72 0 0 1-2.713-.315v-.875c0-1.225 1.269-2.213 2.827-2.213a4.1 4.1 0 0 1 .735.07l.358-1.75a5.311 5.311 0 0 0-2.87.192 5.239 5.239 0 0 1-.079-.604A5.696 5.696 0 0 1 16 4.625Zm0 22.006c-1.094-1.75-2.205-3.342-3.273-4.917-.97-1.418-1.968-2.87-2.957-4.375.656.087 1.321.157 2.004.21h.096c.543 0 .709.306 1.059 1.067a2.39 2.39 0 0 0 2.196 1.759 2.266 2.266 0 0 0 2.109-1.636c.323-.683.507-1.068 1.417-1.111.105 0 1.864-.158 3.5-.342L16 26.631Z"></path></svg>';
 
 export class IconIceCreamLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconIceCreamLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--iceCreamLarge', '', null, 'IconIceCreamLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--iceCreamLarge', '', null, 'IconIceCreamLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--iceCreamLarge');
         this.root.append(svg);
     }

package/icons/IconIdCard.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--idCard"><path d="M5.813 9.094h-.875a1.54 1.54 0 0 1-1.532-1.531v-.875a1.54 1.54 0 0 1 1.531-1.532h.875a1.54 1.54 0 0 1 1.532 1.532v.875a1.54 1.54 0 0 1-1.532 1.53Zm-.875-2.625a.219.219 0 0 0-.22.218v.875a.219.219 0 0 0 .22.22h.875a.219.219 0 0 0 .218-.22v-.875a.219.219 0 0 0-.218-.218h-.875Z"></path><path d="M13.25 2.969H2.75A1.54 1.54 0 0 0 1.219 4.5v7a1.54 1.54 0 0 0 1.531 1.531h10.5a1.54 1.54 0 0 0 1.531-1.531v-7a1.54 1.54 0 0 0-1.531-1.531Zm.219 8.531a.219.219 0 0 1-.219.219H2.75a.219.219 0 0 1-.219-.219v-7a.219.219 0 0 1 .219-.219h10.5a.219.219 0 0 1 .219.219v7Z"></path><path d="m11.491 10.406.657-1.312H9.103v1.312"></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--idCard"><path d="M5.813 9.094h-.875a1.54 1.54 0 0 1-1.532-1.531v-.875a1.54 1.54 0 0 1 1.531-1.532h.875a1.54 1.54 0 0 1 1.532 1.532v.875a1.54 1.54 0 0 1-1.532 1.53Zm-.875-2.625a.219.219 0 0 0-.22.218v.875a.219.219 0 0 0 .22.22h.875a.219.219 0 0 0 .218-.22v-.875a.219.219 0 0 0-.218-.218h-.875Z"></path><path d="M13.25 2.969H2.75A1.54 1.54 0 0 0 1.219 4.5v7a1.54 1.54 0 0 0 1.531 1.531h10.5a1.54 1.54 0 0 0 1.531-1.531v-7a1.54 1.54 0 0 0-1.531-1.531Zm.219 8.531a.219.219 0 0 1-.219.219H2.75a.219.219 0 0 1-.219-.219v-7a.219.219 0 0 1 .219-.219h10.5a.219.219 0 0 1 .219.219v7Z"></path><path d="m11.491 10.406.657-1.312H9.103v1.312"></path></svg>';
 
 export class IconIdCard extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconIdCard extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--idCard', '', null, 'IconIdCard');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--idCard', '', null, 'IconIdCard');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--idCard');
         this.root.append(svg);
     }

package/icons/IconIdCardLarge.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--idCardLarge"><path d="M26.5 6.375h-21A2.625 2.625 0 0 0 2.875 9v14A2.625 2.625 0 0 0 5.5 25.625h21A2.625 2.625 0 0 0 29.125 23V9A2.625 2.625 0 0 0 26.5 6.375ZM27.375 23a.875.875 0 0 1-.875.875h-21A.875.875 0 0 1 4.625 23V9a.875.875 0 0 1 .875-.875h21a.875.875 0 0 1 .875.875v14Z"></path><path d="M12.5 9.875H9A2.625 2.625 0 0 0 6.375 12.5V16A2.625 2.625 0 0 0 9 18.625h3.5A2.625 2.625 0 0 0 15.125 16v-3.5A2.625 2.625 0 0 0 12.5 9.875ZM13.375 16a.875.875 0 0 1-.875.875H9A.875.875 0 0 1 8.125 16v-3.5A.875.875 0 0 1 9 11.625h3.5a.875.875 0 0 1 .875.875V16Z"></path><path d="m24.409 18.625.875-1.75h-6.659v1.75h5.784Z"></path><path d="m22.659 22.125.875-1.75h-4.909v1.75h4.034Z"></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--idCardLarge"><path d="M26.5 6.375h-21A2.625 2.625 0 0 0 2.875 9v14A2.625 2.625 0 0 0 5.5 25.625h21A2.625 2.625 0 0 0 29.125 23V9A2.625 2.625 0 0 0 26.5 6.375ZM27.375 23a.875.875 0 0 1-.875.875h-21A.875.875 0 0 1 4.625 23V9a.875.875 0 0 1 .875-.875h21a.875.875 0 0 1 .875.875v14Z"></path><path d="M12.5 9.875H9A2.625 2.625 0 0 0 6.375 12.5V16A2.625 2.625 0 0 0 9 18.625h3.5A2.625 2.625 0 0 0 15.125 16v-3.5A2.625 2.625 0 0 0 12.5 9.875ZM13.375 16a.875.875 0 0 1-.875.875H9A.875.875 0 0 1 8.125 16v-3.5A.875.875 0 0 1 9 11.625h3.5a.875.875 0 0 1 .875.875V16Z"></path><path d="m24.409 18.625.875-1.75h-6.659v1.75h5.784Z"></path><path d="m22.659 22.125.875-1.75h-4.909v1.75h4.034Z"></path></svg>';
 
 export class IconIdCardLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconIdCardLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--idCardLarge', '', null, 'IconIdCardLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--idCardLarge', '', null, 'IconIdCardLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--idCardLarge');
         this.root.append(svg);
     }

package/icons/IconImage.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--image"><path d="M1.219 2.219V14.03H14.78V2.22H1.22Zm12.25 1.312V7.82A2.756 2.756 0 0 1 12.2 9.48c-1.75 1.103-2.922.525-4.375-.192-1.453-.718-3.063-1.514-5.25-.525v-5.25l10.894.017ZM2.53 12.72V10.25c1.969-1.12 3.229-.507 4.699.21a6.922 6.922 0 0 0 3.08.945 4.856 4.856 0 0 0 2.581-.805c.202-.13.395-.273.578-.429v2.547H2.53ZM10.187 9a2.187 2.187 0 1 0 0-4.375 2.187 2.187 0 0 0 0 4.375Zm0-3.063a.875.875 0 1 1 0 1.75.875.875 0 0 1 0-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 16 16" class="c-pieIcon c-pieIcon--image"><path d="M1.219 2.219V14.03H14.78V2.22H1.22Zm12.25 1.312V7.82A2.756 2.756 0 0 1 12.2 9.48c-1.75 1.103-2.922.525-4.375-.192-1.453-.718-3.063-1.514-5.25-.525v-5.25l10.894.017ZM2.53 12.72V10.25c1.969-1.12 3.229-.507 4.699.21a6.922 6.922 0 0 0 3.08.945 4.856 4.856 0 0 0 2.581-.805c.202-.13.395-.273.578-.429v2.547H2.53ZM10.187 9a2.187 2.187 0 1 0 0-4.375 2.187 2.187 0 0 0 0 4.375Zm0-3.063a.875.875 0 1 1 0 1.75.875.875 0 0 1 0-1.75Z"></path></svg>';
 
 export class IconImage extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconImage extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--image', '', null, 'IconImage');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--image', '', null, 'IconImage');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--image');
         this.root.append(svg);
     }

package/icons/IconImageAdd.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--imageAdd"><path d="M13.469 7.469v.35a2.748 2.748 0 0 1-1.208 1.619l-.061.043c-1.75 1.103-2.922.525-4.375-.192-1.453-.718-3.063-1.514-5.25-.525v-5.25h7V2.219H1.219V14.03H14.78V7.47H13.47Zm0 5.25H2.53V10.25c1.969-1.12 3.229-.507 4.699.21a6.922 6.922 0 0 0 3.08.945 4.856 4.856 0 0 0 2.581-.805c.202-.13.395-.273.578-.429v2.547Z"></path><path d="M14.125 4.844h-1.969V2.875h-1.312v1.969H8.875v1.312h1.969v1.969h1.312V6.156h1.969V4.844Z"></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--imageAdd"><path d="M13.469 7.469v.35a2.748 2.748 0 0 1-1.208 1.619l-.061.043c-1.75 1.103-2.922.525-4.375-.192-1.453-.718-3.063-1.514-5.25-.525v-5.25h7V2.219H1.219V14.03H14.78V7.47H13.47Zm0 5.25H2.53V10.25c1.969-1.12 3.229-.507 4.699.21a6.922 6.922 0 0 0 3.08.945 4.856 4.856 0 0 0 2.581-.805c.202-.13.395-.273.578-.429v2.547Z"></path><path d="M14.125 4.844h-1.969V2.875h-1.312v1.969H8.875v1.312h1.969v1.969h1.312V6.156h1.969V4.844Z"></path></svg>';
 
 export class IconImageAdd extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconImageAdd extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--imageAdd', '', null, 'IconImageAdd');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--imageAdd', '', null, 'IconImageAdd');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--imageAdd');
         this.root.append(svg);
     }

package/icons/IconImageAddLarge.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--imageAddLarge"><path d="M11.625 16.875a3.937 3.937 0 1 0-3.938-3.938 3.946 3.946 0 0 0 3.938 3.938Zm0-6.125a2.187 2.187 0 1 1 0 4.375 2.187 2.187 0 0 1 0-4.375Z"></path><path d="M27.375 10.313v6.124c-4.629-1.548-7.621.438-10.273 2.188-.63.42-1.233.805-1.846 1.155-2.896-1.155-6.151-2.494-10.631-.543V7.25h12.25V5.5h-14v21h26.25V10.312h-1.75Zm-9.31 9.773c2.564-1.697 4.987-3.307 8.89-1.986a5.662 5.662 0 0 1-2.275 2.047 8.339 8.339 0 0 1-7.394.447l.779-.508Zm9.31 4.664H4.625v-3.579c4.235-2.143 7.079-.971 10.071.28A15.192 15.192 0 0 0 20.62 23a10.316 10.316 0 0 0 4.874-1.313 8.004 8.004 0 0 0 1.881-1.312v4.375Z"></path><path d="M28.25 6.813h-3.938V2.874h-1.75v3.938h-3.937v1.75h3.938V12.5h1.75V8.562h3.937v-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--imageAddLarge"><path d="M11.625 16.875a3.937 3.937 0 1 0-3.938-3.938 3.946 3.946 0 0 0 3.938 3.938Zm0-6.125a2.187 2.187 0 1 1 0 4.375 2.187 2.187 0 0 1 0-4.375Z"></path><path d="M27.375 10.313v6.124c-4.629-1.548-7.621.438-10.273 2.188-.63.42-1.233.805-1.846 1.155-2.896-1.155-6.151-2.494-10.631-.543V7.25h12.25V5.5h-14v21h26.25V10.312h-1.75Zm-9.31 9.773c2.564-1.697 4.987-3.307 8.89-1.986a5.662 5.662 0 0 1-2.275 2.047 8.339 8.339 0 0 1-7.394.447l.779-.508Zm9.31 4.664H4.625v-3.579c4.235-2.143 7.079-.971 10.071.28A15.192 15.192 0 0 0 20.62 23a10.316 10.316 0 0 0 4.874-1.313 8.004 8.004 0 0 0 1.881-1.312v4.375Z"></path><path d="M28.25 6.813h-3.938V2.874h-1.75v3.938h-3.937v1.75h3.938V12.5h1.75V8.562h3.937v-1.75Z"></path></svg>';
 
 export class IconImageAddLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconImageAddLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--imageAddLarge', '', null, 'IconImageAddLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--imageAddLarge', '', null, 'IconImageAddLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--imageAddLarge');
         this.root.append(svg);
     }

package/icons/IconImageFilled.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--imageFilled"><path d="M1.219 2.219V14.03H14.78V2.22H1.22Zm12.25 1.312V7.82A2.756 2.756 0 0 1 12.2 9.48c-1.75 1.103-2.922.525-4.375-.192-1.453-.718-3.063-1.514-5.25-.525v-5.25l10.894.017ZM10.188 9a2.187 2.187 0 1 0 0-4.375 2.187 2.187 0 0 0 0 4.375Z"></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--imageFilled"><path d="M1.219 2.219V14.03H14.78V2.22H1.22Zm12.25 1.312V7.82A2.756 2.756 0 0 1 12.2 9.48c-1.75 1.103-2.922.525-4.375-.192-1.453-.718-3.063-1.514-5.25-.525v-5.25l10.894.017ZM10.188 9a2.187 2.187 0 1 0 0-4.375 2.187 2.187 0 0 0 0 4.375Z"></path></svg>';
 
 export class IconImageFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconImageFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--imageFilled', '', null, 'IconImageFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--imageFilled', '', null, 'IconImageFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--imageFilled');
         this.root.append(svg);
     }

package/icons/IconImageFilledLarge.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--imageFilledLarge"><path d="M19.211 19.334a6.326 6.326 0 0 0 4.664-.709c.463-.234.88-.548 1.234-.927l.14-.167a2.53 2.53 0 0 0 .428-.735l.132-.315s.043-.114.14-.429c-3.824-.734-6.449.998-8.847 2.573.526.21 1.015.394 1.497.534.2.07.405.128.612.175Z"></path><path d="M2.875 5.5v21h26.25v-21H2.875Zm24.5 1.75v10.036a4.092 4.092 0 0 1-.297.674l-.08.14c-.043.07-.104.149-.157.236-.052.088-.096.123-.14.193l-.201.236-.219.236-.245.228c-.13.1-.268.19-.411.271-.079.061-.157.131-.254.192-.096.062-.402.263-.638.394l-.088.053c-.341.175-.674.323-.997.463l-.184.07a9.118 9.118 0 0 1-.875.298h-.149a6.719 6.719 0 0 1-.796.158h-.131a6.594 6.594 0 0 1-.823.052 1.813 1.813 0 0 1-.219 0h-.63l-.428-.052h-.193c-.201 0-.402-.07-.604-.123l-.586-.157-.604-.202-.122-.044h-.088l-.437-.227h-.184l-.516-.21h-.07l-.63-.262-.123-.053a33.094 33.094 0 0 0-1.75-.691 15.26 15.26 0 0 0-1.977-.586h-.21a10.376 10.376 0 0 0-5.434.297c-.411.131-.875.289-1.269.473V7.25h22.759Z"></path><path d="M10.024 16.525a3.93 3.93 0 0 0 1.601.35c.149 0 .28 0 .42-.044a3.912 3.912 0 1 0-2.021-.306Z"></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--imageFilledLarge"><path d="M19.211 19.334a6.326 6.326 0 0 0 4.664-.709c.463-.234.88-.548 1.234-.927l.14-.167a2.53 2.53 0 0 0 .428-.735l.132-.315s.043-.114.14-.429c-3.824-.734-6.449.998-8.847 2.573.526.21 1.015.394 1.497.534.2.07.405.128.612.175Z"></path><path d="M2.875 5.5v21h26.25v-21H2.875Zm24.5 1.75v10.036a4.092 4.092 0 0 1-.297.674l-.08.14c-.043.07-.104.149-.157.236-.052.088-.096.123-.14.193l-.201.236-.219.236-.245.228c-.13.1-.268.19-.411.271-.079.061-.157.131-.254.192-.096.062-.402.263-.638.394l-.088.053c-.341.175-.674.323-.997.463l-.184.07a9.118 9.118 0 0 1-.875.298h-.149a6.719 6.719 0 0 1-.796.158h-.131a6.594 6.594 0 0 1-.823.052 1.813 1.813 0 0 1-.219 0h-.63l-.428-.052h-.193c-.201 0-.402-.07-.604-.123l-.586-.157-.604-.202-.122-.044h-.088l-.437-.227h-.184l-.516-.21h-.07l-.63-.262-.123-.053a33.094 33.094 0 0 0-1.75-.691 15.26 15.26 0 0 0-1.977-.586h-.21a10.376 10.376 0 0 0-5.434.297c-.411.131-.875.289-1.269.473V7.25h22.759Z"></path><path d="M10.024 16.525a3.93 3.93 0 0 0 1.601.35c.149 0 .28 0 .42-.044a3.912 3.912 0 1 0-2.021-.306Z"></path></svg>';
 
 export class IconImageFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconImageFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--imageFilledLarge', '', null, 'IconImageFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--imageFilledLarge', '', null, 'IconImageFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--imageFilledLarge');
         this.root.append(svg);
     }

package/icons/IconImageLarge.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--imageLarge"><path d="M2.875 5.5v21h26.25v-21H2.875Zm24.5 1.75v9.144c-4.629-1.505-7.621.481-10.273 2.231-.63.42-1.233.805-1.846 1.155-2.896-1.155-6.151-2.494-10.631-.543V7.25h22.75Zm-.42 10.85a5.662 5.662 0 0 1-2.275 2.047 8.339 8.339 0 0 1-7.394.447l.779-.508c2.564-1.697 4.987-3.307 8.89-1.986Zm-22.33 6.65v-3.579c4.235-2.143 7.079-.971 10.071.28A15.192 15.192 0 0 0 20.62 23a10.316 10.316 0 0 0 4.874-1.313 8.004 8.004 0 0 0 1.881-1.312v4.375H4.625Zm7-7.875a3.937 3.937 0 1 0-3.938-3.938 3.946 3.946 0 0 0 3.938 3.938Zm0-6.125a2.187 2.187 0 1 1 0 4.375 2.187 2.187 0 0 1 0-4.375Z"></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--imageLarge"><path d="M2.875 5.5v21h26.25v-21H2.875Zm24.5 1.75v9.144c-4.629-1.505-7.621.481-10.273 2.231-.63.42-1.233.805-1.846 1.155-2.896-1.155-6.151-2.494-10.631-.543V7.25h22.75Zm-.42 10.85a5.662 5.662 0 0 1-2.275 2.047 8.339 8.339 0 0 1-7.394.447l.779-.508c2.564-1.697 4.987-3.307 8.89-1.986Zm-22.33 6.65v-3.579c4.235-2.143 7.079-.971 10.071.28A15.192 15.192 0 0 0 20.62 23a10.316 10.316 0 0 0 4.874-1.313 8.004 8.004 0 0 0 1.881-1.312v4.375H4.625Zm7-7.875a3.937 3.937 0 1 0-3.938-3.938 3.946 3.946 0 0 0 3.938 3.938Zm0-6.125a2.187 2.187 0 1 1 0 4.375 2.187 2.187 0 0 1 0-4.375Z"></path></svg>';
 
 export class IconImageLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconImageLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--imageLarge', '', null, 'IconImageLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--imageLarge', '', null, 'IconImageLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--imageLarge');
         this.root.append(svg);
     }

package/icons/IconInfoCircle.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--infoCircle"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm0 12.25A5.469 5.469 0 1 1 8 2.53a5.469 5.469 0 0 1 0 10.938ZM7.344 7.29h1.312v3.334H7.344V7.291Zm1.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--infoCircle"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm0 12.25A5.469 5.469 0 1 1 8 2.53a5.469 5.469 0 0 1 0 10.938ZM7.344 7.29h1.312v3.334H7.344V7.291Zm1.531-1.916a.875.875 0 1 1-1.75 0 .875.875 0 0 1 1.75 0Z"></path></svg>';
 
 export class IconInfoCircle extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconInfoCircle extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--infoCircle', '', null, 'IconInfoCircle');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--infoCircle', '', null, 'IconInfoCircle');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--infoCircle');
         this.root.append(svg);
     }

package/icons/IconInfoCircleFilled.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--infoCircleFilled"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219ZM7.344 7.29h1.312v3.334H7.344V7.291Zm1.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--infoCircleFilled"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219ZM7.344 7.29h1.312v3.334H7.344V7.291Zm1.531-1.916a.875.875 0 1 1-1.75 0 .875.875 0 0 1 1.75 0Z"></path></svg>';
 
 export class IconInfoCircleFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconInfoCircleFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--infoCircleFilled', '', null, 'IconInfoCircleFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--infoCircleFilled', '', null, 'IconInfoCircleFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--infoCircleFilled');
         this.root.append(svg);
     }