@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/icons/IconPercentageLarge.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--percentageLarge"><path d="M23 16c-3.001 0-4.375 2.494-4.375 4.813 0 2.318 1.374 4.812 4.375 4.812s4.375-2.494 4.375-4.813C27.375 18.494 26.01 16 23 16Zm0 7.875c-2.555 0-2.625-2.747-2.625-3.063 0-.315.07-3.062 2.625-3.062s2.625 2.747 2.625 3.063c0 .315-.07 3.062-2.625 3.062Z"></path><path d="M22.16 6.375 7.766 25.625h2.188l14.393-19.25H22.16Z"></path><path d="M9 16c3.01 0 4.375-2.494 4.375-4.813 0-2.318-1.365-4.812-4.375-4.812s-4.375 2.494-4.375 4.813C4.625 13.505 5.999 16 9 16Zm0-7.875c2.555 0 2.625 2.748 2.625 3.063 0 .314-.07 3.062-2.625 3.062s-2.625-2.748-2.625-3.063c0-.314.07-3.062 2.625-3.062Z"></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--percentageLarge"><path d="M23 16c-3.001 0-4.375 2.494-4.375 4.813 0 2.318 1.374 4.812 4.375 4.812s4.375-2.494 4.375-4.813C27.375 18.494 26.01 16 23 16Zm0 7.875c-2.555 0-2.625-2.747-2.625-3.063 0-.315.07-3.062 2.625-3.062s2.625 2.747 2.625 3.063c0 .315-.07 3.062-2.625 3.062Z"></path><path d="M22.16 6.375 7.766 25.625h2.188l14.393-19.25H22.16Z"></path><path d="M9 16c3.01 0 4.375-2.494 4.375-4.813 0-2.318-1.365-4.812-4.375-4.812s-4.375 2.494-4.375 4.813C4.625 13.505 5.999 16 9 16Zm0-7.875c2.555 0 2.625 2.748 2.625 3.063 0 .314-.07 3.062-2.625 3.062s-2.625-2.748-2.625-3.063c0-.314.07-3.062 2.625-3.062Z"></path></svg>';
 
 export class IconPercentageLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPercentageLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--percentageLarge', '', null, 'IconPercentageLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--percentageLarge', '', null, 'IconPercentageLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--percentageLarge');
         this.root.append(svg);
     }

package/icons/IconPetSupplies.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--petSupplies"><path d="M5.637 8.787c0 .307-.2.552-.446.552-.245 0-.446-.245-.446-.552 0-.306.201-.55.446-.55s.446.244.446.55Z"></path><path d="M7.055 10.432v.018h-.018a.124.124 0 0 1 .018.053.758.758 0 0 1 .052.28.881.881 0 0 1-1.373.735.881.881 0 0 1-1.374-.735c0-.097.026-.193.052-.28l.027-.053v-.018c.157-.42.673-.735 1.303-.735.63 0 1.155.316 1.313.736Z"></path><path d="M4.176 10.144c.247 0 .446-.247.446-.552 0-.304-.2-.55-.446-.55s-.446.246-.446.55c0 .305.2.552.446.552Z"></path><path d="M6.784 8.787c0 .307-.202.552-.447.552s-.446-.245-.446-.552c0-.306.201-.55.446-.55s.447.244.447.55Z"></path><path d="M7.352 9.041c-.245 0-.446.245-.446.551 0 .307.201.552.446.552s.447-.245.447-.552c0-.306-.202-.55-.447-.55Z"></path><path fill-rule="evenodd" d="M14.221 8.219a1.665 1.665 0 0 1-1.277.481v.009a2.791 2.791 0 0 1 1.837 2.616c0 1.54-1.251 2.8-2.8 2.8a2.79 2.79 0 0 1-1.872-.726v.726h-8.69V4.692c0-1.146.937-2.082 2.083-2.082h4.524a2.08 2.08 0 0 1 2.083 2.074 1.8 1.8 0 0 1 .253-.324c.64-.639 1.76-.639 2.398 0 .271.271.429.612.472.989.36.043.71.192.99.472a1.706 1.706 0 0 1 0 2.398Zm-3.036-2.59c.131.656-.035 1.268-.455 1.688l-.009-.008-.612.542v1.225l1.137-1.216c.429-.429 1.041-.604 1.698-.473a.38.38 0 0 0 .34-.105.383.383 0 0 0 0-.533.392.392 0 0 0-.533 0 .66.66 0 0 1-.927 0 .66.66 0 0 1 0-.928.375.375 0 0 0 0-.534.392.392 0 0 0-.534 0 .38.38 0 0 0-.105.342ZM8.026 3.922H3.502c-.428 0-.77.35-.77.77v.657h6.064v-.657c0-.428-.35-.77-.77-.77Zm-5.294 2.74v6.15h6.064v-6.15H2.732Zm7.753 4.663a1.486 1.486 0 1 0 2.975 0c0-.823-.665-1.488-1.488-1.488-.822 0-1.487.665-1.487 1.488Z" 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--petSupplies"><path d="M5.637 8.787c0 .307-.2.552-.446.552-.245 0-.446-.245-.446-.552 0-.306.201-.55.446-.55s.446.244.446.55Z"></path><path d="M7.055 10.432v.018h-.018a.124.124 0 0 1 .018.053.758.758 0 0 1 .052.28.881.881 0 0 1-1.373.735.881.881 0 0 1-1.374-.735c0-.097.026-.193.052-.28l.027-.053v-.018c.157-.42.673-.735 1.303-.735.63 0 1.155.316 1.313.736Z"></path><path d="M4.176 10.144c.247 0 .446-.247.446-.552 0-.304-.2-.55-.446-.55s-.446.246-.446.55c0 .305.2.552.446.552Z"></path><path d="M6.784 8.787c0 .307-.202.552-.447.552s-.446-.245-.446-.552c0-.306.201-.55.446-.55s.447.244.447.55Z"></path><path d="M7.352 9.041c-.245 0-.446.245-.446.551 0 .307.201.552.446.552s.447-.245.447-.552c0-.306-.202-.55-.447-.55Z"></path><path fill-rule="evenodd" d="M14.221 8.219a1.665 1.665 0 0 1-1.277.481v.009a2.791 2.791 0 0 1 1.837 2.616c0 1.54-1.251 2.8-2.8 2.8a2.79 2.79 0 0 1-1.872-.726v.726h-8.69V4.692c0-1.146.937-2.082 2.083-2.082h4.524a2.08 2.08 0 0 1 2.083 2.074 1.8 1.8 0 0 1 .253-.324c.64-.639 1.76-.639 2.398 0 .271.271.429.612.472.989.36.043.71.192.99.472a1.706 1.706 0 0 1 0 2.398Zm-3.036-2.59c.131.656-.035 1.268-.455 1.688l-.009-.008-.612.542v1.225l1.137-1.216c.429-.429 1.041-.604 1.698-.473a.38.38 0 0 0 .34-.105.383.383 0 0 0 0-.533.392.392 0 0 0-.533 0 .66.66 0 0 1-.927 0 .66.66 0 0 1 0-.928.375.375 0 0 0 0-.534.392.392 0 0 0-.534 0 .38.38 0 0 0-.105.342ZM8.026 3.922H3.502c-.428 0-.77.35-.77.77v.657h6.064v-.657c0-.428-.35-.77-.77-.77Zm-5.294 2.74v6.15h6.064v-6.15H2.732Zm7.753 4.663a1.486 1.486 0 1 0 2.975 0c0-.823-.665-1.488-1.488-1.488-.822 0-1.487.665-1.487 1.488Z" clip-rule="evenodd"></path></svg>';
 
 export class IconPetSupplies extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPetSupplies extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--petSupplies', '', null, 'IconPetSupplies');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--petSupplies', '', null, 'IconPetSupplies');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--petSupplies');
         this.root.append(svg);
     }

package/icons/IconPetSuppliesLarge.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--petSuppliesLarge"><path d="M11.713 16.49c0 .525-.35.954-.78.954-.428 0-.778-.429-.778-.954 0-.525.35-.954.779-.954.429 0 .779.429.779.954Z"></path><path d="M14.171 19.351v.027l-.008.008.011.036c.008.02.015.038.015.06.052.15.087.307.087.482a1.533 1.533 0 0 1-2.389 1.269 1.533 1.533 0 0 1-2.389-1.269c0-.175.036-.333.088-.49l.027-.088.017-.035c.271-.735 1.181-1.277 2.266-1.277s1.995.542 2.275 1.277Z"></path><path d="M9.936 17.872c0-.524-.35-.953-.779-.953-.428 0-.778.428-.778.953 0 .526.35.954.778.954.43 0 .78-.428.78-.954Z"></path><path d="M13.699 16.49c0 .525-.35.954-.779.954-.429 0-.779-.429-.779-.954 0-.525.35-.954.78-.954.428 0 .778.429.778.954Z"></path><path d="M14.696 16.91c-.428 0-.778.429-.778.954 0 .525.35.953.778.953.429 0 .779-.428.779-.953 0-.525-.35-.954-.779-.954Z"></path><path fill-rule="evenodd" d="m23.271 17.829-.315.332v.009c2.442.105 4.402 2.039 4.402 4.585a4.617 4.617 0 0 1-4.612 4.611c-1.426 0-2.677-.656-3.526-1.671v1.671H4.634V10.488a2.633 2.633 0 0 1 2.625-2.626h9.354a2.633 2.633 0 0 1 2.625 2.626v4.007l.42-.367c.262-.272.227-.744.174-.998a2.577 2.577 0 0 1 .71-2.328 2.588 2.588 0 0 1 3.665 0c.464.473.71 1.077.744 1.69a2.57 2.57 0 0 1 1.689.743 2.588 2.588 0 0 1 0 3.666 2.6 2.6 0 0 1-2.328.709c-.262-.052-.735-.087-1.04.219Zm-1.732-5.04c.201 1.015-.062 1.969-.7 2.607v.018l-1.61 1.409v2.773l2.791-2.975c.656-.665 1.61-.918 2.625-.726.28.053.56-.035.761-.236a.845.845 0 0 0 0-1.199.845.845 0 0 0-1.198 0 .871.871 0 1 1-1.234-1.234.845.845 0 0 0 0-1.199.845.845 0 0 0-1.199 0 .847.847 0 0 0-.236.762Zm-4.944-3.185H7.259a.878.878 0 0 0-.875.875v.761H17.47v-.761a.878.878 0 0 0-.875-.875ZM6.384 12.999v12.617H17.47V13H6.384Zm16.362 6.886a2.868 2.868 0 0 0-2.861 2.861h-.009c0 1.05.578 1.96 1.418 2.459.113-1.032.665-2.065 1.549-2.826.7-.604 1.522-.98 2.345-1.094a2.849 2.849 0 0 0-2.442-1.4Zm.271 5.661v.035l-.008.009a2.839 2.839 0 0 0 2.555-2.573c-.525.035-1.103.272-1.584.692-.586.507-.963 1.216-.963 1.837Z" 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--petSuppliesLarge"><path d="M11.713 16.49c0 .525-.35.954-.78.954-.428 0-.778-.429-.778-.954 0-.525.35-.954.779-.954.429 0 .779.429.779.954Z"></path><path d="M14.171 19.351v.027l-.008.008.011.036c.008.02.015.038.015.06.052.15.087.307.087.482a1.533 1.533 0 0 1-2.389 1.269 1.533 1.533 0 0 1-2.389-1.269c0-.175.036-.333.088-.49l.027-.088.017-.035c.271-.735 1.181-1.277 2.266-1.277s1.995.542 2.275 1.277Z"></path><path d="M9.936 17.872c0-.524-.35-.953-.779-.953-.428 0-.778.428-.778.953 0 .526.35.954.778.954.43 0 .78-.428.78-.954Z"></path><path d="M13.699 16.49c0 .525-.35.954-.779.954-.429 0-.779-.429-.779-.954 0-.525.35-.954.78-.954.428 0 .778.429.778.954Z"></path><path d="M14.696 16.91c-.428 0-.778.429-.778.954 0 .525.35.953.778.953.429 0 .779-.428.779-.953 0-.525-.35-.954-.779-.954Z"></path><path fill-rule="evenodd" d="m23.271 17.829-.315.332v.009c2.442.105 4.402 2.039 4.402 4.585a4.617 4.617 0 0 1-4.612 4.611c-1.426 0-2.677-.656-3.526-1.671v1.671H4.634V10.488a2.633 2.633 0 0 1 2.625-2.626h9.354a2.633 2.633 0 0 1 2.625 2.626v4.007l.42-.367c.262-.272.227-.744.174-.998a2.577 2.577 0 0 1 .71-2.328 2.588 2.588 0 0 1 3.665 0c.464.473.71 1.077.744 1.69a2.57 2.57 0 0 1 1.689.743 2.588 2.588 0 0 1 0 3.666 2.6 2.6 0 0 1-2.328.709c-.262-.052-.735-.087-1.04.219Zm-1.732-5.04c.201 1.015-.062 1.969-.7 2.607v.018l-1.61 1.409v2.773l2.791-2.975c.656-.665 1.61-.918 2.625-.726.28.053.56-.035.761-.236a.845.845 0 0 0 0-1.199.845.845 0 0 0-1.198 0 .871.871 0 1 1-1.234-1.234.845.845 0 0 0 0-1.199.845.845 0 0 0-1.199 0 .847.847 0 0 0-.236.762Zm-4.944-3.185H7.259a.878.878 0 0 0-.875.875v.761H17.47v-.761a.878.878 0 0 0-.875-.875ZM6.384 12.999v12.617H17.47V13H6.384Zm16.362 6.886a2.868 2.868 0 0 0-2.861 2.861h-.009c0 1.05.578 1.96 1.418 2.459.113-1.032.665-2.065 1.549-2.826.7-.604 1.522-.98 2.345-1.094a2.849 2.849 0 0 0-2.442-1.4Zm.271 5.661v.035l-.008.009a2.839 2.839 0 0 0 2.555-2.573c-.525.035-1.103.272-1.584.692-.586.507-.963 1.216-.963 1.837Z" clip-rule="evenodd"></path></svg>';
 
 export class IconPetSuppliesLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPetSuppliesLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--petSuppliesLarge', '', null, 'IconPetSuppliesLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--petSuppliesLarge', '', null, 'IconPetSuppliesLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--petSuppliesLarge');
         this.root.append(svg);
     }

package/icons/IconPharmacy.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--pharmacy"><path d="M4.842 7.711h1.312v.928h.928V9.95h-.928v.928H4.842V9.95h-.92V8.64h.92V7.71Z"></path><path fill-rule="evenodd" d="m12.892 5.926.113.114 1.47 1.872-.06 4.42c0 .463-.185.91-.526 1.25-.35.35-.814.543-1.304.543H10.31c-.446 0-.875-.166-1.207-.464-.306.289-.691.464-1.103.464H2.995a1.58 1.58 0 0 1-1.163-.516 1.776 1.776 0 0 1-.464-1.339l.472-6.737a1.515 1.515 0 0 1-.55-1.164V4.28c0-.84.682-1.531 1.53-1.531h5.364c.84 0 1.531.683 1.531 1.531v.088c0 .463-.218.884-.55 1.163l.104 1.462.919-1.033c.026-.026.079-.07.079-.07v-1.26h2.625v1.295Zm-1.313.726a.542.542 0 0 0-.411.175V6.82L9.794 8.367v.342h3.36V8.35l-1.181-1.505a.506.506 0 0 0-.394-.192ZM2.82 4.063a.217.217 0 0 0-.218.22v.087c0 .122.096.219.218.219h5.364a.217.217 0 0 0 .219-.22v-.087a.217.217 0 0 0-.219-.218H2.82ZM8 12.805a.297.297 0 0 0 .21-.097v.01a.485.485 0 0 0 .114-.35l-.446-6.423H3.127l-.447 6.422a.485.485 0 0 0 .114.35.293.293 0 0 0 .21.088H8Zm4.585 0c.15 0 .28-.053.377-.149h-.01a.478.478 0 0 0 .14-.332l.036-2.293H9.794v2.284c0 .131.053.254.14.341a.508.508 0 0 0 .376.149h2.275Z" 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--pharmacy"><path d="M4.842 7.711h1.312v.928h.928V9.95h-.928v.928H4.842V9.95h-.92V8.64h.92V7.71Z"></path><path fill-rule="evenodd" d="m12.892 5.926.113.114 1.47 1.872-.06 4.42c0 .463-.185.91-.526 1.25-.35.35-.814.543-1.304.543H10.31c-.446 0-.875-.166-1.207-.464-.306.289-.691.464-1.103.464H2.995a1.58 1.58 0 0 1-1.163-.516 1.776 1.776 0 0 1-.464-1.339l.472-6.737a1.515 1.515 0 0 1-.55-1.164V4.28c0-.84.682-1.531 1.53-1.531h5.364c.84 0 1.531.683 1.531 1.531v.088c0 .463-.218.884-.55 1.163l.104 1.462.919-1.033c.026-.026.079-.07.079-.07v-1.26h2.625v1.295Zm-1.313.726a.542.542 0 0 0-.411.175V6.82L9.794 8.367v.342h3.36V8.35l-1.181-1.505a.506.506 0 0 0-.394-.192ZM2.82 4.063a.217.217 0 0 0-.218.22v.087c0 .122.096.219.218.219h5.364a.217.217 0 0 0 .219-.22v-.087a.217.217 0 0 0-.219-.218H2.82ZM8 12.805a.297.297 0 0 0 .21-.097v.01a.485.485 0 0 0 .114-.35l-.446-6.423H3.127l-.447 6.422a.485.485 0 0 0 .114.35.293.293 0 0 0 .21.088H8Zm4.585 0c.15 0 .28-.053.377-.149h-.01a.478.478 0 0 0 .14-.332l.036-2.293H9.794v2.284c0 .131.053.254.14.341a.508.508 0 0 0 .376.149h2.275Z" clip-rule="evenodd"></path></svg>';
 
 export class IconPharmacy extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPharmacy extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pharmacy', '', null, 'IconPharmacy');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pharmacy', '', null, 'IconPharmacy');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pharmacy');
         this.root.append(svg);
     }

package/icons/IconPharmacyLarge.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--pharmacyLarge"><path d="M10.829 16.201h1.75v1.951h1.951v1.75H12.58v1.952h-1.75v-1.951H8.878v-1.75h1.95V16.2Z"></path><path fill-rule="evenodd" d="M24.103 12.727c.288.184.56.394.77.665l.008-.008 2.564 3.264-.105 7.796c0 .752-.297 1.479-.849 2.03-.56.56-1.312.875-2.117.875h-4.06a2.97 2.97 0 0 1-2.126-.884c-.026-.017-.044-.044-.061-.07-.018.018-.031.037-.044.057-.013.02-.026.04-.044.057a2.571 2.571 0 0 1-1.864.84H7.233a2.52 2.52 0 0 1-1.864-.823 2.883 2.883 0 0 1-.752-2.161l.848-12.232a2.511 2.511 0 0 1-.997-1.995 2.52 2.52 0 0 1 2.52-2.52h9.423a2.52 2.52 0 0 1 2.52 2.52c0 .813-.393 1.53-.997 1.995l.245 3.508 2.109-2.38c.183-.21.411-.385.647-.534H20.2v-1.75h4.69v1.75h-.787ZM16.166 25.6a.788.788 0 0 0 .587-.271h.009c.21-.22.314-.526.288-.85l-.822-11.75H7.18l-.822 11.76c-.018.323.087.63.289.848a.75.75 0 0 0 .586.263h8.933ZM6.988 10.916h9.424a.771.771 0 0 0 0-1.54H6.988a.771.771 0 0 0 0 1.54Zm15.575 3.098a1.252 1.252 0 0 0-.963.411l-2.529 2.861v.866h6.607v-.9l-2.179-2.774a1.25 1.25 0 0 0-.936-.464Zm1.811 11.594c.332 0 .648-.123.875-.36h.009c.21-.218.332-.498.332-.804l.061-4.541h-6.553v4.523c0 .315.114.604.332.823.236.236.552.359.884.359h4.06Z" 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--pharmacyLarge"><path d="M10.829 16.201h1.75v1.951h1.951v1.75H12.58v1.952h-1.75v-1.951H8.878v-1.75h1.95V16.2Z"></path><path fill-rule="evenodd" d="M24.103 12.727c.288.184.56.394.77.665l.008-.008 2.564 3.264-.105 7.796c0 .752-.297 1.479-.849 2.03-.56.56-1.312.875-2.117.875h-4.06a2.97 2.97 0 0 1-2.126-.884c-.026-.017-.044-.044-.061-.07-.018.018-.031.037-.044.057-.013.02-.026.04-.044.057a2.571 2.571 0 0 1-1.864.84H7.233a2.52 2.52 0 0 1-1.864-.823 2.883 2.883 0 0 1-.752-2.161l.848-12.232a2.511 2.511 0 0 1-.997-1.995 2.52 2.52 0 0 1 2.52-2.52h9.423a2.52 2.52 0 0 1 2.52 2.52c0 .813-.393 1.53-.997 1.995l.245 3.508 2.109-2.38c.183-.21.411-.385.647-.534H20.2v-1.75h4.69v1.75h-.787ZM16.166 25.6a.788.788 0 0 0 .587-.271h.009c.21-.22.314-.526.288-.85l-.822-11.75H7.18l-.822 11.76c-.018.323.087.63.289.848a.75.75 0 0 0 .586.263h8.933ZM6.988 10.916h9.424a.771.771 0 0 0 0-1.54H6.988a.771.771 0 0 0 0 1.54Zm15.575 3.098a1.252 1.252 0 0 0-.963.411l-2.529 2.861v.866h6.607v-.9l-2.179-2.774a1.25 1.25 0 0 0-.936-.464Zm1.811 11.594c.332 0 .648-.123.875-.36h.009c.21-.218.332-.498.332-.804l.061-4.541h-6.553v4.523c0 .315.114.604.332.823.236.236.552.359.884.359h4.06Z" clip-rule="evenodd"></path></svg>';
 
 export class IconPharmacyLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPharmacyLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pharmacyLarge', '', null, 'IconPharmacyLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pharmacyLarge', '', null, 'IconPharmacyLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pharmacyLarge');
         this.root.append(svg);
     }

package/icons/IconPhone.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--phone"><path d="M11.412 14.344h-.315a10.64 10.64 0 0 1-3.7-1.208 10.937 10.937 0 0 1-4.56-4.672A11.13 11.13 0 0 1 1.682 4.85a2.625 2.625 0 0 1 1.383-2.695L4.43 1.42l1.942 3.666a1.566 1.566 0 0 1-.428 1.969L4.272 8.341a9.625 9.625 0 0 0 3.255 3.334L8.954 9.75a1.522 1.522 0 0 1 1.994-.429l3.623 2.004-.875 1.645a2.624 2.624 0 0 1-2.284 1.374ZM8.7 12.296a9.396 9.396 0 0 0 2.572.727 1.278 1.278 0 0 0 1.26-.648l.271-.499-2.502-1.391a.228.228 0 0 0-.289.07L8.7 12.296ZM3.887 3.205l-.201.105a1.356 1.356 0 0 0-.709 1.365c.126.843.358 1.666.692 2.45l1.478-1.111a.245.245 0 0 0 .07-.307l-1.33-2.502Z"></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--phone"><path d="M11.412 14.344h-.315a10.64 10.64 0 0 1-3.7-1.208 10.937 10.937 0 0 1-4.56-4.672A11.13 11.13 0 0 1 1.682 4.85a2.625 2.625 0 0 1 1.383-2.695L4.43 1.42l1.942 3.666a1.566 1.566 0 0 1-.428 1.969L4.272 8.341a9.625 9.625 0 0 0 3.255 3.334L8.954 9.75a1.522 1.522 0 0 1 1.994-.429l3.623 2.004-.875 1.645a2.624 2.624 0 0 1-2.284 1.374ZM8.7 12.296a9.396 9.396 0 0 0 2.572.727 1.278 1.278 0 0 0 1.26-.648l.271-.499-2.502-1.391a.228.228 0 0 0-.289.07L8.7 12.296ZM3.887 3.205l-.201.105a1.356 1.356 0 0 0-.709 1.365c.126.843.358 1.666.692 2.45l1.478-1.111a.245.245 0 0 0 .07-.307l-1.33-2.502Z"></path></svg>';
 
 export class IconPhone extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPhone extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--phone', '', null, 'IconPhone');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--phone', '', null, 'IconPhone');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--phone');
         this.root.append(svg);
     }

package/icons/IconPhoneFilled.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--phoneFilled"><path d="M11.097 14.344h.315a2.624 2.624 0 0 0 2.284-1.374l.875-1.645-3.623-2.004a1.522 1.522 0 0 0-1.994.429l-1.427 1.925a9.625 9.625 0 0 1-3.255-3.334l1.672-1.286a1.566 1.566 0 0 0 .428-1.969L4.43 1.42l-1.365.735A2.625 2.625 0 0 0 1.682 4.85a11.13 11.13 0 0 0 1.155 3.614 10.937 10.937 0 0 0 4.559 4.672 10.64 10.64 0 0 0 3.701 1.208Z"></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--phoneFilled"><path d="M11.097 14.344h.315a2.624 2.624 0 0 0 2.284-1.374l.875-1.645-3.623-2.004a1.522 1.522 0 0 0-1.994.429l-1.427 1.925a9.625 9.625 0 0 1-3.255-3.334l1.672-1.286a1.566 1.566 0 0 0 .428-1.969L4.43 1.42l-1.365.735A2.625 2.625 0 0 0 1.682 4.85a11.13 11.13 0 0 0 1.155 3.614 10.937 10.937 0 0 0 4.559 4.672 10.64 10.64 0 0 0 3.701 1.208Z"></path></svg>';
 
 export class IconPhoneFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPhoneFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--phoneFilled', '', null, 'IconPhoneFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--phoneFilled', '', null, 'IconPhoneFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--phoneFilled');
         this.root.append(svg);
     }

package/icons/IconPhoneFilledLarge.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--phoneFilledLarge"><path d="M18.623 19.302a2.485 2.485 0 0 1 1.752.268l6.431 3.544-1.47 2.738a4.498 4.498 0 0 1-3.902 2.398c-.18.013-.362.013-.543 0a19.34 19.34 0 0 1-6.71-2.223 19.81 19.81 0 0 1-8.287-8.452 20.239 20.239 0 0 1-2.1-6.554 4.568 4.568 0 0 1 2.38-4.646l2.222-1.181 3.43 6.431a2.555 2.555 0 0 1-.717 3.238l-3.334 2.546a17.955 17.955 0 0 0 6.545 6.702l2.818-3.841c.359-.494.888-.839 1.485-.968Z"></path><path d="M16.875 5.5v1.75a7.875 7.875 0 0 1 7.875 7.875h1.75A9.625 9.625 0 0 0 16.875 5.5Z"></path><path d="M16.875 9.875v1.75a3.5 3.5 0 0 1 3.5 3.5h1.75a5.25 5.25 0 0 0-5.25-5.25Z"></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--phoneFilledLarge"><path d="M18.623 19.302a2.485 2.485 0 0 1 1.752.268l6.431 3.544-1.47 2.738a4.498 4.498 0 0 1-3.902 2.398c-.18.013-.362.013-.543 0a19.34 19.34 0 0 1-6.71-2.223 19.81 19.81 0 0 1-8.287-8.452 20.239 20.239 0 0 1-2.1-6.554 4.568 4.568 0 0 1 2.38-4.646l2.222-1.181 3.43 6.431a2.555 2.555 0 0 1-.717 3.238l-3.334 2.546a17.955 17.955 0 0 0 6.545 6.702l2.818-3.841c.359-.494.888-.839 1.485-.968Z"></path><path d="M16.875 5.5v1.75a7.875 7.875 0 0 1 7.875 7.875h1.75A9.625 9.625 0 0 0 16.875 5.5Z"></path><path d="M16.875 9.875v1.75a3.5 3.5 0 0 1 3.5 3.5h1.75a5.25 5.25 0 0 0-5.25-5.25Z"></path></svg>';
 
 export class IconPhoneFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPhoneFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--phoneFilledLarge', '', null, 'IconPhoneFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--phoneFilledLarge', '', null, 'IconPhoneFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--phoneFilledLarge');
         this.root.append(svg);
     }

package/icons/IconPhoneLarge.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--phoneLarge"><path d="M20.375 19.57a2.485 2.485 0 0 0-3.237.7l-2.818 3.841a17.955 17.955 0 0 1-6.545-6.702l3.334-2.546a2.555 2.555 0 0 0 .717-3.238l-3.43-6.431-2.222 1.181a4.567 4.567 0 0 0-2.38 4.646 20.239 20.239 0 0 0 2.1 6.554 19.81 19.81 0 0 0 8.286 8.453 19.34 19.34 0 0 0 6.711 2.222c.181.013.362.013.543 0a4.498 4.498 0 0 0 3.902-2.398l1.47-2.738-6.43-3.544ZM5.5 10.75a2.8 2.8 0 0 1 1.496-2.826l.674-.368 2.625 4.918a.788.788 0 0 1-.21.997l-3.089 2.354A18.095 18.095 0 0 1 5.5 10.75Zm18.296 14.28a2.704 2.704 0 0 1-2.677 1.47 17.685 17.685 0 0 1-5.25-1.54l2.625-3.631a.735.735 0 0 1 .971-.219l4.9 2.721-.569 1.199Zm-6.92-17.78V5.5a9.625 9.625 0 0 1 9.624 9.625h-1.75a7.875 7.875 0 0 0-7.875-7.875Zm0 4.375v-1.75a5.25 5.25 0 0 1 5.25 5.25h-1.75a3.5 3.5 0 0 0-3.5-3.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--phoneLarge"><path d="M20.375 19.57a2.485 2.485 0 0 0-3.237.7l-2.818 3.841a17.955 17.955 0 0 1-6.545-6.702l3.334-2.546a2.555 2.555 0 0 0 .717-3.238l-3.43-6.431-2.222 1.181a4.567 4.567 0 0 0-2.38 4.646 20.239 20.239 0 0 0 2.1 6.554 19.81 19.81 0 0 0 8.286 8.453 19.34 19.34 0 0 0 6.711 2.222c.181.013.362.013.543 0a4.498 4.498 0 0 0 3.902-2.398l1.47-2.738-6.43-3.544ZM5.5 10.75a2.8 2.8 0 0 1 1.496-2.826l.674-.368 2.625 4.918a.788.788 0 0 1-.21.997l-3.089 2.354A18.095 18.095 0 0 1 5.5 10.75Zm18.296 14.28a2.704 2.704 0 0 1-2.677 1.47 17.685 17.685 0 0 1-5.25-1.54l2.625-3.631a.735.735 0 0 1 .971-.219l4.9 2.721-.569 1.199Zm-6.92-17.78V5.5a9.625 9.625 0 0 1 9.624 9.625h-1.75a7.875 7.875 0 0 0-7.875-7.875Zm0 4.375v-1.75a5.25 5.25 0 0 1 5.25 5.25h-1.75a3.5 3.5 0 0 0-3.5-3.5Z"></path></svg>';
 
 export class IconPhoneLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPhoneLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--phoneLarge', '', null, 'IconPhoneLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--phoneLarge', '', null, 'IconPhoneLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--phoneLarge');
         this.root.append(svg);
     }

package/icons/IconPhoneOff.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--phoneOff"><path d="m8.954 9.75-1.427 1.925a8.694 8.694 0 0 1-1.277-.971L15 1.875h-1.846L5.279 9.75a9.38 9.38 0 0 1-1.006-1.409l1.67-1.286a1.566 1.566 0 0 0 .43-1.969L4.43 1.42l-1.365.735A2.625 2.625 0 0 0 1.683 4.85a11.216 11.216 0 0 0 2.704 5.871L1 14.125h1.846l2.459-2.476a10.702 10.702 0 0 0 2.091 1.47 10.64 10.64 0 0 0 3.702 1.207h.314a2.624 2.624 0 0 0 2.275-1.391l.876-1.645-3.614-1.986a1.522 1.522 0 0 0-1.995.446ZM2.977 4.675a1.356 1.356 0 0 1 .71-1.365l.2-.105 1.33 2.502a.245.245 0 0 1-.07.307L3.67 7.125a10.045 10.045 0 0 1-.692-2.45Zm9.556 7.7a1.278 1.278 0 0 1-1.26.691A9.396 9.396 0 0 1 8.7 12.34l1.313-1.75a.227.227 0 0 1 .288-.07l2.503 1.391-.271.464Z"></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--phoneOff"><path d="m8.954 9.75-1.427 1.925a8.694 8.694 0 0 1-1.277-.971L15 1.875h-1.846L5.279 9.75a9.38 9.38 0 0 1-1.006-1.409l1.67-1.286a1.566 1.566 0 0 0 .43-1.969L4.43 1.42l-1.365.735A2.625 2.625 0 0 0 1.683 4.85a11.216 11.216 0 0 0 2.704 5.871L1 14.125h1.846l2.459-2.476a10.702 10.702 0 0 0 2.091 1.47 10.64 10.64 0 0 0 3.702 1.207h.314a2.624 2.624 0 0 0 2.275-1.391l.876-1.645-3.614-1.986a1.522 1.522 0 0 0-1.995.446ZM2.977 4.675a1.356 1.356 0 0 1 .71-1.365l.2-.105 1.33 2.502a.245.245 0 0 1-.07.307L3.67 7.125a10.045 10.045 0 0 1-.692-2.45Zm9.556 7.7a1.278 1.278 0 0 1-1.26.691A9.396 9.396 0 0 1 8.7 12.34l1.313-1.75a.227.227 0 0 1 .288-.07l2.503 1.391-.271.464Z"></path></svg>';
 
 export class IconPhoneOff extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPhoneOff extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--phoneOff', '', null, 'IconPhoneOff');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--phoneOff', '', null, 'IconPhoneOff');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--phoneOff');
         this.root.append(svg);
     }

package/icons/IconPhoneOffLarge.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--phoneOffLarge"><path d="m17.882 19.552-2.81 3.842a17.925 17.925 0 0 1-3-2.231l8.53-8.523c.319.53.49 1.133.5 1.75h1.75a5.25 5.25 0 0 0-.98-3.045l1.872-1.872a7.875 7.875 0 0 1 1.75 4.917h1.75a9.625 9.625 0 0 0-2.24-6.125l3.605-3.64h-2.467l-2.39 2.389a9.625 9.625 0 0 0-6.124-2.231v1.75a7.875 7.875 0 0 1 4.909 1.75l-1.9 1.846a5.25 5.25 0 0 0-3.035-.971v1.75a3.448 3.448 0 0 1 1.75.49l-8.514 8.522a18.26 18.26 0 0 1-2.328-3.229l3.334-2.555a2.546 2.546 0 0 0 .691-3.211l-3.42-6.457-2.223 1.19a4.567 4.567 0 0 0-2.372 4.646 20.195 20.195 0 0 0 2.1 6.571 19.82 19.82 0 0 0 2.993 4.279l-6.221 6.221h2.467l4.979-4.979a19.613 19.613 0 0 0 4.06 2.905 19.25 19.25 0 0 0 6.72 2.197h.534a4.47 4.47 0 0 0 3.902-2.398l1.47-2.739-6.396-3.5a2.485 2.485 0 0 0-3.246.691ZM6.252 10.06a2.818 2.818 0 0 1 1.47-2.861l.675-.36 2.625 4.918a.787.787 0 0 1-.21.989l-3.098 2.38a18.375 18.375 0 0 1-1.461-5.066Zm18.262 14.254a2.677 2.677 0 0 1-2.669 1.443 17.5 17.5 0 0 1-5.25-1.531l2.67-3.64a.735.735 0 0 1 .962-.21l4.908 2.712-.62 1.226Z"></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--phoneOffLarge"><path d="m17.882 19.552-2.81 3.842a17.925 17.925 0 0 1-3-2.231l8.53-8.523c.319.53.49 1.133.5 1.75h1.75a5.25 5.25 0 0 0-.98-3.045l1.872-1.872a7.875 7.875 0 0 1 1.75 4.917h1.75a9.625 9.625 0 0 0-2.24-6.125l3.605-3.64h-2.467l-2.39 2.389a9.625 9.625 0 0 0-6.124-2.231v1.75a7.875 7.875 0 0 1 4.909 1.75l-1.9 1.846a5.25 5.25 0 0 0-3.035-.971v1.75a3.448 3.448 0 0 1 1.75.49l-8.514 8.522a18.26 18.26 0 0 1-2.328-3.229l3.334-2.555a2.546 2.546 0 0 0 .691-3.211l-3.42-6.457-2.223 1.19a4.567 4.567 0 0 0-2.372 4.646 20.195 20.195 0 0 0 2.1 6.571 19.82 19.82 0 0 0 2.993 4.279l-6.221 6.221h2.467l4.979-4.979a19.613 19.613 0 0 0 4.06 2.905 19.25 19.25 0 0 0 6.72 2.197h.534a4.47 4.47 0 0 0 3.902-2.398l1.47-2.739-6.396-3.5a2.485 2.485 0 0 0-3.246.691ZM6.252 10.06a2.818 2.818 0 0 1 1.47-2.861l.675-.36 2.625 4.918a.787.787 0 0 1-.21.989l-3.098 2.38a18.375 18.375 0 0 1-1.461-5.066Zm18.262 14.254a2.677 2.677 0 0 1-2.669 1.443 17.5 17.5 0 0 1-5.25-1.531l2.67-3.64a.735.735 0 0 1 .962-.21l4.908 2.712-.62 1.226Z"></path></svg>';
 
 export class IconPhoneOffLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPhoneOffLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--phoneOffLarge', '', null, 'IconPhoneOffLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--phoneOffLarge', '', null, 'IconPhoneOffLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--phoneOffLarge');
         this.root.append(svg);
     }

package/icons/IconPickUp.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--pickUp"><g clip-path="url(#prefix__clip0_4_159)"><path d="M8.875 2.531H15V1.22H8.875a4.375 4.375 0 0 0-3.929 2.625H3.257l-.122.052A2.047 2.047 0 0 0 1.962 5.2a2.205 2.205 0 0 0 .788 2.275l-.796 5.95c-.012.365.12.72.367.989a1.163 1.163 0 0 0 .875.367h8.671a1.162 1.162 0 0 0 .875-.367 1.364 1.364 0 0 0 .36-1.05l-.77-5.793a2.695 2.695 0 0 0 1.478-1.54H15V4.72h-2.266l-.123.507a1.558 1.558 0 0 1-1.864 1.252l-.34-.062-1.13 1.129a.578.578 0 0 1-.805 0 .586.586 0 0 1-.12-.64.551.551 0 0 1 .13-.183l1.618-1.54a.752.752 0 0 0 .184-.875.77.77 0 0 0-.718-.49H6.46a2.888 2.888 0 0 1 2.415-1.286Zm0 6.493a1.873 1.873 0 0 0 1.33-.551l.665-.666h.087l.753 5.662H3.266l.761-5.688h3.098a1.873 1.873 0 0 0 1.75 1.242Zm-.639-3.868-.665.63c-.198.192-.35.425-.446.683h-3.5a.936.936 0 0 1-.359-.875.717.717 0 0 1 .324-.394h4.646v-.044Z"></path></g><defs><clipPath id="prefix__clip0_4_159"><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--pickUp"><g clip-path="url(#prefix__clip0_4_159)"><path d="M8.875 2.531H15V1.22H8.875a4.375 4.375 0 0 0-3.929 2.625H3.257l-.122.052A2.047 2.047 0 0 0 1.962 5.2a2.205 2.205 0 0 0 .788 2.275l-.796 5.95c-.012.365.12.72.367.989a1.163 1.163 0 0 0 .875.367h8.671a1.162 1.162 0 0 0 .875-.367 1.364 1.364 0 0 0 .36-1.05l-.77-5.793a2.695 2.695 0 0 0 1.478-1.54H15V4.72h-2.266l-.123.507a1.558 1.558 0 0 1-1.864 1.252l-.34-.062-1.13 1.129a.578.578 0 0 1-.805 0 .586.586 0 0 1-.12-.64.551.551 0 0 1 .13-.183l1.618-1.54a.752.752 0 0 0 .184-.875.77.77 0 0 0-.718-.49H6.46a2.888 2.888 0 0 1 2.415-1.286Zm0 6.493a1.873 1.873 0 0 0 1.33-.551l.665-.666h.087l.753 5.662H3.266l.761-5.688h3.098a1.873 1.873 0 0 0 1.75 1.242Zm-.639-3.868-.665.63c-.198.192-.35.425-.446.683h-3.5a.936.936 0 0 1-.359-.875.717.717 0 0 1 .324-.394h4.646v-.044Z"></path></g><defs><clipPath id="prefix__clip0_4_159"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconPickUp extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPickUp extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pickUp', '', null, 'IconPickUp');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pickUp', '', null, 'IconPickUp');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pickUp');
         this.root.append(svg);
     }

package/icons/IconPickUpLarge.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--pickUpLarge"><path d="M25.625 2.875h-8.75c-3.859 0-5.959 3.106-6.659 4.375H5.841l-.157.07a3.194 3.194 0 0 0-1.829 2.03 3.5 3.5 0 0 0 1.75 3.902L3.75 26.692a2.45 2.45 0 0 0 .656 1.794 2.046 2.046 0 0 0 1.47.639H21.75a2.046 2.046 0 0 0 1.47-.639 2.483 2.483 0 0 0 .656-1.872L21.95 12.5a4.042 4.042 0 0 0 1.636-1.75h1.164v1.75H30V2.875h-4.375ZM5.544 9.814c.114-.35.359-.64.682-.814H15.8l-1.278 1.225a2.791 2.791 0 0 0-.796 1.4H6.28a1.75 1.75 0 0 1-.735-1.811Zm16.581 16.948a.684.684 0 0 1-.166.508.305.305 0 0 1-.21.105H5.876a.306.306 0 0 1-.21-.105.674.674 0 0 1-.175-.429l1.83-13.466h6.544a2.835 2.835 0 0 0 2.625 1.75 2.861 2.861 0 0 0 2.013-.831l1.155-1.164c.202-.006.403-.023.603-.053l1.864 13.685ZM22.37 9l-.201.595a2.703 2.703 0 0 1-2.783 1.75l-.41-.044-1.75 1.75a1.095 1.095 0 0 1-1.79-.36 1.059 1.059 0 0 1-.075-.427 1.094 1.094 0 0 1 .333-.779l2.625-2.494a1.015 1.015 0 0 0 .332-1.155.962.962 0 0 0-.9-.586h-5.478a5.748 5.748 0 0 1 4.602-2.625h7.875V9h-2.38Zm5.88 1.75H26.5V4.625h1.75v6.125Z"></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--pickUpLarge"><path d="M25.625 2.875h-8.75c-3.859 0-5.959 3.106-6.659 4.375H5.841l-.157.07a3.194 3.194 0 0 0-1.829 2.03 3.5 3.5 0 0 0 1.75 3.902L3.75 26.692a2.45 2.45 0 0 0 .656 1.794 2.046 2.046 0 0 0 1.47.639H21.75a2.046 2.046 0 0 0 1.47-.639 2.483 2.483 0 0 0 .656-1.872L21.95 12.5a4.042 4.042 0 0 0 1.636-1.75h1.164v1.75H30V2.875h-4.375ZM5.544 9.814c.114-.35.359-.64.682-.814H15.8l-1.278 1.225a2.791 2.791 0 0 0-.796 1.4H6.28a1.75 1.75 0 0 1-.735-1.811Zm16.581 16.948a.684.684 0 0 1-.166.508.305.305 0 0 1-.21.105H5.876a.306.306 0 0 1-.21-.105.674.674 0 0 1-.175-.429l1.83-13.466h6.544a2.835 2.835 0 0 0 2.625 1.75 2.861 2.861 0 0 0 2.013-.831l1.155-1.164c.202-.006.403-.023.603-.053l1.864 13.685ZM22.37 9l-.201.595a2.703 2.703 0 0 1-2.783 1.75l-.41-.044-1.75 1.75a1.095 1.095 0 0 1-1.79-.36 1.059 1.059 0 0 1-.075-.427 1.094 1.094 0 0 1 .333-.779l2.625-2.494a1.015 1.015 0 0 0 .332-1.155.962.962 0 0 0-.9-.586h-5.478a5.748 5.748 0 0 1 4.602-2.625h7.875V9h-2.38Zm5.88 1.75H26.5V4.625h1.75v6.125Z"></path></svg>';
 
 export class IconPickUpLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPickUpLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pickUpLarge', '', null, 'IconPickUpLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pickUpLarge', '', null, 'IconPickUpLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pickUpLarge');
         this.root.append(svg);
     }

package/icons/IconPie.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--pie"><path d="M8.053 6.906c.105 0 .21-.043.288-.122a.412.412 0 0 0 .123-.289c0-.245-.184-.814-.411-.814-.228 0-.412.595-.412.814 0 .105.044.21.123.289a.412.412 0 0 0 .289.122Z"></path><path d="M5.979 6.346s.096.062.149.079c.043.009.078.018.122.018h.044a.337.337 0 0 0 .157-.053.5.5 0 0 0 .123-.114c.149-.166.411-.735.236-.883a.185.185 0 0 0-.122-.035c-.228 0-.595.245-.727.385a.4.4 0 0 0-.096.14.355.355 0 0 0-.035.166c0 .052.018.114.035.166a.387.387 0 0 0 .105.131h.009Z"></path><path d="M9.566 6.381a.416.416 0 0 0 .158.044h.026s.088 0 .131-.017a.444.444 0 0 0 .14-.08.416.416 0 0 0 .14-.28c0-.052 0-.104-.017-.157a.444.444 0 0 0-.079-.14c-.131-.14-.516-.376-.744-.376-.043 0-.087.009-.113.035-.175.149.078.718.236.884.035.044.079.07.122.096v-.009Z"></path><path d="M14.773 7.388h-.202L13.547 5.41c-.55-.857-1.452-1.4-2.52-1.514-.35-.035-.63-.28-.796-.481-.332-.385-.971-.84-2.17-.84h-.113c-1.2 0-1.847.455-2.17.84-.175.201-.447.446-.85.481-1.014.105-1.907.657-2.493 1.567l-.989 1.925h-.218V8.7h.84l1.04 4.734h9.827L13.976 8.7h.796V7.388Zm-11.21-1.27c.333-.515.876-.848 1.55-.918.62-.061 1.19-.385 1.662-.936.271-.315.788-.385 1.173-.385h.113c.385 0 .902.07 1.173.385.472.542 1.041.866 1.715.936a1.998 1.998 0 0 1 1.461.858l.682 1.32H2.916l.648-1.268v.009Zm8.313 6.003H4.16L3.406 8.7h9.223l-.753 3.421Z"></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--pie"><path d="M8.053 6.906c.105 0 .21-.043.288-.122a.412.412 0 0 0 .123-.289c0-.245-.184-.814-.411-.814-.228 0-.412.595-.412.814 0 .105.044.21.123.289a.412.412 0 0 0 .289.122Z"></path><path d="M5.979 6.346s.096.062.149.079c.043.009.078.018.122.018h.044a.337.337 0 0 0 .157-.053.5.5 0 0 0 .123-.114c.149-.166.411-.735.236-.883a.185.185 0 0 0-.122-.035c-.228 0-.595.245-.727.385a.4.4 0 0 0-.096.14.355.355 0 0 0-.035.166c0 .052.018.114.035.166a.387.387 0 0 0 .105.131h.009Z"></path><path d="M9.566 6.381a.416.416 0 0 0 .158.044h.026s.088 0 .131-.017a.444.444 0 0 0 .14-.08.416.416 0 0 0 .14-.28c0-.052 0-.104-.017-.157a.444.444 0 0 0-.079-.14c-.131-.14-.516-.376-.744-.376-.043 0-.087.009-.113.035-.175.149.078.718.236.884.035.044.079.07.122.096v-.009Z"></path><path d="M14.773 7.388h-.202L13.547 5.41c-.55-.857-1.452-1.4-2.52-1.514-.35-.035-.63-.28-.796-.481-.332-.385-.971-.84-2.17-.84h-.113c-1.2 0-1.847.455-2.17.84-.175.201-.447.446-.85.481-1.014.105-1.907.657-2.493 1.567l-.989 1.925h-.218V8.7h.84l1.04 4.734h9.827L13.976 8.7h.796V7.388Zm-11.21-1.27c.333-.515.876-.848 1.55-.918.62-.061 1.19-.385 1.662-.936.271-.315.788-.385 1.173-.385h.113c.385 0 .902.07 1.173.385.472.542 1.041.866 1.715.936a1.998 1.998 0 0 1 1.461.858l.682 1.32H2.916l.648-1.268v.009Zm8.313 6.003H4.16L3.406 8.7h9.223l-.753 3.421Z"></path></svg>';
 
 export class IconPie extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPie extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pie', '', null, 'IconPie');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pie', '', null, 'IconPie');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pie');
         this.root.append(svg);
     }

package/icons/IconPieChart.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--pieChart"><path d="M8.656 8.656H1.22V8A6.79 6.79 0 0 1 8 1.219h.656v7.437ZM2.531 7.344h4.813V2.566a5.495 5.495 0 0 0-4.778 4.778h-.035Zm7.412-5.346V3.38A5.031 5.031 0 0 1 8 13.031a5.075 5.075 0 0 1-4.62-3.054H1.998A6.326 6.326 0 0 0 14.344 8a6.3 6.3 0 0 0-4.367-6.002h-.034Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--pieChart"><path d="M8.656 8.656H1.22V8A6.79 6.79 0 0 1 8 1.219h.656v7.437ZM2.531 7.344h4.813V2.566a5.495 5.495 0 0 0-4.778 4.778h-.035Zm7.412-5.346V3.38A5.031 5.031 0 0 1 8 13.031a5.075 5.075 0 0 1-4.62-3.054H1.998A6.326 6.326 0 0 0 14.344 8a6.3 6.3 0 0 0-4.367-6.002h-.034Z"></path></svg>';
 
 export class IconPieChart extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPieChart extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pieChart', '', null, 'IconPieChart');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pieChart', '', null, 'IconPieChart');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pieChart');
         this.root.append(svg);
     }

package/icons/IconPieChartLarge.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--pieChartLarge"><path d="M16.875 2.875H16A13.125 13.125 0 0 0 2.875 16v.875h14v-14Zm-1.75 12.25h-10.5a11.375 11.375 0 0 1 10.5-10.5v10.5Zm.07 11.375-.14 1.75a12.294 12.294 0 0 1-11.016-9.625h1.793a10.552 10.552 0 0 0 9.363 7.875ZM28.25 16a12.294 12.294 0 0 1-11.305 12.25l-.14-1.75a10.5 10.5 0 0 0 1.82-20.668V4.03A12.25 12.25 0 0 1 28.25 16Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--pieChartLarge"><path d="M16.875 2.875H16A13.125 13.125 0 0 0 2.875 16v.875h14v-14Zm-1.75 12.25h-10.5a11.375 11.375 0 0 1 10.5-10.5v10.5Zm.07 11.375-.14 1.75a12.294 12.294 0 0 1-11.016-9.625h1.793a10.552 10.552 0 0 0 9.363 7.875ZM28.25 16a12.294 12.294 0 0 1-11.305 12.25l-.14-1.75a10.5 10.5 0 0 0 1.82-20.668V4.03A12.25 12.25 0 0 1 28.25 16Z"></path></svg>';
 
 export class IconPieChartLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPieChartLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pieChartLarge', '', null, 'IconPieChartLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pieChartLarge', '', null, 'IconPieChartLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pieChartLarge');
         this.root.append(svg);
     }

package/icons/IconPieLarge.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--pieLarge"><path d="M16.271 13.375a.895.895 0 0 0 .893-.893c0-.533-.402-1.793-.893-1.793-.49 0-.892 1.295-.892 1.793a.895.895 0 0 0 .893.893Z"></path><path d="M11.73 12.159a.918.918 0 0 0 .586.228h.105a.97.97 0 0 0 .35-.114.911.911 0 0 0 .272-.245c.332-.368.892-1.61.507-1.934-.07-.061-.157-.079-.262-.079-.49 0-1.304.534-1.584.84a1.06 1.06 0 0 0-.21.306.867.867 0 0 0 .018.726c.052.114.13.21.218.298v-.026Z"></path><path d="M19.57 12.229a.904.904 0 0 0 .341.096h.07a.985.985 0 0 0 .28-.044.822.822 0 0 0 .307-.175.97.97 0 0 0 .218-.28.902.902 0 0 0 .097-.341c0-.114 0-.236-.044-.35a.823.823 0 0 0-.175-.306c-.28-.315-1.129-.832-1.628-.832-.096 0-.183.018-.245.07-.376.324.175 1.567.508 1.934a.97.97 0 0 0 .28.219l-.009.009Z"></path><path d="M17.05 18.354h-1.793v3.579h1.793v-3.58Z"></path><path d="m12.588 21.933-.884-3.58h-1.82l.893 3.58h1.81Z"></path><path d="M22.423 18.354h-1.811l-.875 3.579h1.802l.884-3.58Z"></path><path d="M29.186 14.661h-.638l-2.083-4.042a6.052 6.052 0 0 0-4.497-2.748h-.105c-.814-.096-1.435-.639-1.82-1.085-.849-.989-2.17-1.496-3.92-1.496h-.228c-1.75 0-3.071.499-3.92 1.496-.376.446-1.006.989-1.82 1.076h-.105a6.097 6.097 0 0 0-4.497 2.765l-2.065 4.034h-.674v1.75h1.96l2.03 9.214h18.471l2.03-9.214h1.881v-1.75ZM7.05 11.538a4.308 4.308 0 0 1 3.185-1.926h.105c1.102-.122 2.126-.7 2.966-1.688.499-.587 1.374-.884 2.59-.884h.228c1.216 0 2.091.297 2.59.884.84.988 1.872 1.566 2.966 1.671h.105c1.321.14 2.485.857 3.159 1.899l1.627 3.167H5.456l1.602-3.123h-.009Zm16.817 12.337H8.204l-1.645-7.464h18.953l-1.646 7.464Z"></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--pieLarge"><path d="M16.271 13.375a.895.895 0 0 0 .893-.893c0-.533-.402-1.793-.893-1.793-.49 0-.892 1.295-.892 1.793a.895.895 0 0 0 .893.893Z"></path><path d="M11.73 12.159a.918.918 0 0 0 .586.228h.105a.97.97 0 0 0 .35-.114.911.911 0 0 0 .272-.245c.332-.368.892-1.61.507-1.934-.07-.061-.157-.079-.262-.079-.49 0-1.304.534-1.584.84a1.06 1.06 0 0 0-.21.306.867.867 0 0 0 .018.726c.052.114.13.21.218.298v-.026Z"></path><path d="M19.57 12.229a.904.904 0 0 0 .341.096h.07a.985.985 0 0 0 .28-.044.822.822 0 0 0 .307-.175.97.97 0 0 0 .218-.28.902.902 0 0 0 .097-.341c0-.114 0-.236-.044-.35a.823.823 0 0 0-.175-.306c-.28-.315-1.129-.832-1.628-.832-.096 0-.183.018-.245.07-.376.324.175 1.567.508 1.934a.97.97 0 0 0 .28.219l-.009.009Z"></path><path d="M17.05 18.354h-1.793v3.579h1.793v-3.58Z"></path><path d="m12.588 21.933-.884-3.58h-1.82l.893 3.58h1.81Z"></path><path d="M22.423 18.354h-1.811l-.875 3.579h1.802l.884-3.58Z"></path><path d="M29.186 14.661h-.638l-2.083-4.042a6.052 6.052 0 0 0-4.497-2.748h-.105c-.814-.096-1.435-.639-1.82-1.085-.849-.989-2.17-1.496-3.92-1.496h-.228c-1.75 0-3.071.499-3.92 1.496-.376.446-1.006.989-1.82 1.076h-.105a6.097 6.097 0 0 0-4.497 2.765l-2.065 4.034h-.674v1.75h1.96l2.03 9.214h18.471l2.03-9.214h1.881v-1.75ZM7.05 11.538a4.308 4.308 0 0 1 3.185-1.926h.105c1.102-.122 2.126-.7 2.966-1.688.499-.587 1.374-.884 2.59-.884h.228c1.216 0 2.091.297 2.59.884.84.988 1.872 1.566 2.966 1.671h.105c1.321.14 2.485.857 3.159 1.899l1.627 3.167H5.456l1.602-3.123h-.009Zm16.817 12.337H8.204l-1.645-7.464h18.953l-1.646 7.464Z"></path></svg>';
 
 export class IconPieLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPieLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pieLarge', '', null, 'IconPieLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pieLarge', '', null, 'IconPieLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pieLarge');
         this.root.append(svg);
     }

package/icons/IconPinAtHome.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--pinAtHome"><path d="m14.694 7.125-.91.875s-.298-.289-.753-.7v1.575H11.72V6.154a27.329 27.329 0 0 0-3.5-2.713.534.534 0 0 0-.403 0 26.933 26.933 0 0 0-3.5 2.704v6.44h8.75v1.313H2.97V7.335c-.455.411-.744.691-.753.7l-.91-.91a42.972 42.972 0 0 1 5.819-4.813 1.75 1.75 0 0 1 1.75-.008 42.882 42.882 0 0 1 5.819 4.821ZM7.124 9.75a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-1.75Zm1.75.875a.875.875 0 1 0 1.751 0 .875.875 0 0 0-1.75 0Zm3.5-.875a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-1.75Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--pinAtHome"><path d="m14.694 7.125-.91.875s-.298-.289-.753-.7v1.575H11.72V6.154a27.329 27.329 0 0 0-3.5-2.713.534.534 0 0 0-.403 0 26.933 26.933 0 0 0-3.5 2.704v6.44h8.75v1.313H2.97V7.335c-.455.411-.744.691-.753.7l-.91-.91a42.972 42.972 0 0 1 5.819-4.813 1.75 1.75 0 0 1 1.75-.008 42.882 42.882 0 0 1 5.819 4.821ZM7.124 9.75a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-1.75Zm1.75.875a.875.875 0 1 0 1.751 0 .875.875 0 0 0-1.75 0Zm3.5-.875a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-1.75Z"></path></svg>';
 
 export class IconPinAtHome extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPinAtHome extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pinAtHome', '', null, 'IconPinAtHome');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pinAtHome', '', null, 'IconPinAtHome');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pinAtHome');
         this.root.append(svg);
     }

package/icons/IconPinAtHomeFilled.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--pinAtHomeFilled"><path d="M8.875 2.304a1.75 1.75 0 0 0-1.75.008 42.972 42.972 0 0 0-5.819 4.813l.91.875s.298-.289.753-.7v6.571H13.03V7.335c.455.411.744.691.753.7l.875-.945a42.875 42.875 0 0 0-5.784-4.786Zm-3.5 8.321a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75Zm2.625 0a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75Zm2.625 0a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--pinAtHomeFilled"><path d="M8.875 2.304a1.75 1.75 0 0 0-1.75.008 42.972 42.972 0 0 0-5.819 4.813l.91.875s.298-.289.753-.7v6.571H13.03V7.335c.455.411.744.691.753.7l.875-.945a42.875 42.875 0 0 0-5.784-4.786Zm-3.5 8.321a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75Zm2.625 0a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75Zm2.625 0a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75Z"></path></svg>';
 
 export class IconPinAtHomeFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPinAtHomeFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pinAtHomeFilled', '', null, 'IconPinAtHomeFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pinAtHomeFilled', '', null, 'IconPinAtHomeFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pinAtHomeFilled');
         this.root.append(svg);
     }