@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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);
     }

package/icons/IconPaymentEps.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--eps"><path fill="#A7A8A8" fill-rule="evenodd" d="M4.395 5.882c.254-.052.604-.052.858.018.28.061.542.201.743.411.193.184.324.42.394.674.053.175.07.359.061.542-.008.158-.043.307-.079.464H4.02a.787.787 0 0 0 .14.368.743.743 0 0 0 .324.236c.463.175.945.017 1.216-.271.026.052.052.096.079.148.105.202.21.412.315.613a1.374 1.374 0 0 1-.324.21 2.296 2.296 0 0 1-.867.184 2.238 2.238 0 0 1-.892-.132 1.505 1.505 0 0 1-.647-.49A1.678 1.678 0 0 1 3.046 8a2.304 2.304 0 0 1 .08-.945c.087-.28.244-.534.454-.726a1.65 1.65 0 0 1 .814-.438v-.009Zm.193.805a.598.598 0 0 0-.342.202.842.842 0 0 0-.184.35h1.435a.702.702 0 0 0-.218-.42c-.175-.149-.473-.175-.691-.132Zm3.613-.77c.166-.06.35-.07.525-.06.298.017.604.078.866.244.228.14.403.359.508.604.14.324.175.691.175 1.041 0 .315-.061.63-.21.91a1.496 1.496 0 0 1-.542.578 1.73 1.73 0 0 1-.858.236 1.885 1.885 0 0 1-.7-.096v1.347H7.02V5.926h.945v.114a.918.918 0 0 1 .245-.123h-.009Zm.053.77a.581.581 0 0 0-.298.158v1.671c.21.158.525.149.77.088a.723.723 0 0 0 .193-.07.591.591 0 0 0 .236-.228c.096-.166.123-.35.131-.534 0-.192 0-.385-.052-.577a.762.762 0 0 0-.123-.271.577.577 0 0 0-.236-.175c-.158-.062-.455-.105-.621-.07v.008Zm3.045-.7c.184-.087.385-.13.586-.14.158 0 .332 0 .49.027.245.043.481.131.7.245-.079.218-.157.437-.245.647-.018.044-.035.096-.053.14-.06-.044-.113-.096-.175-.14-.183-.114-.516-.175-.726-.122-.052.017-.114.043-.14.096-.026.044-.026.105-.026.157.017.07.07.114.131.158.105.061.21.114.324.157.131.062.271.105.394.167.131.07.262.148.376.253.088.088.166.193.219.307.061.14.087.288.087.437 0 .175-.035.35-.122.508a1.1 1.1 0 0 1-.499.437 2.116 2.116 0 0 1-.402.114 2.836 2.836 0 0 1-.77 0 1.755 1.755 0 0 1-.456-.158c-.087-.043-.183-.087-.27-.14.122-.262.236-.533.358-.796.053.044.105.088.166.131.131.088.28.158.438.184.14.026.35.035.481-.035a.168.168 0 0 0 .096-.131.322.322 0 0 0-.061-.263.74.74 0 0 0-.157-.13 3.83 3.83 0 0 0-.43-.202c-.236-.105-.463-.236-.63-.429a.927.927 0 0 1-.236-.481 1.041 1.041 0 0 1 .018-.403.863.863 0 0 1 .21-.393 1.08 1.08 0 0 1 .324-.228v.026Z" clip-rule="evenodd"></path><path fill="#3C2281" fill-rule="evenodd" d="m8.105 2.829.945 1.443H7.151c.158-.236.306-.472.464-.708.157-.245.324-.49.481-.735h.009Zm3.255 8.067s.105-.017.131.018c.018.026.018.052.018.087v.665a.097.097 0 0 1-.097.096.108.108 0 0 1-.087-.043.211.211 0 0 1-.175.052.259.259 0 0 1-.184-.114.364.364 0 0 1-.008-.376.273.273 0 0 1 .183-.14.28.28 0 0 1 .184.035v-.184c0-.035.009-.06.044-.087l-.009-.009Zm-.175.411c-.053.027-.079.088-.079.15 0 .043.018.095.062.122a.094.094 0 0 0 .122-.027c.035-.06.044-.14 0-.2a.114.114 0 0 0-.114-.045h.009Zm1.977-.42s.097-.008.123.027a.162.162 0 0 1 .018.061v.683c0 .035-.027.078-.062.087-.043.009-.087 0-.114-.044-.087.088-.236.061-.315-.017-.113-.105-.122-.289-.052-.42a.263.263 0 0 1 .166-.14c.07-.018.14 0 .193.035v-.184c0-.035.017-.07.052-.088h-.008Zm-.183.42s-.053.044-.07.08c-.018.06-.009.13.035.174.035.044.105.035.14 0a.184.184 0 0 0 0-.21.114.114 0 0 0-.114-.044h.009Zm-4.874-.315c.035-.043.114-.035.149.01.026.043.017.095.017.14.035 0 .07 0 .096.026.035.035.027.113-.017.13-.026.01-.053.01-.079.01v.35a.141.141 0 0 1-.026.078c-.035.035-.105.035-.131 0a.148.148 0 0 1-.027-.087v-.333c-.017 0-.034 0-.052-.009-.053-.017-.061-.104-.018-.14.018-.017.053-.017.08-.017 0-.053-.01-.114.026-.149l-.018-.008Zm1.216 0c.035-.043.114-.043.149 0 .035.044.018.097.018.15.035 0 .07 0 .096.017.043.035.035.114-.009.14-.026.017-.052.008-.079.008v.35c0 .027 0 .053-.026.07a.091.091 0 0 1-.14 0 .1.1 0 0 1-.026-.07v-.35c-.027 0-.053 0-.07-.017-.044-.035-.044-.114 0-.14.017-.018.043-.018.07-.018 0-.052-.009-.104.017-.148v.008Zm-2.896.132c.07 0 .149.017.201.079a.254.254 0 0 1 .044.157v.298c0 .035-.018.07-.044.087a.108.108 0 0 1-.114-.009.13.13 0 0 1-.034-.079v-.27s0-.053-.018-.07a.066.066 0 0 0-.105 0 .1.1 0 0 0-.026.07v.288a.097.097 0 0 1-.096.096c-.053 0-.088-.044-.088-.096v-.28c0-.026 0-.053-.026-.079-.026-.026-.07-.026-.105 0a.1.1 0 0 0-.027.07v.272c0 .026 0 .06-.026.078-.035.044-.114.035-.14-.009a.162.162 0 0 1-.017-.06v-.412c0-.035 0-.07.026-.088.035-.043.122-.034.149.018.087-.079.227-.07.297.018.044-.035.096-.07.158-.07l-.009-.01Zm-3.71.105a.327.327 0 0 1 .175-.105.282.282 0 0 1 .219.061.328.328 0 0 1 .122.262c0 .036-.035.07-.07.07h-.324c.027.08.132.106.202.062.035-.018.061-.035.096-.044.053 0 .088.044.088.096 0 .044-.044.07-.08.088a.369.369 0 0 1-.253.043.287.287 0 0 1-.193-.122.37.37 0 0 1 .018-.411Zm.114.149h.21a.109.109 0 0 0-.123-.088c-.043 0-.087.044-.096.088h.009Zm1.137-.202a.24.24 0 0 1 .184-.052c.07.008.131.052.166.114.053.078.07.175.053.262a.323.323 0 0 1-.149.227.245.245 0 0 1-.245-.008v.175a.088.088 0 0 1-.087.087.108.108 0 0 1-.088-.043c-.017-.027-.009-.053-.009-.08v-.63c0-.043.026-.087.07-.087.044-.008.088 0 .105.044v-.009Zm.088.123s-.053.043-.062.07a.222.222 0 0 0 .018.166c.018.026.044.053.079.044.035 0 .07-.027.087-.062a.187.187 0 0 0-.017-.2.115.115 0 0 0-.105-.027v.009Zm.534-.14c.078-.053.2-.062.28.017.026-.052.096-.061.14-.026.035.026.026.07.026.105v.359c0 .035 0 .087-.026.113-.044.035-.123.027-.15-.026a.204.204 0 0 1-.13.061.28.28 0 0 1-.21-.096.308.308 0 0 1-.07-.227c0-.105.052-.21.14-.271v-.01Zm.122.14s-.061.061-.07.105c-.009.052 0 .122.044.157.035.035.096.027.131-.008a.172.172 0 0 0 0-.22.083.083 0 0 0-.105-.026V11.3Zm2.117-.131a.286.286 0 0 1 .237-.044.32.32 0 0 1 .227.306c0 .035-.026.079-.07.079H6.89c.026.079.122.096.183.07.044-.018.07-.044.114-.053.053 0 .096.053.088.097 0 .026-.027.043-.044.06a.318.318 0 0 1-.149.062c-.096.018-.21 0-.28-.07-.149-.131-.131-.394.026-.508Zm.106.13s-.035.044-.044.07h.218c0-.026-.017-.043-.035-.06a.095.095 0 0 0-.13 0l-.01-.01Zm.612-.13c.053-.044.123-.053.192-.044a.216.216 0 0 1 .158.105.267.267 0 0 1 .026.14v.271c0 .035-.009.07-.035.087-.043.035-.105.027-.131-.017-.018-.026-.018-.061-.018-.088v-.245c0-.026 0-.06-.026-.078-.035-.026-.087-.026-.114 0a.1.1 0 0 0-.026.07v.271c0 .026 0 .061-.026.079a.106.106 0 0 1-.14 0c-.018-.018-.026-.053-.026-.079v-.411c0-.026 0-.053.026-.07.035-.044.114-.035.149.008h-.009Zm1.339-.044c.07-.018.14 0 .21.026.035.018.07.053.07.096 0 .044-.044.096-.096.079-.044-.009-.08-.044-.132-.044-.017 0-.035 0-.035.026 0 .018.018.027.027.035.07.035.148.053.2.105a.178.178 0 0 1-.017.246c-.07.07-.175.078-.271.052-.053-.018-.105-.035-.14-.079-.026-.043 0-.114.044-.122a.115.115 0 0 1 .105.026c.035.018.079.035.114.018.017 0 .017-.035 0-.044-.044-.027-.088-.035-.132-.062a.207.207 0 0 1-.122-.104c-.027-.062-.009-.132.035-.184a.192.192 0 0 1 .122-.07h.018Zm.735.157a.294.294 0 0 1 .21-.166c.061-.009.131 0 .175.053.026-.053.105-.062.149-.027.026.027.026.07.026.105v.368c0 .035 0 .079-.027.113-.043.035-.122.027-.148-.026a.229.229 0 0 1-.149.061.26.26 0 0 1-.219-.122.374.374 0 0 1-.026-.359h.009Zm.236.018c-.053.017-.079.079-.079.131 0 .044.009.096.053.131.035.035.096.027.131-.017a.184.184 0 0 0 0-.21c-.026-.035-.07-.053-.105-.035Zm.63-.131c.053-.044.131-.053.193-.044.07.008.14.061.166.131.017.035.017.07.017.114v.289a.141.141 0 0 1-.026.078c-.035.035-.114.035-.14-.017-.026-.035-.018-.079-.018-.123v-.245c0-.061-.096-.087-.14-.044-.026.018-.026.053-.026.088v.271c0 .044-.043.096-.087.088a.097.097 0 0 1-.096-.096v-.43c0-.034.017-.07.043-.087.044-.026.096-.017.123.027h-.009Zm1.138.105a.255.255 0 0 1 .2-.15c.062-.008.132 0 .176.053.026-.043.087-.061.14-.035.026.018.035.053.035.079v.394c0 .035 0 .079-.018.113-.043.044-.131.035-.149-.026a.207.207 0 0 1-.14.061.261.261 0 0 1-.227-.13.357.357 0 0 1-.009-.35l-.008-.01Zm.227.026s-.061.052-.07.087a.191.191 0 0 0 .035.167.091.091 0 0 0 .14 0 .184.184 0 0 0 0-.22c-.026-.034-.07-.052-.105-.034Zm-6.702-.149c.043-.044.13-.026.148.035.035.088.061.175.096.262.027-.06.053-.13.08-.2.017-.036.025-.088.06-.106.044-.026.106 0 .132.035.017.035 0 .07-.009.097-.079.2-.158.402-.236.595-.009.026-.018.06-.044.087-.044.044-.14.026-.157-.035a.15.15 0 0 1 .017-.105l.052-.131a8.361 8.361 0 0 1-.166-.42c-.017-.035-.017-.079.018-.105l.008-.009Zm7.157.053c0-.088.14-.105.184-.035.043-.044.122-.062.166-.018.026.026.035.07.018.105-.018.035-.062.035-.097.052-.035.018-.079.035-.079.088v.263c0 .052-.043.087-.096.087-.052 0-.087-.044-.087-.096v-.455l-.009.008Zm-8.942.122h.244c.044 0 .08.035.08.079 0 .043-.027.087-.07.087H3.38c-.044 0-.079-.043-.079-.087 0-.035.026-.07.061-.079Zm-1.488 1.146.499-.761c.315.481.63.962.954 1.444h-1.89c.148-.228.297-.455.455-.683h-.018Zm11.217 0 .5-.761c.314.481.63.962.953 1.444h-1.899l.446-.683Z" clip-rule="evenodd"></path><path fill="#D00A7E" fill-rule="evenodd" d="M4.168 5.882c.253-.052.603-.052.857.018.28.061.542.201.744.411.192.184.324.42.393.674.053.175.07.359.062.542-.009.158-.044.307-.079.464H3.791a.787.787 0 0 0 .14.368.743.743 0 0 0 .324.236c.464.175.945.017 1.216-.271.026.052.053.096.079.148.105.202.21.412.315.613a1.374 1.374 0 0 1-.324.21 2.296 2.296 0 0 1-.866.184 2.238 2.238 0 0 1-.892-.132 1.505 1.505 0 0 1-.648-.49A1.678 1.678 0 0 1 2.82 8a2.304 2.304 0 0 1 .079-.945c.087-.28.245-.534.455-.726a1.65 1.65 0 0 1 .814-.438v-.009Zm.192.805a.598.598 0 0 0-.341.202.842.842 0 0 0-.184.35H5.27a.702.702 0 0 0-.219-.42c-.175-.149-.472-.175-.691-.132Zm3.614-.77c.166-.06.35-.07.525-.06.297.017.603.078.866.244.227.14.402.359.508.604.14.324.175.691.175 1.041 0 .315-.062.63-.21.91a1.496 1.496 0 0 1-.543.578 1.73 1.73 0 0 1-.857.236 1.885 1.885 0 0 1-.7-.096v1.347h-.946V5.926h.946v.114a.918.918 0 0 1 .244-.123h-.008Zm.052.77a.581.581 0 0 0-.297.158v1.671c.21.158.525.149.77.088a.723.723 0 0 0 .192-.07.591.591 0 0 0 .236-.228c.097-.166.123-.35.132-.534 0-.192 0-.385-.053-.577a.762.762 0 0 0-.122-.271.577.577 0 0 0-.236-.175c-.158-.062-.455-.105-.622-.07v.008Zm3.045-.7c.184-.087.385-.13.587-.14.157 0 .332 0 .49.027.245.043.48.131.7.245-.08.218-.158.437-.246.647-.017.044-.034.096-.052.14-.061-.044-.114-.096-.175-.14-.184-.114-.516-.175-.726-.122-.053.017-.114.043-.14.096-.027.044-.027.105-.027.157.018.07.07.114.132.158.105.061.21.114.323.157.132.062.272.105.394.167.132.07.263.148.377.253.087.088.166.193.218.307.062.14.088.288.088.437 0 .175-.035.35-.123.508a1.1 1.1 0 0 1-.498.437 2.114 2.114 0 0 1-.403.114 2.836 2.836 0 0 1-.77 0 1.755 1.755 0 0 1-.455-.158c-.088-.043-.184-.087-.271-.14.122-.262.236-.533.358-.796.053.044.105.088.167.131.131.088.28.158.437.184.14.026.35.035.482-.035a.168.168 0 0 0 .096-.131.322.322 0 0 0-.062-.263.738.738 0 0 0-.157-.13 3.83 3.83 0 0 0-.429-.202c-.236-.105-.463-.236-.63-.429a.927.927 0 0 1-.236-.481 1.041 1.041 0 0 1 .018-.403.863.863 0 0 1 .21-.393 1.08 1.08 0 0 1 .323-.228v.026Z" clip-rule="evenodd"></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--eps"><path fill="#A7A8A8" fill-rule="evenodd" d="M4.395 5.882c.254-.052.604-.052.858.018.28.061.542.201.743.411.193.184.324.42.394.674.053.175.07.359.061.542-.008.158-.043.307-.079.464H4.02a.787.787 0 0 0 .14.368.743.743 0 0 0 .324.236c.463.175.945.017 1.216-.271.026.052.052.096.079.148.105.202.21.412.315.613a1.374 1.374 0 0 1-.324.21 2.296 2.296 0 0 1-.867.184 2.238 2.238 0 0 1-.892-.132 1.505 1.505 0 0 1-.647-.49A1.678 1.678 0 0 1 3.046 8a2.304 2.304 0 0 1 .08-.945c.087-.28.244-.534.454-.726a1.65 1.65 0 0 1 .814-.438v-.009Zm.193.805a.598.598 0 0 0-.342.202.842.842 0 0 0-.184.35h1.435a.702.702 0 0 0-.218-.42c-.175-.149-.473-.175-.691-.132Zm3.613-.77c.166-.06.35-.07.525-.06.298.017.604.078.866.244.228.14.403.359.508.604.14.324.175.691.175 1.041 0 .315-.061.63-.21.91a1.496 1.496 0 0 1-.542.578 1.73 1.73 0 0 1-.858.236 1.885 1.885 0 0 1-.7-.096v1.347H7.02V5.926h.945v.114a.918.918 0 0 1 .245-.123h-.009Zm.053.77a.581.581 0 0 0-.298.158v1.671c.21.158.525.149.77.088a.723.723 0 0 0 .193-.07.591.591 0 0 0 .236-.228c.096-.166.123-.35.131-.534 0-.192 0-.385-.052-.577a.762.762 0 0 0-.123-.271.577.577 0 0 0-.236-.175c-.158-.062-.455-.105-.621-.07v.008Zm3.045-.7c.184-.087.385-.13.586-.14.158 0 .332 0 .49.027.245.043.481.131.7.245-.079.218-.157.437-.245.647-.018.044-.035.096-.053.14-.06-.044-.113-.096-.175-.14-.183-.114-.516-.175-.726-.122-.052.017-.114.043-.14.096-.026.044-.026.105-.026.157.017.07.07.114.131.158.105.061.21.114.324.157.131.062.271.105.394.167.131.07.262.148.376.253.088.088.166.193.219.307.061.14.087.288.087.437 0 .175-.035.35-.122.508a1.1 1.1 0 0 1-.499.437 2.116 2.116 0 0 1-.402.114 2.836 2.836 0 0 1-.77 0 1.755 1.755 0 0 1-.456-.158c-.087-.043-.183-.087-.27-.14.122-.262.236-.533.358-.796.053.044.105.088.166.131.131.088.28.158.438.184.14.026.35.035.481-.035a.168.168 0 0 0 .096-.131.322.322 0 0 0-.061-.263.74.74 0 0 0-.157-.13 3.83 3.83 0 0 0-.43-.202c-.236-.105-.463-.236-.63-.429a.927.927 0 0 1-.236-.481 1.041 1.041 0 0 1 .018-.403.863.863 0 0 1 .21-.393 1.08 1.08 0 0 1 .324-.228v.026Z" clip-rule="evenodd"></path><path fill="#3C2281" fill-rule="evenodd" d="m8.105 2.829.945 1.443H7.151c.158-.236.306-.472.464-.708.157-.245.324-.49.481-.735h.009Zm3.255 8.067s.105-.017.131.018c.018.026.018.052.018.087v.665a.097.097 0 0 1-.097.096.108.108 0 0 1-.087-.043.211.211 0 0 1-.175.052.259.259 0 0 1-.184-.114.364.364 0 0 1-.008-.376.273.273 0 0 1 .183-.14.28.28 0 0 1 .184.035v-.184c0-.035.009-.06.044-.087l-.009-.009Zm-.175.411c-.053.027-.079.088-.079.15 0 .043.018.095.062.122a.094.094 0 0 0 .122-.027c.035-.06.044-.14 0-.2a.114.114 0 0 0-.114-.045h.009Zm1.977-.42s.097-.008.123.027a.162.162 0 0 1 .018.061v.683c0 .035-.027.078-.062.087-.043.009-.087 0-.114-.044-.087.088-.236.061-.315-.017-.113-.105-.122-.289-.052-.42a.263.263 0 0 1 .166-.14c.07-.018.14 0 .193.035v-.184c0-.035.017-.07.052-.088h-.008Zm-.183.42s-.053.044-.07.08c-.018.06-.009.13.035.174.035.044.105.035.14 0a.184.184 0 0 0 0-.21.114.114 0 0 0-.114-.044h.009Zm-4.874-.315c.035-.043.114-.035.149.01.026.043.017.095.017.14.035 0 .07 0 .096.026.035.035.027.113-.017.13-.026.01-.053.01-.079.01v.35a.141.141 0 0 1-.026.078c-.035.035-.105.035-.131 0a.148.148 0 0 1-.027-.087v-.333c-.017 0-.034 0-.052-.009-.053-.017-.061-.104-.018-.14.018-.017.053-.017.08-.017 0-.053-.01-.114.026-.149l-.018-.008Zm1.216 0c.035-.043.114-.043.149 0 .035.044.018.097.018.15.035 0 .07 0 .096.017.043.035.035.114-.009.14-.026.017-.052.008-.079.008v.35c0 .027 0 .053-.026.07a.091.091 0 0 1-.14 0 .1.1 0 0 1-.026-.07v-.35c-.027 0-.053 0-.07-.017-.044-.035-.044-.114 0-.14.017-.018.043-.018.07-.018 0-.052-.009-.104.017-.148v.008Zm-2.896.132c.07 0 .149.017.201.079a.254.254 0 0 1 .044.157v.298c0 .035-.018.07-.044.087a.108.108 0 0 1-.114-.009.13.13 0 0 1-.034-.079v-.27s0-.053-.018-.07a.066.066 0 0 0-.105 0 .1.1 0 0 0-.026.07v.288a.097.097 0 0 1-.096.096c-.053 0-.088-.044-.088-.096v-.28c0-.026 0-.053-.026-.079-.026-.026-.07-.026-.105 0a.1.1 0 0 0-.027.07v.272c0 .026 0 .06-.026.078-.035.044-.114.035-.14-.009a.162.162 0 0 1-.017-.06v-.412c0-.035 0-.07.026-.088.035-.043.122-.034.149.018.087-.079.227-.07.297.018.044-.035.096-.07.158-.07l-.009-.01Zm-3.71.105a.327.327 0 0 1 .175-.105.282.282 0 0 1 .219.061.328.328 0 0 1 .122.262c0 .036-.035.07-.07.07h-.324c.027.08.132.106.202.062.035-.018.061-.035.096-.044.053 0 .088.044.088.096 0 .044-.044.07-.08.088a.369.369 0 0 1-.253.043.287.287 0 0 1-.193-.122.37.37 0 0 1 .018-.411Zm.114.149h.21a.109.109 0 0 0-.123-.088c-.043 0-.087.044-.096.088h.009Zm1.137-.202a.24.24 0 0 1 .184-.052c.07.008.131.052.166.114.053.078.07.175.053.262a.323.323 0 0 1-.149.227.245.245 0 0 1-.245-.008v.175a.088.088 0 0 1-.087.087.108.108 0 0 1-.088-.043c-.017-.027-.009-.053-.009-.08v-.63c0-.043.026-.087.07-.087.044-.008.088 0 .105.044v-.009Zm.088.123s-.053.043-.062.07a.222.222 0 0 0 .018.166c.018.026.044.053.079.044.035 0 .07-.027.087-.062a.187.187 0 0 0-.017-.2.115.115 0 0 0-.105-.027v.009Zm.534-.14c.078-.053.2-.062.28.017.026-.052.096-.061.14-.026.035.026.026.07.026.105v.359c0 .035 0 .087-.026.113-.044.035-.123.027-.15-.026a.204.204 0 0 1-.13.061.28.28 0 0 1-.21-.096.308.308 0 0 1-.07-.227c0-.105.052-.21.14-.271v-.01Zm.122.14s-.061.061-.07.105c-.009.052 0 .122.044.157.035.035.096.027.131-.008a.172.172 0 0 0 0-.22.083.083 0 0 0-.105-.026V11.3Zm2.117-.131a.286.286 0 0 1 .237-.044.32.32 0 0 1 .227.306c0 .035-.026.079-.07.079H6.89c.026.079.122.096.183.07.044-.018.07-.044.114-.053.053 0 .096.053.088.097 0 .026-.027.043-.044.06a.318.318 0 0 1-.149.062c-.096.018-.21 0-.28-.07-.149-.131-.131-.394.026-.508Zm.106.13s-.035.044-.044.07h.218c0-.026-.017-.043-.035-.06a.095.095 0 0 0-.13 0l-.01-.01Zm.612-.13c.053-.044.123-.053.192-.044a.216.216 0 0 1 .158.105.267.267 0 0 1 .026.14v.271c0 .035-.009.07-.035.087-.043.035-.105.027-.131-.017-.018-.026-.018-.061-.018-.088v-.245c0-.026 0-.06-.026-.078-.035-.026-.087-.026-.114 0a.1.1 0 0 0-.026.07v.271c0 .026 0 .061-.026.079a.106.106 0 0 1-.14 0c-.018-.018-.026-.053-.026-.079v-.411c0-.026 0-.053.026-.07.035-.044.114-.035.149.008h-.009Zm1.339-.044c.07-.018.14 0 .21.026.035.018.07.053.07.096 0 .044-.044.096-.096.079-.044-.009-.08-.044-.132-.044-.017 0-.035 0-.035.026 0 .018.018.027.027.035.07.035.148.053.2.105a.178.178 0 0 1-.017.246c-.07.07-.175.078-.271.052-.053-.018-.105-.035-.14-.079-.026-.043 0-.114.044-.122a.115.115 0 0 1 .105.026c.035.018.079.035.114.018.017 0 .017-.035 0-.044-.044-.027-.088-.035-.132-.062a.207.207 0 0 1-.122-.104c-.027-.062-.009-.132.035-.184a.192.192 0 0 1 .122-.07h.018Zm.735.157a.294.294 0 0 1 .21-.166c.061-.009.131 0 .175.053.026-.053.105-.062.149-.027.026.027.026.07.026.105v.368c0 .035 0 .079-.027.113-.043.035-.122.027-.148-.026a.229.229 0 0 1-.149.061.26.26 0 0 1-.219-.122.374.374 0 0 1-.026-.359h.009Zm.236.018c-.053.017-.079.079-.079.131 0 .044.009.096.053.131.035.035.096.027.131-.017a.184.184 0 0 0 0-.21c-.026-.035-.07-.053-.105-.035Zm.63-.131c.053-.044.131-.053.193-.044.07.008.14.061.166.131.017.035.017.07.017.114v.289a.141.141 0 0 1-.026.078c-.035.035-.114.035-.14-.017-.026-.035-.018-.079-.018-.123v-.245c0-.061-.096-.087-.14-.044-.026.018-.026.053-.026.088v.271c0 .044-.043.096-.087.088a.097.097 0 0 1-.096-.096v-.43c0-.034.017-.07.043-.087.044-.026.096-.017.123.027h-.009Zm1.138.105a.255.255 0 0 1 .2-.15c.062-.008.132 0 .176.053.026-.043.087-.061.14-.035.026.018.035.053.035.079v.394c0 .035 0 .079-.018.113-.043.044-.131.035-.149-.026a.207.207 0 0 1-.14.061.261.261 0 0 1-.227-.13.357.357 0 0 1-.009-.35l-.008-.01Zm.227.026s-.061.052-.07.087a.191.191 0 0 0 .035.167.091.091 0 0 0 .14 0 .184.184 0 0 0 0-.22c-.026-.034-.07-.052-.105-.034Zm-6.702-.149c.043-.044.13-.026.148.035.035.088.061.175.096.262.027-.06.053-.13.08-.2.017-.036.025-.088.06-.106.044-.026.106 0 .132.035.017.035 0 .07-.009.097-.079.2-.158.402-.236.595-.009.026-.018.06-.044.087-.044.044-.14.026-.157-.035a.15.15 0 0 1 .017-.105l.052-.131a8.361 8.361 0 0 1-.166-.42c-.017-.035-.017-.079.018-.105l.008-.009Zm7.157.053c0-.088.14-.105.184-.035.043-.044.122-.062.166-.018.026.026.035.07.018.105-.018.035-.062.035-.097.052-.035.018-.079.035-.079.088v.263c0 .052-.043.087-.096.087-.052 0-.087-.044-.087-.096v-.455l-.009.008Zm-8.942.122h.244c.044 0 .08.035.08.079 0 .043-.027.087-.07.087H3.38c-.044 0-.079-.043-.079-.087 0-.035.026-.07.061-.079Zm-1.488 1.146.499-.761c.315.481.63.962.954 1.444h-1.89c.148-.228.297-.455.455-.683h-.018Zm11.217 0 .5-.761c.314.481.63.962.953 1.444h-1.899l.446-.683Z" clip-rule="evenodd"></path><path fill="#D00A7E" fill-rule="evenodd" d="M4.168 5.882c.253-.052.603-.052.857.018.28.061.542.201.744.411.192.184.324.42.393.674.053.175.07.359.062.542-.009.158-.044.307-.079.464H3.791a.787.787 0 0 0 .14.368.743.743 0 0 0 .324.236c.464.175.945.017 1.216-.271.026.052.053.096.079.148.105.202.21.412.315.613a1.374 1.374 0 0 1-.324.21 2.296 2.296 0 0 1-.866.184 2.238 2.238 0 0 1-.892-.132 1.505 1.505 0 0 1-.648-.49A1.678 1.678 0 0 1 2.82 8a2.304 2.304 0 0 1 .079-.945c.087-.28.245-.534.455-.726a1.65 1.65 0 0 1 .814-.438v-.009Zm.192.805a.598.598 0 0 0-.341.202.842.842 0 0 0-.184.35H5.27a.702.702 0 0 0-.219-.42c-.175-.149-.472-.175-.691-.132Zm3.614-.77c.166-.06.35-.07.525-.06.297.017.603.078.866.244.227.14.402.359.508.604.14.324.175.691.175 1.041 0 .315-.062.63-.21.91a1.496 1.496 0 0 1-.543.578 1.73 1.73 0 0 1-.857.236 1.885 1.885 0 0 1-.7-.096v1.347h-.946V5.926h.946v.114a.918.918 0 0 1 .244-.123h-.008Zm.052.77a.581.581 0 0 0-.297.158v1.671c.21.158.525.149.77.088a.723.723 0 0 0 .192-.07.591.591 0 0 0 .236-.228c.097-.166.123-.35.132-.534 0-.192 0-.385-.053-.577a.762.762 0 0 0-.122-.271.577.577 0 0 0-.236-.175c-.158-.062-.455-.105-.622-.07v.008Zm3.045-.7c.184-.087.385-.13.587-.14.157 0 .332 0 .49.027.245.043.48.131.7.245-.08.218-.158.437-.246.647-.017.044-.034.096-.052.14-.061-.044-.114-.096-.175-.14-.184-.114-.516-.175-.726-.122-.053.017-.114.043-.14.096-.027.044-.027.105-.027.157.018.07.07.114.132.158.105.061.21.114.323.157.132.062.272.105.394.167.132.07.263.148.377.253.087.088.166.193.218.307.062.14.088.288.088.437 0 .175-.035.35-.123.508a1.1 1.1 0 0 1-.498.437 2.114 2.114 0 0 1-.403.114 2.836 2.836 0 0 1-.77 0 1.755 1.755 0 0 1-.455-.158c-.088-.043-.184-.087-.271-.14.122-.262.236-.533.358-.796.053.044.105.088.167.131.131.088.28.158.437.184.14.026.35.035.482-.035a.168.168 0 0 0 .096-.131.322.322 0 0 0-.062-.263.738.738 0 0 0-.157-.13 3.83 3.83 0 0 0-.429-.202c-.236-.105-.463-.236-.63-.429a.927.927 0 0 1-.236-.481 1.041 1.041 0 0 1 .018-.403.863.863 0 0 1 .21-.393 1.08 1.08 0 0 1 .323-.228v.026Z" clip-rule="evenodd"></path></svg>';
 
 export class IconPaymentEps extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPaymentEps extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--eps', '', null, 'IconPaymentEps');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--eps', '', null, 'IconPaymentEps');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--eps');
         this.root.append(svg);
     }

package/icons/IconPaymentGiropay.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--giropay"><path fill="#000268" d="M1.438 5.944c0-.63.455-1.147 1.015-1.147h11.095c.56 0 1.014.517 1.014 1.147v4.103c0 .63-.454 1.147-1.014 1.147H2.452c-.56 0-1.015-.517-1.015-1.147V5.944Z"></path><path fill="#fff" d="M1.857 5.987v4.025c0 .394.29.718.64.718h5.81V5.27h-5.82c-.35 0-.638.324-.638.717h.008Zm7.946 1.995c0 .254-.114.43-.298.43-.166 0-.298-.176-.298-.412s.123-.42.298-.42c.192 0 .297.184.297.402Zm-1.086 1.47h.49v-.875a.48.48 0 0 0 .447.263c.42 0 .647-.394.647-.875 0-.394-.219-.814-.604-.814-.227 0-.428.105-.524.324v-.289h-.456v2.266Zm2.267-1.163c0-.158.131-.21.297-.21h.21c0 .192-.114.376-.306.376-.114 0-.201-.061-.201-.175v.009Zm.989.507c-.027-.122-.027-.254-.027-.376v-.604c0-.49-.315-.665-.673-.665-.21 0-.394.035-.57.114v.376a.9.9 0 0 1 .465-.122c.175 0 .323.061.323.28a1.722 1.722 0 0 0-.227-.018c-.263 0-.735.061-.735.551 0 .35.254.508.534.508.2 0 .34-.088.446-.289 0 .088 0 .166.008.254h.447l.008-.009Zm.218.648c.105.026.201.035.306.035.447 0 .552-.394.692-.797l.516-1.496h-.49l-.289 1.05-.306-1.05h-.525l.577 1.645c-.035.14-.13.219-.245.219a.471.471 0 0 1-.192-.035l-.035.42-.009.009Z"></path><path fill="#FF0007" d="M3.056 7.982c0-.218.096-.402.28-.402.219 0 .315.201.315.376 0 .245-.14.411-.315.411-.148 0-.28-.14-.28-.393v.008Zm1.068-.787h-.446v.289c-.106-.202-.272-.324-.482-.324-.437 0-.639.359-.639.84s.246.814.63.814c.202 0 .36-.088.482-.28v.087c0 .315-.149.464-.438.464a.939.939 0 0 1-.481-.131l-.026.437c.113.044.306.105.542.105.569 0 .858-.21.858-.875V7.195Zm.831-.674h-.49v.411h.49v-.41Zm-.49 2.284h.49v-1.61h-.49v1.61ZM6.32 7.177c-.053 0-.114-.017-.166-.017-.21 0-.333.131-.42.332v-.297h-.447v1.61h.49v-.683c0-.315.132-.507.36-.507.06 0 .113 0 .166.017l.026-.463-.009.008Zm.84 1.278c-.228 0-.315-.21-.315-.446 0-.237.088-.455.315-.455.228 0 .315.21.315.455 0 .245-.096.446-.315.446Zm0 .394c.464 0 .822-.307.822-.84 0-.534-.358-.84-.822-.84-.464 0-.822.306-.822.84 0 .533.358.84.822.84Z"></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--giropay"><path fill="#000268" d="M1.438 5.944c0-.63.455-1.147 1.015-1.147h11.095c.56 0 1.014.517 1.014 1.147v4.103c0 .63-.454 1.147-1.014 1.147H2.452c-.56 0-1.015-.517-1.015-1.147V5.944Z"></path><path fill="#fff" d="M1.857 5.987v4.025c0 .394.29.718.64.718h5.81V5.27h-5.82c-.35 0-.638.324-.638.717h.008Zm7.946 1.995c0 .254-.114.43-.298.43-.166 0-.298-.176-.298-.412s.123-.42.298-.42c.192 0 .297.184.297.402Zm-1.086 1.47h.49v-.875a.48.48 0 0 0 .447.263c.42 0 .647-.394.647-.875 0-.394-.219-.814-.604-.814-.227 0-.428.105-.524.324v-.289h-.456v2.266Zm2.267-1.163c0-.158.131-.21.297-.21h.21c0 .192-.114.376-.306.376-.114 0-.201-.061-.201-.175v.009Zm.989.507c-.027-.122-.027-.254-.027-.376v-.604c0-.49-.315-.665-.673-.665-.21 0-.394.035-.57.114v.376a.9.9 0 0 1 .465-.122c.175 0 .323.061.323.28a1.722 1.722 0 0 0-.227-.018c-.263 0-.735.061-.735.551 0 .35.254.508.534.508.2 0 .34-.088.446-.289 0 .088 0 .166.008.254h.447l.008-.009Zm.218.648c.105.026.201.035.306.035.447 0 .552-.394.692-.797l.516-1.496h-.49l-.289 1.05-.306-1.05h-.525l.577 1.645c-.035.14-.13.219-.245.219a.471.471 0 0 1-.192-.035l-.035.42-.009.009Z"></path><path fill="#FF0007" d="M3.056 7.982c0-.218.096-.402.28-.402.219 0 .315.201.315.376 0 .245-.14.411-.315.411-.148 0-.28-.14-.28-.393v.008Zm1.068-.787h-.446v.289c-.106-.202-.272-.324-.482-.324-.437 0-.639.359-.639.84s.246.814.63.814c.202 0 .36-.088.482-.28v.087c0 .315-.149.464-.438.464a.939.939 0 0 1-.481-.131l-.026.437c.113.044.306.105.542.105.569 0 .858-.21.858-.875V7.195Zm.831-.674h-.49v.411h.49v-.41Zm-.49 2.284h.49v-1.61h-.49v1.61ZM6.32 7.177c-.053 0-.114-.017-.166-.017-.21 0-.333.131-.42.332v-.297h-.447v1.61h.49v-.683c0-.315.132-.507.36-.507.06 0 .113 0 .166.017l.026-.463-.009.008Zm.84 1.278c-.228 0-.315-.21-.315-.446 0-.237.088-.455.315-.455.228 0 .315.21.315.455 0 .245-.096.446-.315.446Zm0 .394c.464 0 .822-.307.822-.84 0-.534-.358-.84-.822-.84-.464 0-.822.306-.822.84 0 .533.358.84.822.84Z"></path></svg>';
 
 export class IconPaymentGiropay extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPaymentGiropay extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--giropay', '', null, 'IconPaymentGiropay');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--giropay', '', null, 'IconPaymentGiropay');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--giropay');
         this.root.append(svg);
     }

package/icons/IconPaymentGooglePay.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--googlePay"><path fill="#5F6368" d="M7.659 7.947v1.427h-.455V5.856h1.198c.29 0 .57.105.78.306.21.193.323.455.323.744 0 .28-.114.56-.324.744a1.07 1.07 0 0 1-.779.297H7.66Zm0-1.653v1.225h.76a.608.608 0 0 0 .447-.184.597.597 0 0 0 .009-.849h-.009a.592.592 0 0 0-.446-.201h-.761v.009Z"></path><path fill="#5F6368" d="M10.537 6.889c.333 0 .595.087.788.271.192.175.289.42.289.735v1.479h-.43V9.04h-.017c-.183.271-.437.412-.743.412a.967.967 0 0 1-.665-.237.76.76 0 0 1-.272-.586c0-.245.097-.446.28-.595.184-.149.438-.219.753-.219.271 0 .49.053.665.149V7.86A.545.545 0 0 0 11 7.458a.664.664 0 0 0-.437-.167.677.677 0 0 0-.595.315l-.394-.253c.219-.315.542-.473.971-.473l-.009.009Zm-.586 1.75c0 .114.053.227.149.297a.512.512 0 0 0 .35.114.722.722 0 0 0 .507-.21.667.667 0 0 0 .228-.499c-.14-.113-.341-.166-.586-.166a.756.756 0 0 0-.455.131.398.398 0 0 0-.184.333H9.95Z"></path><path fill="#5F6368" d="m14.099 6.968-1.505 3.464h-.464l.56-1.216-.989-2.248h.49l.718 1.723h.008l.7-1.723h.49-.008Z"></path><path fill="#4285F4" d="M5.83 7.641c0-.14-.009-.271-.035-.411H3.896v.779H4.99a.927.927 0 0 1-.402.612v.508h.647c.385-.35.604-.875.604-1.488H5.83Z"></path><path fill="#34A853" d="M3.896 9.61c.543 0 1.006-.175 1.339-.49l-.648-.507a1.216 1.216 0 0 1-.69.192c-.526 0-.972-.359-1.138-.831h-.674v.516a2.015 2.015 0 0 0 1.802 1.111l.01.009Z"></path><path fill="#FBBC04" d="M2.759 7.974a1.162 1.162 0 0 1 0-.77v-.516h-.674a2.002 2.002 0 0 0 0 1.81l.674-.515v-.01Z"></path><path fill="#EA4335" d="M3.896 6.372c.289 0 .569.105.77.307l.578-.578a1.935 1.935 0 0 0-1.348-.525c-.761 0-1.461.429-1.802 1.111l.674.517a1.198 1.198 0 0 1 1.137-.832h-.009Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--googlePay"><path fill="#5F6368" d="M7.659 7.947v1.427h-.455V5.856h1.198c.29 0 .57.105.78.306.21.193.323.455.323.744 0 .28-.114.56-.324.744a1.07 1.07 0 0 1-.779.297H7.66Zm0-1.653v1.225h.76a.608.608 0 0 0 .447-.184.597.597 0 0 0 .009-.849h-.009a.592.592 0 0 0-.446-.201h-.761v.009Z"></path><path fill="#5F6368" d="M10.537 6.889c.333 0 .595.087.788.271.192.175.289.42.289.735v1.479h-.43V9.04h-.017c-.183.271-.437.412-.743.412a.967.967 0 0 1-.665-.237.76.76 0 0 1-.272-.586c0-.245.097-.446.28-.595.184-.149.438-.219.753-.219.271 0 .49.053.665.149V7.86A.545.545 0 0 0 11 7.458a.664.664 0 0 0-.437-.167.677.677 0 0 0-.595.315l-.394-.253c.219-.315.542-.473.971-.473l-.009.009Zm-.586 1.75c0 .114.053.227.149.297a.512.512 0 0 0 .35.114.722.722 0 0 0 .507-.21.667.667 0 0 0 .228-.499c-.14-.113-.341-.166-.586-.166a.756.756 0 0 0-.455.131.398.398 0 0 0-.184.333H9.95Z"></path><path fill="#5F6368" d="m14.099 6.968-1.505 3.464h-.464l.56-1.216-.989-2.248h.49l.718 1.723h.008l.7-1.723h.49-.008Z"></path><path fill="#4285F4" d="M5.83 7.641c0-.14-.009-.271-.035-.411H3.896v.779H4.99a.927.927 0 0 1-.402.612v.508h.647c.385-.35.604-.875.604-1.488H5.83Z"></path><path fill="#34A853" d="M3.896 9.61c.543 0 1.006-.175 1.339-.49l-.648-.507a1.216 1.216 0 0 1-.69.192c-.526 0-.972-.359-1.138-.831h-.674v.516a2.015 2.015 0 0 0 1.802 1.111l.01.009Z"></path><path fill="#FBBC04" d="M2.759 7.974a1.162 1.162 0 0 1 0-.77v-.516h-.674a2.002 2.002 0 0 0 0 1.81l.674-.515v-.01Z"></path><path fill="#EA4335" d="M3.896 6.372c.289 0 .569.105.77.307l.578-.578a1.935 1.935 0 0 0-1.348-.525c-.761 0-1.461.429-1.802 1.111l.674.517a1.198 1.198 0 0 1 1.137-.832h-.009Z"></path></svg>';
 
 export class IconPaymentGooglePay extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPaymentGooglePay extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--googlePay', '', null, 'IconPaymentGooglePay');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--googlePay', '', null, 'IconPaymentGooglePay');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--googlePay');
         this.root.append(svg);
     }