@justeattakeaway/pie-icons-webc 0.2.0 → 0.4.0

package/icons/IconOrderLarge.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--orderLarge"><path d="M23.875 3.75H8.125A2.625 2.625 0 0 0 5.5 6.375v21.927l3.561-1.898L12.5 28.38l3.5-1.968 3.5 1.968 3.43-1.977 3.57 1.898V6.375a2.625 2.625 0 0 0-2.625-2.625Zm.875 21.639-.989-.525a1.751 1.751 0 0 0-1.688 0l-2.625 1.479-2.625-1.488a1.75 1.75 0 0 0-1.75 0l-2.626 1.488-2.52-1.453a1.75 1.75 0 0 0-1.688 0l-.989.499V6.375a.875.875 0 0 1 .875-.875h15.75a.875.875 0 0 1 .875.875v19.014ZM10.75 16h10.5v1.75h-10.5V16Zm1.75 3.5h7v1.75h-7V19.5Zm2.844-5.766-2.844-2.8 1.242-1.243 1.567 1.575 3.754-3.762 1.312 1.242-5.031 4.988Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--orderLarge"><path d="M23.875 3.75H8.125A2.625 2.625 0 0 0 5.5 6.375v21.927l3.561-1.898L12.5 28.38l3.5-1.968 3.5 1.968 3.43-1.977 3.57 1.898V6.375a2.625 2.625 0 0 0-2.625-2.625Zm.875 21.639-.989-.525a1.751 1.751 0 0 0-1.688 0l-2.625 1.479-2.625-1.488a1.75 1.75 0 0 0-1.75 0l-2.626 1.488-2.52-1.453a1.75 1.75 0 0 0-1.688 0l-.989.499V6.375a.875.875 0 0 1 .875-.875h15.75a.875.875 0 0 1 .875.875v19.014ZM10.75 16h10.5v1.75h-10.5V16Zm1.75 3.5h7v1.75h-7V19.5Zm2.844-5.766-2.844-2.8 1.242-1.243 1.567 1.575 3.754-3.762 1.312 1.242-5.031 4.988Z"></path></svg>';
 
 export class IconOrderLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconOrderLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--orderLarge', '', null, 'IconOrderLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--orderLarge', '', null, 'IconOrderLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--orderLarge');
         this.root.append(svg);
     }

package/icons/IconOver16Filled.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--over16Filled"><path d="M7.29 7.987c.087-.03.18-.04.273-.03a.652.652 0 0 1 .717.677.665.665 0 0 1-.717.679.665.665 0 0 1-.718-.692.652.652 0 0 1 .445-.634Z"></path><path fill-rule="evenodd" d="M3.625 2.313h8.75a1.313 1.313 0 0 1 1.313 1.312v8.75a1.313 1.313 0 0 1-1.313 1.313h-8.75a1.313 1.313 0 0 1-1.313-1.313v-8.75a1.313 1.313 0 0 1 1.313-1.313Zm.595 7.634h.831V5.813h-.595l-1.199.538.28.704.683-.254v3.146Zm1.754-1.969c0 1.365.626 2.043 1.61 2.043a1.43 1.43 0 0 0 1.527-1.435 1.313 1.313 0 0 0-1.37-1.334 1.111 1.111 0 0 0-.935.407c0-.713.34-1.15.875-1.15a1.024 1.024 0 0 1 .756.318l.526-.577a1.597 1.597 0 0 0-1.278-.512c-.94 0-1.71.726-1.71 2.24Zm5.526.46h.875v-.876H11.5v-.875h-.875v.875H9.75v.875h.875v.876h.875v-.876Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--over16Filled"><path d="M7.29 7.987c.087-.03.18-.04.273-.03a.652.652 0 0 1 .717.677.665.665 0 0 1-.717.679.665.665 0 0 1-.718-.692.652.652 0 0 1 .445-.634Z"></path><path fill-rule="evenodd" d="M3.625 2.313h8.75a1.313 1.313 0 0 1 1.313 1.312v8.75a1.313 1.313 0 0 1-1.313 1.313h-8.75a1.313 1.313 0 0 1-1.313-1.313v-8.75a1.313 1.313 0 0 1 1.313-1.313Zm.595 7.634h.831V5.813h-.595l-1.199.538.28.704.683-.254v3.146Zm1.754-1.969c0 1.365.626 2.043 1.61 2.043a1.43 1.43 0 0 0 1.527-1.435 1.313 1.313 0 0 0-1.37-1.334 1.111 1.111 0 0 0-.935.407c0-.713.34-1.15.875-1.15a1.024 1.024 0 0 1 .756.318l.526-.577a1.597 1.597 0 0 0-1.278-.512c-.94 0-1.71.726-1.71 2.24Zm5.526.46h.875v-.876H11.5v-.875h-.875v.875H9.75v.875h.875v.876h.875v-.876Z" clip-rule="evenodd"></path></svg>';
 
 export class IconOver16Filled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconOver16Filled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--over16Filled', '', null, 'IconOver16Filled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--over16Filled', '', null, 'IconOver16Filled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--over16Filled');
         this.root.append(svg);
     }

package/icons/IconOver16FilledLarge.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--over16FilledLarge"><path d="M14.58 15.973c.175-.058.36-.08.545-.06a1.304 1.304 0 0 1 1.435 1.356 1.33 1.33 0 0 1-1.435 1.356 1.33 1.33 0 0 1-1.435-1.383 1.304 1.304 0 0 1 .89-1.269Z"></path><path fill-rule="evenodd" d="M7.25 4.625h17.5a2.625 2.625 0 0 1 2.625 2.625v17.5a2.625 2.625 0 0 1-2.625 2.625H7.25a2.625 2.625 0 0 1-2.625-2.625V7.25A2.625 2.625 0 0 1 7.25 4.625Zm1.19 15.269h1.662v-8.269h-1.19l-2.397 1.076.56 1.409 1.365-.508v6.292Zm3.509-3.938c0 2.73 1.251 4.087 3.22 4.087a2.86 2.86 0 0 0 3.053-2.87 2.625 2.625 0 0 0-2.738-2.67 2.223 2.223 0 0 0-1.873.815c0-1.427.683-2.302 1.75-2.302a2.047 2.047 0 0 1 1.514.639l1.05-1.155a3.194 3.194 0 0 0-2.555-1.024c-1.881 0-3.421 1.453-3.421 4.48ZM23 16.875h1.75v-1.75H23v-1.75h-1.75v1.75H19.5v1.75h1.75v1.75H23v-1.75Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--over16FilledLarge"><path d="M14.58 15.973c.175-.058.36-.08.545-.06a1.304 1.304 0 0 1 1.435 1.356 1.33 1.33 0 0 1-1.435 1.356 1.33 1.33 0 0 1-1.435-1.383 1.304 1.304 0 0 1 .89-1.269Z"></path><path fill-rule="evenodd" d="M7.25 4.625h17.5a2.625 2.625 0 0 1 2.625 2.625v17.5a2.625 2.625 0 0 1-2.625 2.625H7.25a2.625 2.625 0 0 1-2.625-2.625V7.25A2.625 2.625 0 0 1 7.25 4.625Zm1.19 15.269h1.662v-8.269h-1.19l-2.397 1.076.56 1.409 1.365-.508v6.292Zm3.509-3.938c0 2.73 1.251 4.087 3.22 4.087a2.86 2.86 0 0 0 3.053-2.87 2.625 2.625 0 0 0-2.738-2.67 2.223 2.223 0 0 0-1.873.815c0-1.427.683-2.302 1.75-2.302a2.047 2.047 0 0 1 1.514.639l1.05-1.155a3.194 3.194 0 0 0-2.555-1.024c-1.881 0-3.421 1.453-3.421 4.48ZM23 16.875h1.75v-1.75H23v-1.75h-1.75v1.75H19.5v1.75h1.75v1.75H23v-1.75Z" clip-rule="evenodd"></path></svg>';
 
 export class IconOver16FilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconOver16FilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--over16FilledLarge', '', null, 'IconOver16FilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--over16FilledLarge', '', null, 'IconOver16FilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--over16FilledLarge');
         this.root.append(svg);
     }

package/icons/IconOver18Filled.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--over18Filled"><path d="M7.497 9.304c.403 0 .73-.253.73-.565 0-.311-.327-.564-.73-.564-.404 0-.73.253-.73.564 0 .312.326.565.73.565Z"></path><path d="M7.716 7.486a.555.555 0 0 1-.22.028.547.547 0 0 1-.59-.529.538.538 0 0 1 .59-.525.542.542 0 0 1 .596.525.555.555 0 0 1-.376.501Z"></path><path fill-rule="evenodd" d="M12.375 2.313h-8.75a1.313 1.313 0 0 0-1.313 1.312v8.75a1.313 1.313 0 0 0 1.313 1.313h8.75a1.313 1.313 0 0 0 1.313-1.313v-8.75a1.313 1.313 0 0 0-1.313-1.313ZM5.051 9.947H4.22V6.8l-.682.254-.28-.704 1.198-.538h.595v4.134Zm2.446.074c-1.085 0-1.606-.564-1.606-1.212a1.01 1.01 0 0 1 .713-.984 1.01 1.01 0 0 1-.555-.914c0-.6.494-1.173 1.448-1.173s1.452.573 1.452 1.173a1.028 1.028 0 0 1-.564.914 1.015 1.015 0 0 1 .722.984c0 .648-.525 1.212-1.61 1.212Zm4.878-1.584H11.5v.876h-.875v-.876H9.75v-.874h.875v-.875h.875v.875h.875v.875Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--over18Filled"><path d="M7.497 9.304c.403 0 .73-.253.73-.565 0-.311-.327-.564-.73-.564-.404 0-.73.253-.73.564 0 .312.326.565.73.565Z"></path><path d="M7.716 7.486a.555.555 0 0 1-.22.028.547.547 0 0 1-.59-.529.538.538 0 0 1 .59-.525.542.542 0 0 1 .596.525.555.555 0 0 1-.376.501Z"></path><path fill-rule="evenodd" d="M12.375 2.313h-8.75a1.313 1.313 0 0 0-1.313 1.312v8.75a1.313 1.313 0 0 0 1.313 1.313h8.75a1.313 1.313 0 0 0 1.313-1.313v-8.75a1.313 1.313 0 0 0-1.313-1.313ZM5.051 9.947H4.22V6.8l-.682.254-.28-.704 1.198-.538h.595v4.134Zm2.446.074c-1.085 0-1.606-.564-1.606-1.212a1.01 1.01 0 0 1 .713-.984 1.01 1.01 0 0 1-.555-.914c0-.6.494-1.173 1.448-1.173s1.452.573 1.452 1.173a1.028 1.028 0 0 1-.564.914 1.015 1.015 0 0 1 .722.984c0 .648-.525 1.212-1.61 1.212Zm4.878-1.584H11.5v.876h-.875v-.876H9.75v-.874h.875v-.875h.875v.875h.875v.875Z" clip-rule="evenodd"></path></svg>';
 
 export class IconOver18Filled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconOver18Filled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--over18Filled', '', null, 'IconOver18Filled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--over18Filled', '', null, 'IconOver18Filled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--over18Filled');
         this.root.append(svg);
     }

package/icons/IconOver18FilledLarge.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--over18FilledLarge"><path d="M14.994 18.608c.807 0 1.461-.506 1.461-1.13 0-.623-.654-1.128-1.461-1.128s-1.461.505-1.461 1.129c0 .623.654 1.129 1.46 1.129Z"></path><path d="M15.431 14.973a1.11 1.11 0 0 1-.437.056 1.095 1.095 0 0 1-1.181-1.059 1.076 1.076 0 0 1 1.18-1.05 1.086 1.086 0 0 1 1.19 1.05 1.111 1.111 0 0 1-.752 1.002Z"></path><path fill-rule="evenodd" d="M24.75 4.625H7.25A2.625 2.625 0 0 0 4.625 7.25v17.5a2.625 2.625 0 0 0 2.625 2.625h17.5a2.625 2.625 0 0 0 2.625-2.625V7.25a2.625 2.625 0 0 0-2.625-2.625ZM10.102 19.894H8.44v-6.291l-1.365.507-.56-1.409 2.397-1.076h1.19v8.269Zm4.892.149c-2.17 0-3.211-1.13-3.211-2.424a2.021 2.021 0 0 1 1.426-1.969 2.02 2.02 0 0 1-1.111-1.829c0-1.198.988-2.345 2.896-2.345 1.907 0 2.905 1.146 2.905 2.345a2.056 2.056 0 0 1-1.129 1.829 2.03 2.03 0 0 1 1.444 1.969c0 1.295-1.05 2.424-3.22 2.424Zm9.756-3.168H23v1.75h-1.75v-1.75H19.5v-1.75h1.75v-1.75H23v1.75h1.75v1.75Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--over18FilledLarge"><path d="M14.994 18.608c.807 0 1.461-.506 1.461-1.13 0-.623-.654-1.128-1.461-1.128s-1.461.505-1.461 1.129c0 .623.654 1.129 1.46 1.129Z"></path><path d="M15.431 14.973a1.11 1.11 0 0 1-.437.056 1.095 1.095 0 0 1-1.181-1.059 1.076 1.076 0 0 1 1.18-1.05 1.086 1.086 0 0 1 1.19 1.05 1.111 1.111 0 0 1-.752 1.002Z"></path><path fill-rule="evenodd" d="M24.75 4.625H7.25A2.625 2.625 0 0 0 4.625 7.25v17.5a2.625 2.625 0 0 0 2.625 2.625h17.5a2.625 2.625 0 0 0 2.625-2.625V7.25a2.625 2.625 0 0 0-2.625-2.625ZM10.102 19.894H8.44v-6.291l-1.365.507-.56-1.409 2.397-1.076h1.19v8.269Zm4.892.149c-2.17 0-3.211-1.13-3.211-2.424a2.021 2.021 0 0 1 1.426-1.969 2.02 2.02 0 0 1-1.111-1.829c0-1.198.988-2.345 2.896-2.345 1.907 0 2.905 1.146 2.905 2.345a2.056 2.056 0 0 1-1.129 1.829 2.03 2.03 0 0 1 1.444 1.969c0 1.295-1.05 2.424-3.22 2.424Zm9.756-3.168H23v1.75h-1.75v-1.75H19.5v-1.75h1.75v-1.75H23v1.75h1.75v1.75Z" clip-rule="evenodd"></path></svg>';
 
 export class IconOver18FilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconOver18FilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--over18FilledLarge', '', null, 'IconOver18FilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--over18FilledLarge', '', null, 'IconOver18FilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--over18FilledLarge');
         this.root.append(svg);
     }

package/icons/IconOver21Filled.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--over21Filled"><path d="M12.375 2.313h-8.75a1.313 1.313 0 0 0-1.313 1.312v8.75a1.313 1.313 0 0 0 1.313 1.313h8.75a1.313 1.313 0 0 0 1.313-1.313v-8.75a1.313 1.313 0 0 0-1.313-1.313ZM6.617 9.947H3.625v-.573c0-.8.464-1.138 1.129-1.492.665-.354.875-.508.875-.875 0-.368-.254-.477-.617-.477a1.129 1.129 0 0 0-.875.394l-.481-.59a1.842 1.842 0 0 1 1.421-.596c.875 0 1.427.473 1.427 1.243 0 .687-.438 1.107-1.15 1.452-.644.324-.876.503-.876.722v.044H6.6l.018.748Zm2.354 0H8.14V6.8l-.683.254-.28-.704 1.195-.538h.6v4.134Zm3.404-1.51H11.5v.876h-.875v-.876H9.75v-.874h.875v-.875h.875v.875h.875v.875Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--over21Filled"><path d="M12.375 2.313h-8.75a1.313 1.313 0 0 0-1.313 1.312v8.75a1.313 1.313 0 0 0 1.313 1.313h8.75a1.313 1.313 0 0 0 1.313-1.313v-8.75a1.313 1.313 0 0 0-1.313-1.313ZM6.617 9.947H3.625v-.573c0-.8.464-1.138 1.129-1.492.665-.354.875-.508.875-.875 0-.368-.254-.477-.617-.477a1.129 1.129 0 0 0-.875.394l-.481-.59a1.842 1.842 0 0 1 1.421-.596c.875 0 1.427.473 1.427 1.243 0 .687-.438 1.107-1.15 1.452-.644.324-.876.503-.876.722v.044H6.6l.018.748Zm2.354 0H8.14V6.8l-.683.254-.28-.704 1.195-.538h.6v4.134Zm3.404-1.51H11.5v.876h-.875v-.876H9.75v-.874h.875v-.875h.875v.875h.875v.875Z"></path></svg>';
 
 export class IconOver21Filled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconOver21Filled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--over21Filled', '', null, 'IconOver21Filled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--over21Filled', '', null, 'IconOver21Filled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--over21Filled');
         this.root.append(svg);
     }

package/icons/IconOver21FilledLarge.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--over21FilledLarge"><path d="M24.75 4.625H7.25A2.625 2.625 0 0 0 4.625 7.25v17.5a2.625 2.625 0 0 0 2.625 2.625h17.5a2.625 2.625 0 0 0 2.625-2.625V7.25a2.625 2.625 0 0 0-2.625-2.625ZM13.235 19.894H7.25v-1.146c0-1.602.928-2.276 2.258-2.984 1.33-.709 1.75-1.015 1.75-1.75 0-.735-.508-.954-1.234-.954a2.257 2.257 0 0 0-1.75.787l-.963-1.18a3.684 3.684 0 0 1 2.844-1.19c1.75 0 2.853.944 2.853 2.484 0 1.374-.875 2.214-2.302 2.905-1.286.648-1.75 1.006-1.75 1.444v.088H13.2l.035 1.496Zm4.707 0H16.28v-6.291l-1.365.507-.56-1.409 2.389-1.076h1.198v8.269Zm6.808-3.019H23v1.75h-1.75v-1.75H19.5v-1.75h1.75v-1.75H23v1.75h1.75v1.75Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--over21FilledLarge"><path d="M24.75 4.625H7.25A2.625 2.625 0 0 0 4.625 7.25v17.5a2.625 2.625 0 0 0 2.625 2.625h17.5a2.625 2.625 0 0 0 2.625-2.625V7.25a2.625 2.625 0 0 0-2.625-2.625ZM13.235 19.894H7.25v-1.146c0-1.602.928-2.276 2.258-2.984 1.33-.709 1.75-1.015 1.75-1.75 0-.735-.508-.954-1.234-.954a2.257 2.257 0 0 0-1.75.787l-.963-1.18a3.684 3.684 0 0 1 2.844-1.19c1.75 0 2.853.944 2.853 2.484 0 1.374-.875 2.214-2.302 2.905-1.286.648-1.75 1.006-1.75 1.444v.088H13.2l.035 1.496Zm4.707 0H16.28v-6.291l-1.365.507-.56-1.409 2.389-1.076h1.198v8.269Zm6.808-3.019H23v1.75h-1.75v-1.75H19.5v-1.75h1.75v-1.75H23v1.75h1.75v1.75Z"></path></svg>';
 
 export class IconOver21FilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconOver21FilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--over21FilledLarge', '', null, 'IconOver21FilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--over21FilledLarge', '', null, 'IconOver21FilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--over21FilledLarge');
         this.root.append(svg);
     }

package/icons/IconPaintbrush.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--paintbrush"><path d="M14.186 1.683h-2.511l-.875 1.12-.237-1.12H1.805l.945 5.25v.682a1.969 1.969 0 0 0 2.003 1.969H6.25l.096.087-.35 2.415A2.109 2.109 0 0 0 8 14.492c.338-.003.671-.087.97-.245h.08a2.118 2.118 0 0 0 1.11-2.16l-.35-2.468h1.436a1.969 1.969 0 0 0 2.004-2.004v-.691l.936-5.242Zm-9.45 1.312.35 1.899h1.339l-.36-1.899h3.413l.35 1.899h.945l1.532-1.899h.315l-.587 3.255h-8.05l-.595-3.255h1.348Zm7.192 4.62a.665.665 0 0 1-.656.656H9.881a1.382 1.382 0 0 0-1.365 1.234v.079l.376 2.625a.796.796 0 0 1-.411.814h-.079a.787.787 0 0 1-1.146-.814l.385-2.625v-.088A1.426 1.426 0 0 0 6.25 8.271H4.753a.656.656 0 0 1-.656-.656v-.088h7.875l-.044.088Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--paintbrush"><path d="M14.186 1.683h-2.511l-.875 1.12-.237-1.12H1.805l.945 5.25v.682a1.969 1.969 0 0 0 2.003 1.969H6.25l.096.087-.35 2.415A2.109 2.109 0 0 0 8 14.492c.338-.003.671-.087.97-.245h.08a2.118 2.118 0 0 0 1.11-2.16l-.35-2.468h1.436a1.969 1.969 0 0 0 2.004-2.004v-.691l.936-5.242Zm-9.45 1.312.35 1.899h1.339l-.36-1.899h3.413l.35 1.899h.945l1.532-1.899h.315l-.587 3.255h-8.05l-.595-3.255h1.348Zm7.192 4.62a.665.665 0 0 1-.656.656H9.881a1.382 1.382 0 0 0-1.365 1.234v.079l.376 2.625a.796.796 0 0 1-.411.814h-.079a.787.787 0 0 1-1.146-.814l.385-2.625v-.088A1.426 1.426 0 0 0 6.25 8.271H4.753a.656.656 0 0 1-.656-.656v-.088h7.875l-.044.088Z"></path></svg>';
 
 export class IconPaintbrush extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPaintbrush extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--paintbrush', '', null, 'IconPaintbrush');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--paintbrush', '', null, 'IconPaintbrush');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--paintbrush');
         this.root.append(svg);
     }

package/icons/IconPaintbrushLarge.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--paintbrushLarge"><path d="M16.096 25.835a.796.796 0 1 0 0-1.593.796.796 0 0 0 0 1.593Z"></path><path d="M27.375 4.625h-4.297l-1.828 3.36-.595-3.36H4.668l1.75 9.721v1.96a2.625 2.625 0 0 0 2.625 2.625h3.5c.135 0 .264.046.368.131.097.08.167.186.201.307l-.796 5.014a3.745 3.745 0 0 0 1.26 3.438 3.79 3.79 0 0 0 2.459.875c.86.004 1.694-.29 2.362-.831l.088-.07a3.77 3.77 0 0 0 1.365-3.5l-.779-5.031a.42.42 0 0 1 .14-.228.446.446 0 0 1 .324-.131H23a2.625 2.625 0 0 0 2.625-2.625v-2.205l1.75-9.45ZM8.536 6.375l.936 5.119h1.75l-.91-5.119h1.75l.928 5.119h1.75l-.867-5.119h5.33l.953 5.127h1.234l2.738-5.127h1.12l-1.268 6.877H8.02L6.768 6.375h1.768Zm15.339 9.931a.875.875 0 0 1-.875.875h-3.413a2.24 2.24 0 0 0-2.222 2.013v.114l.814 5.25a1.996 1.996 0 0 1-.735 1.942l-.088.079a2.03 2.03 0 0 1-2.625-.044 2.003 2.003 0 0 1-.674-1.846l.832-5.25v-.114a2.346 2.346 0 0 0-.875-1.584 2.371 2.371 0 0 0-1.47-.516h-3.5a.875.875 0 0 1-.876-.875v-1.348h15.707v1.304Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--paintbrushLarge"><path d="M16.096 25.835a.796.796 0 1 0 0-1.593.796.796 0 0 0 0 1.593Z"></path><path d="M27.375 4.625h-4.297l-1.828 3.36-.595-3.36H4.668l1.75 9.721v1.96a2.625 2.625 0 0 0 2.625 2.625h3.5c.135 0 .264.046.368.131.097.08.167.186.201.307l-.796 5.014a3.745 3.745 0 0 0 1.26 3.438 3.79 3.79 0 0 0 2.459.875c.86.004 1.694-.29 2.362-.831l.088-.07a3.77 3.77 0 0 0 1.365-3.5l-.779-5.031a.42.42 0 0 1 .14-.228.446.446 0 0 1 .324-.131H23a2.625 2.625 0 0 0 2.625-2.625v-2.205l1.75-9.45ZM8.536 6.375l.936 5.119h1.75l-.91-5.119h1.75l.928 5.119h1.75l-.867-5.119h5.33l.953 5.127h1.234l2.738-5.127h1.12l-1.268 6.877H8.02L6.768 6.375h1.768Zm15.339 9.931a.875.875 0 0 1-.875.875h-3.413a2.24 2.24 0 0 0-2.222 2.013v.114l.814 5.25a1.996 1.996 0 0 1-.735 1.942l-.088.079a2.03 2.03 0 0 1-2.625-.044 2.003 2.003 0 0 1-.674-1.846l.832-5.25v-.114a2.346 2.346 0 0 0-.875-1.584 2.371 2.371 0 0 0-1.47-.516h-3.5a.875.875 0 0 1-.876-.875v-1.348h15.707v1.304Z"></path></svg>';
 
 export class IconPaintbrushLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPaintbrushLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--paintbrushLarge', '', null, 'IconPaintbrushLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--paintbrushLarge', '', null, 'IconPaintbrushLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--paintbrushLarge');
         this.root.append(svg);
     }

package/icons/IconPatterns.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--patterns"><g clip-path="url(#prefix__clip0_7066_3739)"><path d="M1.551 14.589h5.662V8.936H1.55v5.653Zm1.313-4.34H5.89v3.027H2.864V10.25Z"></path><path d="M6.128 7.624a3.085 3.085 0 0 0 3.08-3.08 3.085 3.085 0 0 0-3.08-3.08 3.085 3.085 0 0 0-3.08 3.08 3.085 3.085 0 0 0 3.08 3.08Zm0-4.848c.97 0 1.767.796 1.767 1.768 0 .971-.796 1.767-1.767 1.767A1.774 1.774 0 0 1 4.36 4.544c0-.971.796-1.768 1.768-1.768Z"></path><path d="m11.203 4.544-3.334 6.343h6.676l-3.334-6.343h-.008Zm0 2.817 1.163 2.214H10.04l1.164-2.214Z"></path></g><defs><clipPath id="prefix__clip0_7066_3739"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--patterns"><g clip-path="url(#prefix__clip0_7066_3739)"><path d="M1.551 14.589h5.662V8.936H1.55v5.653Zm1.313-4.34H5.89v3.027H2.864V10.25Z"></path><path d="M6.128 7.624a3.085 3.085 0 0 0 3.08-3.08 3.085 3.085 0 0 0-3.08-3.08 3.085 3.085 0 0 0-3.08 3.08 3.085 3.085 0 0 0 3.08 3.08Zm0-4.848c.97 0 1.767.796 1.767 1.768 0 .971-.796 1.767-1.767 1.767A1.774 1.774 0 0 1 4.36 4.544c0-.971.796-1.768 1.768-1.768Z"></path><path d="m11.203 4.544-3.334 6.343h6.676l-3.334-6.343h-.008Zm0 2.817 1.163 2.214H10.04l1.164-2.214Z"></path></g><defs><clipPath id="prefix__clip0_7066_3739"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconPatterns extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPatterns extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--patterns', '', null, 'IconPatterns');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--patterns', '', null, 'IconPatterns');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--patterns');
         this.root.append(svg);
     }

package/icons/IconPatternsLarge.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--patternsLarge"><path d="M4.625 27.375h9.87v-9.87h-9.87v9.87Zm1.75-8.12h6.37v6.37h-6.37v-6.37Z"></path><path d="M12.596 15.23a5.374 5.374 0 0 0 0-10.745 5.374 5.374 0 0 0 0 10.745Zm0-8.995a3.63 3.63 0 0 1 3.623 3.622 3.63 3.63 0 0 1-3.623 3.623 3.63 3.63 0 0 1-3.622-3.623 3.63 3.63 0 0 1 3.622-3.622Z"></path><path d="m21.46 9.857-5.819 11.07H27.28L21.46 9.856Zm0 3.763 2.922 5.556h-5.845l2.923-5.556Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--patternsLarge"><path d="M4.625 27.375h9.87v-9.87h-9.87v9.87Zm1.75-8.12h6.37v6.37h-6.37v-6.37Z"></path><path d="M12.596 15.23a5.374 5.374 0 0 0 0-10.745 5.374 5.374 0 0 0 0 10.745Zm0-8.995a3.63 3.63 0 0 1 3.623 3.622 3.63 3.63 0 0 1-3.623 3.623 3.63 3.63 0 0 1-3.622-3.623 3.63 3.63 0 0 1 3.622-3.622Z"></path><path d="m21.46 9.857-5.819 11.07H27.28L21.46 9.856Zm0 3.763 2.922 5.556h-5.845l2.923-5.556Z"></path></svg>';
 
 export class IconPatternsLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPatternsLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--patternsLarge', '', null, 'IconPatternsLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--patternsLarge', '', null, 'IconPatternsLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--patternsLarge');
         this.root.append(svg);
     }

package/icons/IconPause.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--pause"><path d="M6.326 4H5v8h1.326V4Z"></path><path d="M11 4H9.674v8H11V4Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--pause"><path d="M6.326 4H5v8h1.326V4Z"></path><path d="M11 4H9.674v8H11V4Z"></path></svg>';
 
 export class IconPause extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPause extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pause', '', null, 'IconPause');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pause', '', null, 'IconPause');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pause');
         this.root.append(svg);
     }

package/icons/IconPauseCircle.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--pauseCircle"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm0 12.25A5.469 5.469 0 1 1 8 2.53a5.469 5.469 0 0 1 0 10.938Z"></path><path d="M7.344 5.813H6.03v4.375h1.313V5.811Z"></path><path d="M9.969 5.813H8.656v4.375H9.97V5.811Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--pauseCircle"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm0 12.25A5.469 5.469 0 1 1 8 2.53a5.469 5.469 0 0 1 0 10.938Z"></path><path d="M7.344 5.813H6.03v4.375h1.313V5.811Z"></path><path d="M9.969 5.813H8.656v4.375H9.97V5.811Z"></path></svg>';
 
 export class IconPauseCircle extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPauseCircle extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pauseCircle', '', null, 'IconPauseCircle');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pauseCircle', '', null, 'IconPauseCircle');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pauseCircle');
         this.root.append(svg);
     }

package/icons/IconPauseCircleFilled.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--pauseCircleFilled"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm-.656 8.969H6.03V5.811h1.313v4.375Zm2.625 0H8.656V5.811H9.97v4.375Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--pauseCircleFilled"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm-.656 8.969H6.03V5.811h1.313v4.375Zm2.625 0H8.656V5.811H9.97v4.375Z"></path></svg>';
 
 export class IconPauseCircleFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPauseCircleFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pauseCircleFilled', '', null, 'IconPauseCircleFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pauseCircleFilled', '', null, 'IconPauseCircleFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pauseCircleFilled');
         this.root.append(svg);
     }

package/icons/IconPauseCircleFilledLarge.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--pauseCircleFilledLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5ZM14.25 20.2H12.5v-8.4h1.75v8.4Zm5.25 0h-1.75v-8.4h1.75v8.4Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--pauseCircleFilledLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5ZM14.25 20.2H12.5v-8.4h1.75v8.4Zm5.25 0h-1.75v-8.4h1.75v8.4Z"></path></svg>';
 
 export class IconPauseCircleFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPauseCircleFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pauseCircleFilledLarge', '', null, 'IconPauseCircleFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pauseCircleFilledLarge', '', null, 'IconPauseCircleFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pauseCircleFilledLarge');
         this.root.append(svg);
     }

package/icons/IconPauseCircleLarge.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--pauseCircleLarge"><path d="M12.5 11.8h1.75v8.4H12.5v-8.4Zm5.25 0h1.75v8.4h-1.75v-8.4Z"></path><path d="M28.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, :host-context(pie-button) svg { display:block; 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--pauseCircleLarge"><path d="M12.5 11.8h1.75v8.4H12.5v-8.4Zm5.25 0h1.75v8.4h-1.75v-8.4Z"></path><path d="M28.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 IconPauseCircleLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPauseCircleLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pauseCircleLarge', '', null, 'IconPauseCircleLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pauseCircleLarge', '', null, 'IconPauseCircleLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pauseCircleLarge');
         this.root.append(svg);
     }

package/icons/IconPauseLarge.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--pauseLarge"><path d="M11 9h1.75v14H11V9Zm8.25 0H21v14h-1.75V9Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--pauseLarge"><path d="M11 9h1.75v14H11V9Zm8.25 0H21v14h-1.75V9Z"></path></svg>';
 
 export class IconPauseLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPauseLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pauseLarge', '', null, 'IconPauseLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pauseLarge', '', null, 'IconPauseLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pauseLarge');
         this.root.append(svg);
     }

package/icons/IconPaymentApplePay.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--applePay"><path fill="#242E30" d="M4.422 7.494c0-.548.446-.799.465-.817-.251-.372-.65-.418-.79-.427-.353-.019-.66.204-.827.204-.167 0-.427-.195-.706-.186-.362 0-.696.214-.882.539-.38.66-.102 1.625.27 2.155.176.26.399.557.677.539.27-.01.372-.177.697-.177.325 0 .418.177.706.167.297 0 .483-.26.66-.529.204-.297.288-.595.297-.604 0 0-.567-.223-.576-.873l.01.01Z"></path><path fill="#242E30" d="M4.106 5.21a.936.936 0 0 0-.631.324c-.14.158-.26.418-.232.66.241.018.492-.12.64-.307.15-.185.251-.436.223-.687v.01Z"></path><path fill="#242E30" d="m13.888 6.603-.725 2.34h-.01l-.724-2.34h-.64l1.04 2.88-.056.176c-.093.297-.25.408-.52.408-.047 0-.14 0-.177-.009v.474s.186.018.232.018c.604 0 .883-.232 1.124-.92l1.078-3.027h-.622Z"></path><path fill="#242E30" d="M7.627 5.516H6.14v3.957h.613V8.117h.854c.78 0 1.32-.53 1.32-1.31s-.54-1.3-1.301-1.3v.009Zm-.167 2.09h-.706v-1.58h.706c.53 0 .836.289.836.78 0 .493-.307.79-.846.79l.01.01Z"></path><path fill="#242E30" d="M10.386 6.556c-.65 0-1.134.372-1.152.883h.557c.047-.242.27-.41.585-.41.372 0 .586.177.586.502v.223l-.771.047c-.716.046-1.096.334-1.096.845 0 .511.399.855.966.855.39 0 .743-.195.91-.502h.01v.474h.566v-1.97c0-.575-.455-.938-1.161-.938v-.009Zm.566 1.84c0 .37-.316.631-.733.631-.326 0-.54-.158-.54-.4 0-.241.205-.39.586-.417l.687-.047v.232Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--applePay"><path fill="#242E30" d="M4.422 7.494c0-.548.446-.799.465-.817-.251-.372-.65-.418-.79-.427-.353-.019-.66.204-.827.204-.167 0-.427-.195-.706-.186-.362 0-.696.214-.882.539-.38.66-.102 1.625.27 2.155.176.26.399.557.677.539.27-.01.372-.177.697-.177.325 0 .418.177.706.167.297 0 .483-.26.66-.529.204-.297.288-.595.297-.604 0 0-.567-.223-.576-.873l.01.01Z"></path><path fill="#242E30" d="M4.106 5.21a.936.936 0 0 0-.631.324c-.14.158-.26.418-.232.66.241.018.492-.12.64-.307.15-.185.251-.436.223-.687v.01Z"></path><path fill="#242E30" d="m13.888 6.603-.725 2.34h-.01l-.724-2.34h-.64l1.04 2.88-.056.176c-.093.297-.25.408-.52.408-.047 0-.14 0-.177-.009v.474s.186.018.232.018c.604 0 .883-.232 1.124-.92l1.078-3.027h-.622Z"></path><path fill="#242E30" d="M7.627 5.516H6.14v3.957h.613V8.117h.854c.78 0 1.32-.53 1.32-1.31s-.54-1.3-1.301-1.3v.009Zm-.167 2.09h-.706v-1.58h.706c.53 0 .836.289.836.78 0 .493-.307.79-.846.79l.01.01Z"></path><path fill="#242E30" d="M10.386 6.556c-.65 0-1.134.372-1.152.883h.557c.047-.242.27-.41.585-.41.372 0 .586.177.586.502v.223l-.771.047c-.716.046-1.096.334-1.096.845 0 .511.399.855.966.855.39 0 .743-.195.91-.502h.01v.474h.566v-1.97c0-.575-.455-.938-1.161-.938v-.009Zm.566 1.84c0 .37-.316.631-.733.631-.326 0-.54-.158-.54-.4 0-.241.205-.39.586-.417l.687-.047v.232Z"></path></svg>';
 
 export class IconPaymentApplePay extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPaymentApplePay extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--applePay', '', null, 'IconPaymentApplePay');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--applePay', '', null, 'IconPaymentApplePay');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--applePay');
         this.root.append(svg);
     }

package/icons/IconPaymentBitcoin.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--bitcoin"><g fill="#F7931A" clip-path="url(#prefix__clip0_16_63)"><path d="M7.904 6.154 7.57 7.5c.377.097 1.96.482 2.153-.28.192-.761-1.435-.971-1.82-1.067Z"></path><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm2.826 6.02a1.077 1.077 0 0 1-.875.988 1.19 1.19 0 0 1 .674 1.637c-.367 1.041-1.076 1.172-2.231.954l-.315 1.12-.823-.21.271-1.103-.533-.14-.28 1.111-.875-.21.28-1.12-.315-.087-.875-.219.341-.77.49.123a.245.245 0 0 0 .306-.167l.447-1.75.314-1.26a.367.367 0 0 0-.314-.394l-.49-.122.227-.744.875.228.263.061.314-1.103.876.21-.307 1.103.534.131.271-1.085.832.21-.28 1.094c.857.298 1.32.691 1.198 1.514Z"></path><path d="M7.396 8.184 7.03 9.67c.455.114 2.275.569 2.485-.271.21-.84-1.654-1.103-2.118-1.216Z"></path></g><defs><clipPath id="prefix__clip0_16_63"><rect width="14" height="14" fill="#fff" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; 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--bitcoin"><g fill="#F7931A" clip-path="url(#prefix__clip0_16_63)"><path d="M7.904 6.154 7.57 7.5c.377.097 1.96.482 2.153-.28.192-.761-1.435-.971-1.82-1.067Z"></path><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm2.826 6.02a1.077 1.077 0 0 1-.875.988 1.19 1.19 0 0 1 .674 1.637c-.367 1.041-1.076 1.172-2.231.954l-.315 1.12-.823-.21.271-1.103-.533-.14-.28 1.111-.875-.21.28-1.12-.315-.087-.875-.219.341-.77.49.123a.245.245 0 0 0 .306-.167l.447-1.75.314-1.26a.367.367 0 0 0-.314-.394l-.49-.122.227-.744.875.228.263.061.314-1.103.876.21-.307 1.103.534.131.271-1.085.832.21-.28 1.094c.857.298 1.32.691 1.198 1.514Z"></path><path d="M7.396 8.184 7.03 9.67c.455.114 2.275.569 2.485-.271.21-.84-1.654-1.103-2.118-1.216Z"></path></g><defs><clipPath id="prefix__clip0_16_63"><rect width="14" height="14" fill="#fff" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconPaymentBitcoin extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPaymentBitcoin extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--bitcoin', '', null, 'IconPaymentBitcoin');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--bitcoin', '', null, 'IconPaymentBitcoin');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--bitcoin');
         this.root.append(svg);
     }