@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/icons/IconSponsoredFilled.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--sponsoredFilled"><path d="M12.375 2.094h-8.75a1.54 1.54 0 0 0-1.531 1.531v8.75a1.54 1.54 0 0 0 1.531 1.531h8.75a1.54 1.54 0 0 0 1.531-1.531v-8.75a1.54 1.54 0 0 0-1.531-1.531ZM10.564 9.75H9.25V7.668L7.59 9.338a.525.525 0 0 0 0 .876l-.937.875a1.828 1.828 0 0 1 0-2.678L8.316 6.74H6.25V5.427h3.22a1.094 1.094 0 0 1 1.094 1.094V9.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--sponsoredFilled"><path d="M12.375 2.094h-8.75a1.54 1.54 0 0 0-1.531 1.531v8.75a1.54 1.54 0 0 0 1.531 1.531h8.75a1.54 1.54 0 0 0 1.531-1.531v-8.75a1.54 1.54 0 0 0-1.531-1.531ZM10.564 9.75H9.25V7.668L7.59 9.338a.525.525 0 0 0 0 .876l-.937.875a1.828 1.828 0 0 1 0-2.678L8.316 6.74H6.25V5.427h3.22a1.094 1.094 0 0 1 1.094 1.094V9.75Z"></path></svg>';
 
 export class IconSponsoredFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSponsoredFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--sponsoredFilled', '', null, 'IconSponsoredFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--sponsoredFilled', '', null, 'IconSponsoredFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sponsoredFilled');
         this.root.append(svg);
     }

package/icons/IconSponsoredFilledLarge.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--sponsoredFilledLarge"><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.625Zm-4.375 14h-1.75v-4.944l-3.754 3.754a2.255 2.255 0 0 0 0 3.194L13.63 21.87a4.026 4.026 0 0 1 0-5.67L17.33 12.5H12.5v-1.75h6.563a1.313 1.313 0 0 1 1.312 1.313v6.562Z"></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--sponsoredFilledLarge"><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.625Zm-4.375 14h-1.75v-4.944l-3.754 3.754a2.255 2.255 0 0 0 0 3.194L13.63 21.87a4.026 4.026 0 0 1 0-5.67L17.33 12.5H12.5v-1.75h6.563a1.313 1.313 0 0 1 1.312 1.313v6.562Z"></path></svg>';
 
 export class IconSponsoredFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSponsoredFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--sponsoredFilledLarge', '', null, 'IconSponsoredFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--sponsoredFilledLarge', '', null, 'IconSponsoredFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sponsoredFilledLarge');
         this.root.append(svg);
     }

package/icons/IconStampcard.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--stampcard"><path d="M13.941 10.039c-.043.061-.183.254-.218.332a3.248 3.248 0 0 0-.105.473c-.097.569-.22 1.338-.832 1.951-.603.604-1.4.735-1.925.822-.157.027-.393.062-.49.105-.07.027-.27.176-.376.245-.437.324-1.111.806-1.995.806-.884 0-1.549-.482-1.986-.806a4.093 4.093 0 0 0-.376-.253c-.088-.035-.315-.07-.473-.105-.542-.088-1.339-.219-1.942-.832-.604-.603-.735-1.373-.823-1.933-.035-.201-.061-.403-.105-.49-.026-.07-.166-.254-.245-.368-.324-.446-.814-1.12-.814-2.004 0-.883.482-1.548.805-1.986.07-.096.22-.306.254-.376.035-.096.079-.324.105-.481v-.062c.096-.524.245-1.294.831-1.88.587-.587 1.374-.736 1.934-.823.166-.026.394-.062.49-.105.07-.026.271-.175.376-.245.473-.341 1.112-.805 1.995-.805.884 0 1.55.481 1.987.805.122.087.306.227.376.253.087.035.315.08.481.105.569.097 1.339.22 1.943.832.603.612.735 1.374.822 1.933.026.158.061.394.105.49.026.07.166.254.245.368.35.481.814 1.12.814 2.004 0 .883-.481 1.548-.805 1.986l-.053.044ZM3.695 5.419a3.263 3.263 0 0 1-.175.726 3.414 3.414 0 0 1-.411.656c-.263.368-.543.753-.543 1.199 0 .446.28.831.552 1.207.157.22.315.438.402.648.096.227.14.49.184.77.079.455.149.919.455 1.216.306.298.779.385 1.207.455.28.044.552.088.78.184.2.088.393.219.655.402.368.272.753.543 1.2.543.445 0 .83-.28 1.207-.551.2-.149.428-.315.647-.403.236-.096.525-.149.788-.184.42-.07.9-.148 1.198-.446.307-.306.377-.761.455-1.207.044-.271.088-.552.184-.779.079-.201.219-.402.368-.604l.035-.052c.27-.377.55-.753.55-1.199 0-.446-.28-.831-.542-1.199-.157-.219-.315-.437-.402-.656-.096-.236-.149-.534-.184-.787-.07-.438-.149-.902-.446-1.2-.298-.306-.761-.376-1.208-.454-.27-.044-.55-.088-.787-.193-.21-.087-.438-.245-.648-.402-.376-.272-.76-.551-1.207-.551-.446 0-.831.28-1.199.55-.201.15-.429.316-.647.403-.237.096-.508.14-.78.184-.445.07-.91.149-1.207.455-.297.306-.376.779-.446 1.199V5.4l-.035.018Z"></path><path d="M5.9 7.772c-.577 0-1.05-.472-1.05-1.05v-.07a1.044 1.044 0 0 1 .98-1.12 1.044 1.044 0 0 1 1.12.98v.15a1.044 1.044 0 0 1-.98 1.12H5.9v-.01Zm4.2.447c-.577 0-1.05.472-1.05 1.05v.07a1.044 1.044 0 0 0 .98 1.12 1.045 1.045 0 0 0 1.12-.98V9.33a1.044 1.044 0 0 0-.98-1.12h-.07v.009Zm-.962-2.923L5.48 10.695h1.383l3.657-5.399H9.138Z"></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--stampcard"><path d="M13.941 10.039c-.043.061-.183.254-.218.332a3.248 3.248 0 0 0-.105.473c-.097.569-.22 1.338-.832 1.951-.603.604-1.4.735-1.925.822-.157.027-.393.062-.49.105-.07.027-.27.176-.376.245-.437.324-1.111.806-1.995.806-.884 0-1.549-.482-1.986-.806a4.093 4.093 0 0 0-.376-.253c-.088-.035-.315-.07-.473-.105-.542-.088-1.339-.219-1.942-.832-.604-.603-.735-1.373-.823-1.933-.035-.201-.061-.403-.105-.49-.026-.07-.166-.254-.245-.368-.324-.446-.814-1.12-.814-2.004 0-.883.482-1.548.805-1.986.07-.096.22-.306.254-.376.035-.096.079-.324.105-.481v-.062c.096-.524.245-1.294.831-1.88.587-.587 1.374-.736 1.934-.823.166-.026.394-.062.49-.105.07-.026.271-.175.376-.245.473-.341 1.112-.805 1.995-.805.884 0 1.55.481 1.987.805.122.087.306.227.376.253.087.035.315.08.481.105.569.097 1.339.22 1.943.832.603.612.735 1.374.822 1.933.026.158.061.394.105.49.026.07.166.254.245.368.35.481.814 1.12.814 2.004 0 .883-.481 1.548-.805 1.986l-.053.044ZM3.695 5.419a3.263 3.263 0 0 1-.175.726 3.414 3.414 0 0 1-.411.656c-.263.368-.543.753-.543 1.199 0 .446.28.831.552 1.207.157.22.315.438.402.648.096.227.14.49.184.77.079.455.149.919.455 1.216.306.298.779.385 1.207.455.28.044.552.088.78.184.2.088.393.219.655.402.368.272.753.543 1.2.543.445 0 .83-.28 1.207-.551.2-.149.428-.315.647-.403.236-.096.525-.149.788-.184.42-.07.9-.148 1.198-.446.307-.306.377-.761.455-1.207.044-.271.088-.552.184-.779.079-.201.219-.402.368-.604l.035-.052c.27-.377.55-.753.55-1.199 0-.446-.28-.831-.542-1.199-.157-.219-.315-.437-.402-.656-.096-.236-.149-.534-.184-.787-.07-.438-.149-.902-.446-1.2-.298-.306-.761-.376-1.208-.454-.27-.044-.55-.088-.787-.193-.21-.087-.438-.245-.648-.402-.376-.272-.76-.551-1.207-.551-.446 0-.831.28-1.199.55-.201.15-.429.316-.647.403-.237.096-.508.14-.78.184-.445.07-.91.149-1.207.455-.297.306-.376.779-.446 1.199V5.4l-.035.018Z"></path><path d="M5.9 7.772c-.577 0-1.05-.472-1.05-1.05v-.07a1.044 1.044 0 0 1 .98-1.12 1.044 1.044 0 0 1 1.12.98v.15a1.044 1.044 0 0 1-.98 1.12H5.9v-.01Zm4.2.447c-.577 0-1.05.472-1.05 1.05v.07a1.044 1.044 0 0 0 .98 1.12 1.045 1.045 0 0 0 1.12-.98V9.33a1.044 1.044 0 0 0-.98-1.12h-.07v.009Zm-.962-2.923L5.48 10.695h1.383l3.657-5.399H9.138Z"></path></svg>';
 
 export class IconStampcard extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStampcard extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--stampcard', '', null, 'IconStampcard');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--stampcard', '', null, 'IconStampcard');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--stampcard');
         this.root.append(svg);
     }

package/icons/IconStampcard10.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--stampcard10"><path d="M5.979 9.943v-3.93h-.595l-1.199.508.28.674.683-.245v2.993h.83Z"></path><path d="M6.976 7.983c0 1.015.569 2.038 1.785 2.038 1.217 0 1.785-1.023 1.785-2.038s-.568-2.04-1.785-2.04c-1.216 0-1.785 1.025-1.785 2.04Zm2.722 0c0 .735-.36 1.286-.937 1.286-.577 0-.936-.551-.936-1.286s.359-1.287.936-1.287c.578 0 .937.552.937 1.287Z"></path><path d="M12.533 7.204c0-.306-.193-.656-.613-.656a.562.562 0 0 0-.429.183.699.699 0 0 0 0 .945.562.562 0 0 0 .429.184c.42 0 .613-.35.613-.656Z"></path><path d="M14.554 8.166c-.062-.017-.114-.043-.184-.043-.42 0-.612.35-.612.656 0 .192.087.402.253.525.097.07.21.131.359.131.42 0 .613-.35.613-.656a.641.641 0 0 0-.43-.621v.008Z"></path><path d="M11.675 9.566h.805l1.741-2.563.394-.587h-.805l-.787 1.155-1.348 1.995Z"></path><path d="M11.841 11.841c-.297.298-.778.377-1.198.447-.254.043-.552.087-.788.183-.219.088-.446.254-.647.403-.377.271-.753.551-1.208.551-.455 0-.831-.28-1.199-.543-.253-.183-.446-.323-.656-.402-.227-.096-.507-.14-.779-.184-.42-.07-.901-.148-1.207-.455-.306-.306-.376-.761-.455-1.216-.044-.28-.088-.534-.184-.77-.087-.219-.245-.429-.402-.647-.272-.368-.552-.753-.552-1.208 0-.455.28-.831.543-1.199.175-.245.324-.446.411-.656.096-.219.14-.49.175-.726v-.053c.079-.42.158-.901.464-1.198.297-.298.761-.377 1.207-.455.272-.044.543-.088.779-.184a3.61 3.61 0 0 0 .648-.403c.367-.271.752-.551 1.198-.551.447 0 .832.28 1.208.551.21.149.429.315.647.403.236.096.508.14.788.192.446.07.901.149 1.207.455.272.272.359.674.429 1.077h1.365l-.018-.097c-.096-.56-.218-1.33-.822-1.933-.604-.604-1.374-.735-1.943-.832-.166-.026-.385-.061-.48-.105-.07-.026-.263-.166-.377-.253-.437-.315-1.102-.805-1.986-.805-.884 0-1.523.463-1.995.805-.105.078-.298.218-.376.245a3.07 3.07 0 0 1-.49.105c-.56.096-1.33.218-1.934.822-.586.586-.726 1.356-.814 1.881v.062c-.035.148-.07.385-.114.48-.035.07-.183.28-.253.377-.315.438-.805 1.103-.805 1.986 0 .884.48 1.558.813 2.004.079.114.21.298.245.368.035.087.07.288.105.49.097.56.219 1.32.823 1.933.604.604 1.409.744 1.942.832.167.026.385.06.473.104.07.036.271.176.376.254.438.324 1.103.805 1.986.805.884 0 1.558-.481 1.995-.805.105-.079.298-.219.377-.245.096-.043.332-.079.49-.105.524-.087 1.32-.218 1.925-.822.603-.595.734-1.348.822-1.917h-1.365c-.07.368-.157.718-.411.963l.017-.009Z"></path><path d="M5.979 9.943v-3.93h-.595l-1.199.508.28.674.683-.245v2.993h.83Z"></path><path d="M6.976 7.983c0 1.015.569 2.038 1.785 2.038 1.217 0 1.785-1.023 1.785-2.038s-.568-2.04-1.785-2.04c-1.216 0-1.785 1.025-1.785 2.04Zm2.722 0c0 .735-.36 1.286-.937 1.286-.577 0-.936-.551-.936-1.286s.359-1.287.936-1.287c.578 0 .937.552.937 1.287Z"></path><path d="M12.533 7.204c0-.306-.193-.656-.613-.656a.562.562 0 0 0-.429.183.699.699 0 0 0 0 .945.562.562 0 0 0 .429.184c.42 0 .613-.35.613-.656Z"></path><path d="M14.554 8.166c-.062-.017-.114-.043-.184-.043-.42 0-.612.35-.612.656 0 .192.087.402.253.525.097.07.21.131.359.131.42 0 .613-.35.613-.656a.641.641 0 0 0-.43-.621v.008Z"></path><path d="M11.675 9.566h.805l1.741-2.563.394-.587h-.805l-.787 1.155-1.348 1.995Z"></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--stampcard10"><path d="M5.979 9.943v-3.93h-.595l-1.199.508.28.674.683-.245v2.993h.83Z"></path><path d="M6.976 7.983c0 1.015.569 2.038 1.785 2.038 1.217 0 1.785-1.023 1.785-2.038s-.568-2.04-1.785-2.04c-1.216 0-1.785 1.025-1.785 2.04Zm2.722 0c0 .735-.36 1.286-.937 1.286-.577 0-.936-.551-.936-1.286s.359-1.287.936-1.287c.578 0 .937.552.937 1.287Z"></path><path d="M12.533 7.204c0-.306-.193-.656-.613-.656a.562.562 0 0 0-.429.183.699.699 0 0 0 0 .945.562.562 0 0 0 .429.184c.42 0 .613-.35.613-.656Z"></path><path d="M14.554 8.166c-.062-.017-.114-.043-.184-.043-.42 0-.612.35-.612.656 0 .192.087.402.253.525.097.07.21.131.359.131.42 0 .613-.35.613-.656a.641.641 0 0 0-.43-.621v.008Z"></path><path d="M11.675 9.566h.805l1.741-2.563.394-.587h-.805l-.787 1.155-1.348 1.995Z"></path><path d="M11.841 11.841c-.297.298-.778.377-1.198.447-.254.043-.552.087-.788.183-.219.088-.446.254-.647.403-.377.271-.753.551-1.208.551-.455 0-.831-.28-1.199-.543-.253-.183-.446-.323-.656-.402-.227-.096-.507-.14-.779-.184-.42-.07-.901-.148-1.207-.455-.306-.306-.376-.761-.455-1.216-.044-.28-.088-.534-.184-.77-.087-.219-.245-.429-.402-.647-.272-.368-.552-.753-.552-1.208 0-.455.28-.831.543-1.199.175-.245.324-.446.411-.656.096-.219.14-.49.175-.726v-.053c.079-.42.158-.901.464-1.198.297-.298.761-.377 1.207-.455.272-.044.543-.088.779-.184a3.61 3.61 0 0 0 .648-.403c.367-.271.752-.551 1.198-.551.447 0 .832.28 1.208.551.21.149.429.315.647.403.236.096.508.14.788.192.446.07.901.149 1.207.455.272.272.359.674.429 1.077h1.365l-.018-.097c-.096-.56-.218-1.33-.822-1.933-.604-.604-1.374-.735-1.943-.832-.166-.026-.385-.061-.48-.105-.07-.026-.263-.166-.377-.253-.437-.315-1.102-.805-1.986-.805-.884 0-1.523.463-1.995.805-.105.078-.298.218-.376.245a3.07 3.07 0 0 1-.49.105c-.56.096-1.33.218-1.934.822-.586.586-.726 1.356-.814 1.881v.062c-.035.148-.07.385-.114.48-.035.07-.183.28-.253.377-.315.438-.805 1.103-.805 1.986 0 .884.48 1.558.813 2.004.079.114.21.298.245.368.035.087.07.288.105.49.097.56.219 1.32.823 1.933.604.604 1.409.744 1.942.832.167.026.385.06.473.104.07.036.271.176.376.254.438.324 1.103.805 1.986.805.884 0 1.558-.481 1.995-.805.105-.079.298-.219.377-.245.096-.043.332-.079.49-.105.524-.087 1.32-.218 1.925-.822.603-.595.734-1.348.822-1.917h-1.365c-.07.368-.157.718-.411.963l.017-.009Z"></path><path d="M5.979 9.943v-3.93h-.595l-1.199.508.28.674.683-.245v2.993h.83Z"></path><path d="M6.976 7.983c0 1.015.569 2.038 1.785 2.038 1.217 0 1.785-1.023 1.785-2.038s-.568-2.04-1.785-2.04c-1.216 0-1.785 1.025-1.785 2.04Zm2.722 0c0 .735-.36 1.286-.937 1.286-.577 0-.936-.551-.936-1.286s.359-1.287.936-1.287c.578 0 .937.552.937 1.287Z"></path><path d="M12.533 7.204c0-.306-.193-.656-.613-.656a.562.562 0 0 0-.429.183.699.699 0 0 0 0 .945.562.562 0 0 0 .429.184c.42 0 .613-.35.613-.656Z"></path><path d="M14.554 8.166c-.062-.017-.114-.043-.184-.043-.42 0-.612.35-.612.656 0 .192.087.402.253.525.097.07.21.131.359.131.42 0 .613-.35.613-.656a.641.641 0 0 0-.43-.621v.008Z"></path><path d="M11.675 9.566h.805l1.741-2.563.394-.587h-.805l-.787 1.155-1.348 1.995Z"></path></svg>';
 
 export class IconStampcard10 extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStampcard10 extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--stampcard10', '', null, 'IconStampcard10');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--stampcard10', '', null, 'IconStampcard10');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--stampcard10');
         this.root.append(svg);
     }

package/icons/IconStampcard10Filled.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--stampcard10Filled"><path d="m3.844 5.716 1.199-.507a.915.915 0 0 1 .34-.07h.596c.455 0 .814.35.857.787.447-.516 1.085-.857 1.925-.857.945 0 1.645.437 2.091 1.067.28-.297.657-.455 1.068-.455.411 0 .779.158 1.05.429l.114-.175a.869.869 0 0 1 .551-.359v-.323l-.018-.097c-.096-.56-.218-1.33-.822-1.933-.604-.604-1.374-.735-1.943-.832-.166-.026-.385-.061-.48-.105-.07-.026-.263-.166-.377-.253-.437-.315-1.102-.805-1.986-.805-.884 0-1.523.463-1.995.805-.105.078-.298.218-.376.245a3.07 3.07 0 0 1-.49.105c-.56.096-1.33.218-1.934.822-.586.586-.726 1.356-.814 1.881v.062c-.035.148-.07.385-.114.48-.035.07-.183.28-.253.377-.315.438-.805 1.103-.805 1.986 0 .884.48 1.558.813 2.004.079.114.21.298.245.368.035.087.07.288.105.49.097.56.219 1.32.823 1.933.604.604 1.409.744 1.942.832.167.026.385.06.473.104.07.036.271.176.376.254.438.324 1.103.805 1.986.805.884 0 1.558-.481 1.995-.805.105-.079.298-.219.377-.245.096-.043.332-.079.49-.105.524-.087 1.32-.218 1.925-.822.603-.595.734-1.348.822-1.917v-.805c-.044-.026-.096-.043-.14-.078-.053-.035-.088-.088-.131-.131l-.132.192a.896.896 0 0 1-.726.385h-.805a.86.86 0 0 1-.77-.464c-.026-.043-.035-.096-.052-.148-.446.62-1.138 1.058-2.083 1.058-.84 0-1.478-.341-1.925-.857a.865.865 0 0 1-.857.787h-.831a.878.878 0 0 1-.875-.875V8.053a.85.85 0 0 1-.613-.517l-.28-.673a.945.945 0 0 1-.07-.333c0-.245.114-.472.298-.639.07-.061.148-.122.236-.166v-.009Z"></path><path d="M5.979 9.943v-3.93h-.595l-1.199.508.28.674.683-.245v2.993h.83Z"></path><path d="M6.976 7.983c0 1.015.569 2.038 1.785 2.038 1.217 0 1.785-1.023 1.785-2.038s-.568-2.04-1.785-2.04c-1.216 0-1.785 1.025-1.785 2.04Zm2.722 0c0 .735-.36 1.286-.937 1.286-.577 0-.936-.551-.936-1.286s.359-1.287.936-1.287c.578 0 .937.552.937 1.287Z"></path><path d="M12.533 7.204c0-.306-.193-.656-.613-.656a.562.562 0 0 0-.429.183.699.699 0 0 0 0 .945.562.562 0 0 0 .429.184c.42 0 .613-.35.613-.656Z"></path><path d="M14.554 8.166c-.062-.017-.114-.043-.184-.043-.42 0-.612.35-.612.656 0 .192.087.402.253.525.097.07.21.131.359.131.42 0 .613-.35.613-.656a.641.641 0 0 0-.43-.621v.008Z"></path><path d="M11.675 9.566h.805l1.741-2.563.394-.587h-.805l-.787 1.155-1.348 1.995Z"></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--stampcard10Filled"><path d="m3.844 5.716 1.199-.507a.915.915 0 0 1 .34-.07h.596c.455 0 .814.35.857.787.447-.516 1.085-.857 1.925-.857.945 0 1.645.437 2.091 1.067.28-.297.657-.455 1.068-.455.411 0 .779.158 1.05.429l.114-.175a.869.869 0 0 1 .551-.359v-.323l-.018-.097c-.096-.56-.218-1.33-.822-1.933-.604-.604-1.374-.735-1.943-.832-.166-.026-.385-.061-.48-.105-.07-.026-.263-.166-.377-.253-.437-.315-1.102-.805-1.986-.805-.884 0-1.523.463-1.995.805-.105.078-.298.218-.376.245a3.07 3.07 0 0 1-.49.105c-.56.096-1.33.218-1.934.822-.586.586-.726 1.356-.814 1.881v.062c-.035.148-.07.385-.114.48-.035.07-.183.28-.253.377-.315.438-.805 1.103-.805 1.986 0 .884.48 1.558.813 2.004.079.114.21.298.245.368.035.087.07.288.105.49.097.56.219 1.32.823 1.933.604.604 1.409.744 1.942.832.167.026.385.06.473.104.07.036.271.176.376.254.438.324 1.103.805 1.986.805.884 0 1.558-.481 1.995-.805.105-.079.298-.219.377-.245.096-.043.332-.079.49-.105.524-.087 1.32-.218 1.925-.822.603-.595.734-1.348.822-1.917v-.805c-.044-.026-.096-.043-.14-.078-.053-.035-.088-.088-.131-.131l-.132.192a.896.896 0 0 1-.726.385h-.805a.86.86 0 0 1-.77-.464c-.026-.043-.035-.096-.052-.148-.446.62-1.138 1.058-2.083 1.058-.84 0-1.478-.341-1.925-.857a.865.865 0 0 1-.857.787h-.831a.878.878 0 0 1-.875-.875V8.053a.85.85 0 0 1-.613-.517l-.28-.673a.945.945 0 0 1-.07-.333c0-.245.114-.472.298-.639.07-.061.148-.122.236-.166v-.009Z"></path><path d="M5.979 9.943v-3.93h-.595l-1.199.508.28.674.683-.245v2.993h.83Z"></path><path d="M6.976 7.983c0 1.015.569 2.038 1.785 2.038 1.217 0 1.785-1.023 1.785-2.038s-.568-2.04-1.785-2.04c-1.216 0-1.785 1.025-1.785 2.04Zm2.722 0c0 .735-.36 1.286-.937 1.286-.577 0-.936-.551-.936-1.286s.359-1.287.936-1.287c.578 0 .937.552.937 1.287Z"></path><path d="M12.533 7.204c0-.306-.193-.656-.613-.656a.562.562 0 0 0-.429.183.699.699 0 0 0 0 .945.562.562 0 0 0 .429.184c.42 0 .613-.35.613-.656Z"></path><path d="M14.554 8.166c-.062-.017-.114-.043-.184-.043-.42 0-.612.35-.612.656 0 .192.087.402.253.525.097.07.21.131.359.131.42 0 .613-.35.613-.656a.641.641 0 0 0-.43-.621v.008Z"></path><path d="M11.675 9.566h.805l1.741-2.563.394-.587h-.805l-.787 1.155-1.348 1.995Z"></path></svg>';
 
 export class IconStampcard10Filled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStampcard10Filled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--stampcard10Filled', '', null, 'IconStampcard10Filled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--stampcard10Filled', '', null, 'IconStampcard10Filled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--stampcard10Filled');
         this.root.append(svg);
     }

package/icons/IconStampcard10FilledLarge.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--stampcard10FilledLarge"><path d="m24.654 19.929-.271.376-.053.07a1.75 1.75 0 0 1-1.417.718H21.6c-.656 0-1.26-.368-1.557-.954a1.775 1.775 0 0 1-.158-1.076c-.849 1.33-2.275 2.16-3.981 2.16-1.269 0-2.371-.454-3.203-1.224a1.74 1.74 0 0 1-1.627 1.102H9.621c-.962 0-1.75-.787-1.75-1.75v-3.115a1.746 1.746 0 0 1-1.05-.989l-.48-1.163a1.757 1.757 0 0 1 .935-2.284l2.074-.884a1.83 1.83 0 0 1 .683-.14h1.041c.735 0 1.365.455 1.627 1.103.84-.779 1.943-1.225 3.203-1.225 1.26 0 2.389.463 3.229 1.251.63-.744 1.575-1.251 2.826-1.251.656 0 1.269.149 1.82.446a3.6 3.6 0 0 1 1.032.849l.324-.447a1.731 1.731 0 0 1 1.26-.7v-.148c-.017-.105-.043-.21-.061-.315a6.097 6.097 0 0 0-1.418-3.553l-.105-.105a6.027 6.027 0 0 0-3.5-1.417A6.494 6.494 0 0 1 20.157 5a5.295 5.295 0 0 1-.902-.569 6.159 6.159 0 0 0-3.587-1.54h-.14a6.1 6.1 0 0 0-3.553 1.514 5.47 5.47 0 0 1-.936.595 6.2 6.2 0 0 1-1.103.254 6.04 6.04 0 0 0-3.552 1.417l-.105.105a6.027 6.027 0 0 0-1.418 3.5c-.052.394-.14.78-.262 1.155a5.29 5.29 0 0 1-.569.902 6.16 6.16 0 0 0-1.54 3.587v.149a6.1 6.1 0 0 0 1.514 3.552c.227.29.429.604.595.937a6.2 6.2 0 0 1 .254 1.102 6.063 6.063 0 0 0 1.417 3.553l.105.105a6.026 6.026 0 0 0 3.5 1.417c.394.053.779.14 1.155.263.333.166.648.367.902.569a6.159 6.159 0 0 0 3.587 1.54h.149c1.321-.114 2.599-.657 3.552-1.514.289-.228.604-.429.937-.595.376-.123.76-.21 1.102-.254a6.063 6.063 0 0 0 3.552-1.418l.105-.105a6.028 6.028 0 0 0 1.418-3.5c.026-.21.061-.41.114-.62v-.027a3.492 3.492 0 0 1-1.803-1.146h.009Z"></path><path d="m28.802 15.982-.053-.052c-.306-.236-.717-.376-1.234-.376-.218 0-.411.035-.595.087-.945.254-1.391 1.103-1.391 1.882 0 .253.052.516.149.77.21.533.647.997 1.338 1.146.15.035.316.052.49.052.552 0 .972-.175 1.287-.428.472-.386.7-.98.7-1.532 0-.551-.228-1.146-.7-1.531l.009-.018ZM27.76 18.39c-.079.017-.157.044-.236.044-.49 0-.884-.36-.884-.928 0-.569.385-.927.884-.927.455 0 .805.314.857.805 0 .043.018.078.018.122 0 .473-.271.779-.639.875v.009Z"></path><path d="M11.083 19.351v-6.825H10.05l-2.082.884.481 1.164 1.19-.42v5.197h1.444Z"></path><path d="M15.913 12.404c-2.109 0-3.098 1.776-3.098 3.535 0 1.759.989 3.535 3.098 3.535 2.108 0 3.097-1.776 3.097-3.535 0-1.759-.989-3.535-3.097-3.535Zm0 5.775c-.998 0-1.619-.954-1.619-2.231 0-1.278.621-2.232 1.619-2.232.997 0 1.619.954 1.619 2.232 0 1.277-.622 2.23-1.62 2.23Z"></path><path d="M23.954 14.364c0-.657-.315-1.365-.989-1.724a2.025 2.025 0 0 0-.997-.236c-1.365 0-1.986 1.041-1.986 1.96 0 .918.62 1.96 1.986 1.96.393 0 .717-.097.997-.245.674-.359.989-1.068.989-1.724v.009Zm-1.986.927c-.49 0-.884-.359-.884-.927 0-.569.385-.928.884-.928.498 0 .884.359.884.928 0 .568-.386.927-.884.927Z"></path><path d="M22.965 17.479 21.61 19.35h1.313l.043-.07 3.378-4.637 1.085-1.496.455-.622H26.57l-.875 1.208-2.73 3.745Z"></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--stampcard10FilledLarge"><path d="m24.654 19.929-.271.376-.053.07a1.75 1.75 0 0 1-1.417.718H21.6c-.656 0-1.26-.368-1.557-.954a1.775 1.775 0 0 1-.158-1.076c-.849 1.33-2.275 2.16-3.981 2.16-1.269 0-2.371-.454-3.203-1.224a1.74 1.74 0 0 1-1.627 1.102H9.621c-.962 0-1.75-.787-1.75-1.75v-3.115a1.746 1.746 0 0 1-1.05-.989l-.48-1.163a1.757 1.757 0 0 1 .935-2.284l2.074-.884a1.83 1.83 0 0 1 .683-.14h1.041c.735 0 1.365.455 1.627 1.103.84-.779 1.943-1.225 3.203-1.225 1.26 0 2.389.463 3.229 1.251.63-.744 1.575-1.251 2.826-1.251.656 0 1.269.149 1.82.446a3.6 3.6 0 0 1 1.032.849l.324-.447a1.731 1.731 0 0 1 1.26-.7v-.148c-.017-.105-.043-.21-.061-.315a6.097 6.097 0 0 0-1.418-3.553l-.105-.105a6.027 6.027 0 0 0-3.5-1.417A6.494 6.494 0 0 1 20.157 5a5.295 5.295 0 0 1-.902-.569 6.159 6.159 0 0 0-3.587-1.54h-.14a6.1 6.1 0 0 0-3.553 1.514 5.47 5.47 0 0 1-.936.595 6.2 6.2 0 0 1-1.103.254 6.04 6.04 0 0 0-3.552 1.417l-.105.105a6.027 6.027 0 0 0-1.418 3.5c-.052.394-.14.78-.262 1.155a5.29 5.29 0 0 1-.569.902 6.16 6.16 0 0 0-1.54 3.587v.149a6.1 6.1 0 0 0 1.514 3.552c.227.29.429.604.595.937a6.2 6.2 0 0 1 .254 1.102 6.063 6.063 0 0 0 1.417 3.553l.105.105a6.026 6.026 0 0 0 3.5 1.417c.394.053.779.14 1.155.263.333.166.648.367.902.569a6.159 6.159 0 0 0 3.587 1.54h.149c1.321-.114 2.599-.657 3.552-1.514.289-.228.604-.429.937-.595.376-.123.76-.21 1.102-.254a6.063 6.063 0 0 0 3.552-1.418l.105-.105a6.028 6.028 0 0 0 1.418-3.5c.026-.21.061-.41.114-.62v-.027a3.492 3.492 0 0 1-1.803-1.146h.009Z"></path><path d="m28.802 15.982-.053-.052c-.306-.236-.717-.376-1.234-.376-.218 0-.411.035-.595.087-.945.254-1.391 1.103-1.391 1.882 0 .253.052.516.149.77.21.533.647.997 1.338 1.146.15.035.316.052.49.052.552 0 .972-.175 1.287-.428.472-.386.7-.98.7-1.532 0-.551-.228-1.146-.7-1.531l.009-.018ZM27.76 18.39c-.079.017-.157.044-.236.044-.49 0-.884-.36-.884-.928 0-.569.385-.927.884-.927.455 0 .805.314.857.805 0 .043.018.078.018.122 0 .473-.271.779-.639.875v.009Z"></path><path d="M11.083 19.351v-6.825H10.05l-2.082.884.481 1.164 1.19-.42v5.197h1.444Z"></path><path d="M15.913 12.404c-2.109 0-3.098 1.776-3.098 3.535 0 1.759.989 3.535 3.098 3.535 2.108 0 3.097-1.776 3.097-3.535 0-1.759-.989-3.535-3.097-3.535Zm0 5.775c-.998 0-1.619-.954-1.619-2.231 0-1.278.621-2.232 1.619-2.232.997 0 1.619.954 1.619 2.232 0 1.277-.622 2.23-1.62 2.23Z"></path><path d="M23.954 14.364c0-.657-.315-1.365-.989-1.724a2.025 2.025 0 0 0-.997-.236c-1.365 0-1.986 1.041-1.986 1.96 0 .918.62 1.96 1.986 1.96.393 0 .717-.097.997-.245.674-.359.989-1.068.989-1.724v.009Zm-1.986.927c-.49 0-.884-.359-.884-.927 0-.569.385-.928.884-.928.498 0 .884.359.884.928 0 .568-.386.927-.884.927Z"></path><path d="M22.965 17.479 21.61 19.35h1.313l.043-.07 3.378-4.637 1.085-1.496.455-.622H26.57l-.875 1.208-2.73 3.745Z"></path></svg>';
 
 export class IconStampcard10FilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStampcard10FilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--stampcard10FilledLarge', '', null, 'IconStampcard10FilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--stampcard10FilledLarge', '', null, 'IconStampcard10FilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--stampcard10FilledLarge');
         this.root.append(svg);
     }

package/icons/IconStampcard10Large.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--stampcard10Large"><path d="M24.61 21.556a4.41 4.41 0 0 1-.963 2.476 4.376 4.376 0 0 1-2.528.972 7.409 7.409 0 0 0-1.567.367l-.105.044a7.327 7.327 0 0 0-1.338.858 4.369 4.369 0 0 1-2.494 1.093 4.553 4.553 0 0 1-2.538-1.128 7.71 7.71 0 0 0-1.295-.823l-.105-.044a7.683 7.683 0 0 0-1.618-.367 4.413 4.413 0 0 1-2.477-.963 4.376 4.376 0 0 1-.97-2.529 7.394 7.394 0 0 0-.36-1.566l-.043-.105a7.328 7.328 0 0 0-.858-1.338 4.369 4.369 0 0 1-1.094-2.494 4.553 4.553 0 0 1 1.13-2.538c.314-.402.594-.84.822-1.303l.043-.105a7.683 7.683 0 0 0 .368-1.62c.061-.91.394-1.767.962-2.475a4.376 4.376 0 0 1 2.53-.972 7.412 7.412 0 0 0 1.565-.367l.097-.044a7.202 7.202 0 0 0 1.338-.857 4.37 4.37 0 0 1 2.494-1.094c.919.087 1.803.481 2.538 1.128.402.324.84.596 1.303.823l.097.044a7.683 7.683 0 0 0 1.618.367c.91.061 1.768.394 2.477.963.577.709.91 1.566.97 2.529 0 .052.018.104.027.148h1.768c-.018-.105-.044-.21-.053-.315a6.097 6.097 0 0 0-1.417-3.552l-.105-.105a6.027 6.027 0 0 0-3.5-1.418 6.494 6.494 0 0 1-1.155-.262 5.295 5.295 0 0 1-.902-.569 6.159 6.159 0 0 0-3.587-1.54h-.14a6.1 6.1 0 0 0-3.553 1.514 5.47 5.47 0 0 1-.936.595 6.2 6.2 0 0 1-1.102.253A6.04 6.04 0 0 0 6.4 6.655l-.105.105a6.027 6.027 0 0 0-1.417 3.5c-.053.394-.14.779-.263 1.155a5.295 5.295 0 0 1-.569.901 6.159 6.159 0 0 0-1.54 3.588v.148a6.1 6.1 0 0 0 1.514 3.553c.228.289.429.604.595.936.123.377.21.761.254 1.103a6.063 6.063 0 0 0 1.417 3.552l.105.105a6.027 6.027 0 0 0 3.5 1.418c.394.052.78.14 1.155.262.333.166.648.368.902.569a6.158 6.158 0 0 0 3.587 1.54h.149c1.321-.114 2.599-.656 3.552-1.514.29-.227.604-.428.937-.595.376-.122.76-.21 1.102-.254a6.062 6.062 0 0 0 3.553-1.417l.105-.105a6.027 6.027 0 0 0 1.417-3.5c.026-.21.061-.411.114-.621h-1.776c-.027.149-.062.297-.08.455v.017Z"></path><path d="m28.801 15.982-.052-.052c-.307-.236-.718-.376-1.234-.376-.219 0-.411.035-.595.087-.945.254-1.391 1.103-1.391 1.882 0 .253.052.516.148.77.21.533.648.997 1.34 1.146.148.035.314.052.49.052.55 0 .97-.175 1.285-.428.473-.386.7-.98.7-1.532 0-.551-.227-1.146-.7-1.531l.01-.018ZM27.76 18.39c-.079.017-.158.044-.236.044-.49 0-.884-.36-.884-.928 0-.569.385-.927.884-.927.455 0 .805.314.857.805 0 .043.018.078.018.122 0 .473-.272.779-.64.875v.009Z"></path><path d="M11.082 19.351v-6.825H10.05l-2.083.884.482 1.164 1.19-.42v5.197h1.443Z"></path><path d="M15.912 12.404c-2.108 0-3.097 1.776-3.097 3.535 0 1.759.989 3.535 3.097 3.535 2.11 0 3.098-1.776 3.098-3.535 0-1.759-.989-3.535-3.098-3.535Zm0 5.775c-.997 0-1.618-.954-1.618-2.231 0-1.278.62-2.232 1.618-2.232.998 0 1.62.954 1.62 2.232 0 1.277-.622 2.23-1.62 2.23Z"></path><path d="M23.954 14.364c0-.657-.315-1.365-.99-1.724a2.026 2.026 0 0 0-.997-.236c-1.365 0-1.986 1.041-1.986 1.96 0 .918.621 1.96 1.986 1.96.394 0 .718-.097.998-.245.674-.359.989-1.068.989-1.724v.009Zm-1.987.927c-.49 0-.883-.359-.883-.927 0-.569.385-.928.883-.928.5 0 .884.359.884.928 0 .568-.385.927-.884.927Z"></path><path d="m22.965 17.479-1.356 1.872h1.312l.044-.07 3.377-4.637 1.085-1.496.455-.622H26.57l-.875 1.208-2.73 3.745Z"></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--stampcard10Large"><path d="M24.61 21.556a4.41 4.41 0 0 1-.963 2.476 4.376 4.376 0 0 1-2.528.972 7.409 7.409 0 0 0-1.567.367l-.105.044a7.327 7.327 0 0 0-1.338.858 4.369 4.369 0 0 1-2.494 1.093 4.553 4.553 0 0 1-2.538-1.128 7.71 7.71 0 0 0-1.295-.823l-.105-.044a7.683 7.683 0 0 0-1.618-.367 4.413 4.413 0 0 1-2.477-.963 4.376 4.376 0 0 1-.97-2.529 7.394 7.394 0 0 0-.36-1.566l-.043-.105a7.328 7.328 0 0 0-.858-1.338 4.369 4.369 0 0 1-1.094-2.494 4.553 4.553 0 0 1 1.13-2.538c.314-.402.594-.84.822-1.303l.043-.105a7.683 7.683 0 0 0 .368-1.62c.061-.91.394-1.767.962-2.475a4.376 4.376 0 0 1 2.53-.972 7.412 7.412 0 0 0 1.565-.367l.097-.044a7.202 7.202 0 0 0 1.338-.857 4.37 4.37 0 0 1 2.494-1.094c.919.087 1.803.481 2.538 1.128.402.324.84.596 1.303.823l.097.044a7.683 7.683 0 0 0 1.618.367c.91.061 1.768.394 2.477.963.577.709.91 1.566.97 2.529 0 .052.018.104.027.148h1.768c-.018-.105-.044-.21-.053-.315a6.097 6.097 0 0 0-1.417-3.552l-.105-.105a6.027 6.027 0 0 0-3.5-1.418 6.494 6.494 0 0 1-1.155-.262 5.295 5.295 0 0 1-.902-.569 6.159 6.159 0 0 0-3.587-1.54h-.14a6.1 6.1 0 0 0-3.553 1.514 5.47 5.47 0 0 1-.936.595 6.2 6.2 0 0 1-1.102.253A6.04 6.04 0 0 0 6.4 6.655l-.105.105a6.027 6.027 0 0 0-1.417 3.5c-.053.394-.14.779-.263 1.155a5.295 5.295 0 0 1-.569.901 6.159 6.159 0 0 0-1.54 3.588v.148a6.1 6.1 0 0 0 1.514 3.553c.228.289.429.604.595.936.123.377.21.761.254 1.103a6.063 6.063 0 0 0 1.417 3.552l.105.105a6.027 6.027 0 0 0 3.5 1.418c.394.052.78.14 1.155.262.333.166.648.368.902.569a6.158 6.158 0 0 0 3.587 1.54h.149c1.321-.114 2.599-.656 3.552-1.514.29-.227.604-.428.937-.595.376-.122.76-.21 1.102-.254a6.062 6.062 0 0 0 3.553-1.417l.105-.105a6.027 6.027 0 0 0 1.417-3.5c.026-.21.061-.411.114-.621h-1.776c-.027.149-.062.297-.08.455v.017Z"></path><path d="m28.801 15.982-.052-.052c-.307-.236-.718-.376-1.234-.376-.219 0-.411.035-.595.087-.945.254-1.391 1.103-1.391 1.882 0 .253.052.516.148.77.21.533.648.997 1.34 1.146.148.035.314.052.49.052.55 0 .97-.175 1.285-.428.473-.386.7-.98.7-1.532 0-.551-.227-1.146-.7-1.531l.01-.018ZM27.76 18.39c-.079.017-.158.044-.236.044-.49 0-.884-.36-.884-.928 0-.569.385-.927.884-.927.455 0 .805.314.857.805 0 .043.018.078.018.122 0 .473-.272.779-.64.875v.009Z"></path><path d="M11.082 19.351v-6.825H10.05l-2.083.884.482 1.164 1.19-.42v5.197h1.443Z"></path><path d="M15.912 12.404c-2.108 0-3.097 1.776-3.097 3.535 0 1.759.989 3.535 3.097 3.535 2.11 0 3.098-1.776 3.098-3.535 0-1.759-.989-3.535-3.098-3.535Zm0 5.775c-.997 0-1.618-.954-1.618-2.231 0-1.278.62-2.232 1.618-2.232.998 0 1.62.954 1.62 2.232 0 1.277-.622 2.23-1.62 2.23Z"></path><path d="M23.954 14.364c0-.657-.315-1.365-.99-1.724a2.026 2.026 0 0 0-.997-.236c-1.365 0-1.986 1.041-1.986 1.96 0 .918.621 1.96 1.986 1.96.394 0 .718-.097.998-.245.674-.359.989-1.068.989-1.724v.009Zm-1.987.927c-.49 0-.883-.359-.883-.927 0-.569.385-.928.883-.928.5 0 .884.359.884.928 0 .568-.385.927-.884.927Z"></path><path d="m22.965 17.479-1.356 1.872h1.312l.044-.07 3.377-4.637 1.085-1.496.455-.622H26.57l-.875 1.208-2.73 3.745Z"></path></svg>';
 
 export class IconStampcard10Large extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStampcard10Large extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--stampcard10Large', '', null, 'IconStampcard10Large');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--stampcard10Large', '', null, 'IconStampcard10Large');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--stampcard10Large');
         this.root.append(svg);
     }

package/icons/IconStampcardFilled.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--stampcardFilled"><path d="M13.967 5.996c-.078-.114-.218-.297-.245-.367a3.897 3.897 0 0 1-.104-.49c-.097-.56-.22-1.33-.823-1.934-.604-.604-1.374-.735-1.943-.831-.166-.027-.385-.062-.48-.105-.07-.027-.263-.167-.377-.254-.437-.315-1.102-.805-1.986-.805-.884 0-1.523.464-1.995.805-.105.079-.298.219-.376.245a3.07 3.07 0 0 1-.49.105c-.56.096-1.33.219-1.934.822-.586.587-.726 1.357-.814 1.882v.061c-.035.149-.07.385-.114.481-.035.07-.183.28-.253.376-.315.438-.805 1.103-.805 1.987 0 .883.48 1.557.813 2.003.079.114.21.298.245.368.035.087.07.289.105.49.097.56.219 1.321.823 1.934.604.604 1.409.743 1.942.831.167.026.385.061.473.105.07.035.271.175.376.254.438.324 1.103.805 1.986.805.884 0 1.558-.481 1.995-.805.105-.079.298-.219.377-.245.096-.044.332-.079.49-.105.524-.088 1.32-.219 1.925-.823.612-.604.734-1.373.83-1.951.027-.166.062-.385.106-.473.026-.07.166-.262.218-.332l.035-.053c.324-.437.806-1.102.806-1.986 0-.884-.464-1.522-.814-2.004l.008.01Zm-9.117.726v-.07a1.044 1.044 0 0 1 .98-1.12 1.044 1.044 0 0 1 1.12.98v.15a1.044 1.044 0 0 1-.98 1.12H5.9c-.577 0-1.05-.473-1.05-1.05v-.01Zm2.013 3.973H5.48l3.658-5.399h1.382l-3.657 5.399Zm4.287-1.208a1.061 1.061 0 0 1-1.12.98 1.061 1.061 0 0 1-.98-1.12v-.07c0-.577.473-1.05 1.05-1.05h.07c.578.044 1.015.543.98 1.12v.15-.01Z"></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--stampcardFilled"><path d="M13.967 5.996c-.078-.114-.218-.297-.245-.367a3.897 3.897 0 0 1-.104-.49c-.097-.56-.22-1.33-.823-1.934-.604-.604-1.374-.735-1.943-.831-.166-.027-.385-.062-.48-.105-.07-.027-.263-.167-.377-.254-.437-.315-1.102-.805-1.986-.805-.884 0-1.523.464-1.995.805-.105.079-.298.219-.376.245a3.07 3.07 0 0 1-.49.105c-.56.096-1.33.219-1.934.822-.586.587-.726 1.357-.814 1.882v.061c-.035.149-.07.385-.114.481-.035.07-.183.28-.253.376-.315.438-.805 1.103-.805 1.987 0 .883.48 1.557.813 2.003.079.114.21.298.245.368.035.087.07.289.105.49.097.56.219 1.321.823 1.934.604.604 1.409.743 1.942.831.167.026.385.061.473.105.07.035.271.175.376.254.438.324 1.103.805 1.986.805.884 0 1.558-.481 1.995-.805.105-.079.298-.219.377-.245.096-.044.332-.079.49-.105.524-.088 1.32-.219 1.925-.823.612-.604.734-1.373.83-1.951.027-.166.062-.385.106-.473.026-.07.166-.262.218-.332l.035-.053c.324-.437.806-1.102.806-1.986 0-.884-.464-1.522-.814-2.004l.008.01Zm-9.117.726v-.07a1.044 1.044 0 0 1 .98-1.12 1.044 1.044 0 0 1 1.12.98v.15a1.044 1.044 0 0 1-.98 1.12H5.9c-.577 0-1.05-.473-1.05-1.05v-.01Zm2.013 3.973H5.48l3.658-5.399h1.382l-3.657 5.399Zm4.287-1.208a1.061 1.061 0 0 1-1.12.98 1.061 1.061 0 0 1-.98-1.12v-.07c0-.577.473-1.05 1.05-1.05h.07c.578.044 1.015.543.98 1.12v.15-.01Z"></path></svg>';
 
 export class IconStampcardFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStampcardFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--stampcardFilled', '', null, 'IconStampcardFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--stampcardFilled', '', null, 'IconStampcardFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--stampcardFilled');
         this.root.append(svg);
     }

package/icons/IconStampcardFilledLarge.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--stampcardFilledLarge"><path d="M20.331 17.4c-1.006 0-1.085.936-1.085 1.225 0 .289.08 1.225 1.085 1.225 1.007 0 1.085-.936 1.085-1.225 0-.289-.078-1.225-1.085-1.225Z"></path><path d="M29.108 15.93a6.168 6.168 0 0 0-1.523-3.57 5.63 5.63 0 0 1-.586-.919 6.201 6.201 0 0 1-.254-1.102 6.062 6.062 0 0 0-1.417-3.553l-.105-.105a6.027 6.027 0 0 0-3.5-1.417A6.498 6.498 0 0 1 20.568 5a5.29 5.29 0 0 1-.902-.569 6.16 6.16 0 0 0-3.587-1.54h-.14a6.1 6.1 0 0 0-3.553 1.514 5.474 5.474 0 0 1-.936.595c-.376.123-.761.21-1.102.254a6.063 6.063 0 0 0-3.553 1.417l-.105.105a6.027 6.027 0 0 0-1.417 3.5c-.053.394-.14.788-.263 1.155a5.661 5.661 0 0 1-.569.902 6.16 6.16 0 0 0-1.54 3.587v.149a6.1 6.1 0 0 0 1.514 3.552c.228.29.429.604.595.937.123.376.219.761.254 1.102a6.097 6.097 0 0 0 1.417 3.553l.105.105a6.026 6.026 0 0 0 3.5 1.417c.394.053.78.14 1.155.263.333.166.648.367.893.569a6.159 6.159 0 0 0 3.587 1.54h.15c1.32-.114 2.598-.657 3.552-1.514.288-.228.603-.429.936-.595.376-.123.761-.21 1.102-.254a6.04 6.04 0 0 0 3.553-1.418l.105-.105a6.028 6.028 0 0 0 1.417-3.5c.053-.393.14-.778.263-1.155.166-.332.367-.647.569-.9a6.158 6.158 0 0 0 1.54-3.588v-.149ZM8.746 13.375c0-1.435.884-2.975 2.835-2.975 1.952 0 2.835 1.54 2.835 2.975s-.883 2.975-2.835 2.975c-1.95 0-2.835-1.54-2.835-2.975Zm4.7 7.875h-2.127l7.262-10.5h2.127l-7.263 10.5Zm6.894.35c-1.951 0-2.835-1.54-2.835-2.975s.884-2.975 2.835-2.975 2.835 1.54 2.835 2.975-.884 2.975-2.835 2.975Z"></path><path d="M12.666 13.375c0-.289-.078-1.225-1.085-1.225-1.006 0-1.085.936-1.085 1.225 0 .289.08 1.225 1.085 1.225 1.007 0 1.085-.936 1.085-1.225Z"></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--stampcardFilledLarge"><path d="M20.331 17.4c-1.006 0-1.085.936-1.085 1.225 0 .289.08 1.225 1.085 1.225 1.007 0 1.085-.936 1.085-1.225 0-.289-.078-1.225-1.085-1.225Z"></path><path d="M29.108 15.93a6.168 6.168 0 0 0-1.523-3.57 5.63 5.63 0 0 1-.586-.919 6.201 6.201 0 0 1-.254-1.102 6.062 6.062 0 0 0-1.417-3.553l-.105-.105a6.027 6.027 0 0 0-3.5-1.417A6.498 6.498 0 0 1 20.568 5a5.29 5.29 0 0 1-.902-.569 6.16 6.16 0 0 0-3.587-1.54h-.14a6.1 6.1 0 0 0-3.553 1.514 5.474 5.474 0 0 1-.936.595c-.376.123-.761.21-1.102.254a6.063 6.063 0 0 0-3.553 1.417l-.105.105a6.027 6.027 0 0 0-1.417 3.5c-.053.394-.14.788-.263 1.155a5.661 5.661 0 0 1-.569.902 6.16 6.16 0 0 0-1.54 3.587v.149a6.1 6.1 0 0 0 1.514 3.552c.228.29.429.604.595.937.123.376.219.761.254 1.102a6.097 6.097 0 0 0 1.417 3.553l.105.105a6.026 6.026 0 0 0 3.5 1.417c.394.053.78.14 1.155.263.333.166.648.367.893.569a6.159 6.159 0 0 0 3.587 1.54h.15c1.32-.114 2.598-.657 3.552-1.514.288-.228.603-.429.936-.595.376-.123.761-.21 1.102-.254a6.04 6.04 0 0 0 3.553-1.418l.105-.105a6.028 6.028 0 0 0 1.417-3.5c.053-.393.14-.778.263-1.155.166-.332.367-.647.569-.9a6.158 6.158 0 0 0 1.54-3.588v-.149ZM8.746 13.375c0-1.435.884-2.975 2.835-2.975 1.952 0 2.835 1.54 2.835 2.975s-.883 2.975-2.835 2.975c-1.95 0-2.835-1.54-2.835-2.975Zm4.7 7.875h-2.127l7.262-10.5h2.127l-7.263 10.5Zm6.894.35c-1.951 0-2.835-1.54-2.835-2.975s.884-2.975 2.835-2.975 2.835 1.54 2.835 2.975-.884 2.975-2.835 2.975Z"></path><path d="M12.666 13.375c0-.289-.078-1.225-1.085-1.225-1.006 0-1.085.936-1.085 1.225 0 .289.08 1.225 1.085 1.225 1.007 0 1.085-.936 1.085-1.225Z"></path></svg>';
 
 export class IconStampcardFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStampcardFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--stampcardFilledLarge', '', null, 'IconStampcardFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--stampcardFilledLarge', '', null, 'IconStampcardFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--stampcardFilledLarge');
         this.root.append(svg);
     }

package/icons/IconStampcardLarge.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--stampcardLarge"><path d="M14.416 13.375c0-1.435-.883-2.975-2.835-2.975-1.95 0-2.835 1.54-2.835 2.975s.884 2.975 2.835 2.975c1.952 0 2.835-1.54 2.835-2.975Zm-3.92 0c0-.289.08-1.225 1.085-1.225 1.007 0 1.085.936 1.085 1.225 0 .289-.078 1.225-1.085 1.225-1.006 0-1.085-.936-1.085-1.225Z"></path><path d="M20.331 15.65c-1.95 0-2.835 1.54-2.835 2.975s.884 2.975 2.835 2.975c1.952 0 2.835-1.54 2.835-2.975s-.883-2.975-2.835-2.975Zm0 4.2c-1.006 0-1.085-.936-1.085-1.225 0-.289.08-1.225 1.085-1.225 1.007 0 1.085.936 1.085 1.225 0 .289-.078 1.225-1.085 1.225Z"></path><path d="m18.573 10.75-7.263 10.5h2.126l7.263-10.5h-2.126Z"></path><path d="M29.108 15.93a6.168 6.168 0 0 0-1.523-3.57 5.63 5.63 0 0 1-.586-.919 6.201 6.201 0 0 1-.254-1.102 6.062 6.062 0 0 0-1.417-3.553l-.105-.105a6.027 6.027 0 0 0-3.5-1.417A6.498 6.498 0 0 1 20.568 5a5.29 5.29 0 0 1-.902-.569 6.16 6.16 0 0 0-3.587-1.54h-.14a6.1 6.1 0 0 0-3.553 1.514 5.474 5.474 0 0 1-.936.595c-.376.123-.761.21-1.102.254a6.063 6.063 0 0 0-3.553 1.417l-.105.105a6.027 6.027 0 0 0-1.417 3.5c-.053.394-.14.788-.263 1.155a5.661 5.661 0 0 1-.569.902 6.16 6.16 0 0 0-1.54 3.587v.149a6.1 6.1 0 0 0 1.514 3.552c.228.29.429.604.595.937.123.376.219.761.254 1.102a6.097 6.097 0 0 0 1.417 3.553l.105.105a6.026 6.026 0 0 0 3.5 1.417c.394.053.78.14 1.155.263.333.166.648.367.893.569a6.159 6.159 0 0 0 3.587 1.54h.15c1.32-.114 2.598-.657 3.552-1.514.288-.228.603-.429.936-.595.376-.123.761-.21 1.102-.254a6.04 6.04 0 0 0 3.553-1.418l.105-.105a6.028 6.028 0 0 0 1.417-3.5c.053-.393.14-.778.263-1.155.166-.332.367-.647.569-.9a6.158 6.158 0 0 0 1.54-3.588v-.149Zm-9.275-9.336.096.043a7.683 7.683 0 0 0 1.619.368c.91.061 1.767.394 2.476.962.577.71.91 1.567.971 2.53.061.533.184 1.058.359 1.566l.044.104c.227.464.507.902.822 1.296l.035.035a4.369 4.369 0 0 1 1.094 2.493 4.553 4.553 0 0 1-1.129 2.538c-.315.402-.595.84-.822 1.303l-.044.105a7.683 7.683 0 0 0-.368 1.62 4.413 4.413 0 0 1-.962 2.476 4.376 4.376 0 0 1-2.529.97 7.416 7.416 0 0 0-1.566.368l-.105.044a7.325 7.325 0 0 0-1.339.858 4.37 4.37 0 0 1-2.494 1.093 4.526 4.526 0 0 1-2.537-1.128 6.96 6.96 0 0 0-1.304-.823l-.096-.044a7.683 7.683 0 0 0-1.619-.367 4.411 4.411 0 0 1-2.476-.963 4.376 4.376 0 0 1-.971-2.529 7.412 7.412 0 0 0-.368-1.566l-.044-.096a7.2 7.2 0 0 0-.857-1.339 4.369 4.369 0 0 1-1.094-2.494 4.526 4.526 0 0 1 1.129-2.537c.324-.402.595-.84.822-1.304l.044-.096a7.683 7.683 0 0 0 .368-1.619c.06-.91.393-1.767.962-2.476a4.376 4.376 0 0 1 2.529-.971 7.412 7.412 0 0 0 1.566-.368l.105-.044a7.328 7.328 0 0 0 1.339-.857 4.369 4.369 0 0 1 2.494-1.094"></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--stampcardLarge"><path d="M14.416 13.375c0-1.435-.883-2.975-2.835-2.975-1.95 0-2.835 1.54-2.835 2.975s.884 2.975 2.835 2.975c1.952 0 2.835-1.54 2.835-2.975Zm-3.92 0c0-.289.08-1.225 1.085-1.225 1.007 0 1.085.936 1.085 1.225 0 .289-.078 1.225-1.085 1.225-1.006 0-1.085-.936-1.085-1.225Z"></path><path d="M20.331 15.65c-1.95 0-2.835 1.54-2.835 2.975s.884 2.975 2.835 2.975c1.952 0 2.835-1.54 2.835-2.975s-.883-2.975-2.835-2.975Zm0 4.2c-1.006 0-1.085-.936-1.085-1.225 0-.289.08-1.225 1.085-1.225 1.007 0 1.085.936 1.085 1.225 0 .289-.078 1.225-1.085 1.225Z"></path><path d="m18.573 10.75-7.263 10.5h2.126l7.263-10.5h-2.126Z"></path><path d="M29.108 15.93a6.168 6.168 0 0 0-1.523-3.57 5.63 5.63 0 0 1-.586-.919 6.201 6.201 0 0 1-.254-1.102 6.062 6.062 0 0 0-1.417-3.553l-.105-.105a6.027 6.027 0 0 0-3.5-1.417A6.498 6.498 0 0 1 20.568 5a5.29 5.29 0 0 1-.902-.569 6.16 6.16 0 0 0-3.587-1.54h-.14a6.1 6.1 0 0 0-3.553 1.514 5.474 5.474 0 0 1-.936.595c-.376.123-.761.21-1.102.254a6.063 6.063 0 0 0-3.553 1.417l-.105.105a6.027 6.027 0 0 0-1.417 3.5c-.053.394-.14.788-.263 1.155a5.661 5.661 0 0 1-.569.902 6.16 6.16 0 0 0-1.54 3.587v.149a6.1 6.1 0 0 0 1.514 3.552c.228.29.429.604.595.937.123.376.219.761.254 1.102a6.097 6.097 0 0 0 1.417 3.553l.105.105a6.026 6.026 0 0 0 3.5 1.417c.394.053.78.14 1.155.263.333.166.648.367.893.569a6.159 6.159 0 0 0 3.587 1.54h.15c1.32-.114 2.598-.657 3.552-1.514.288-.228.603-.429.936-.595.376-.123.761-.21 1.102-.254a6.04 6.04 0 0 0 3.553-1.418l.105-.105a6.028 6.028 0 0 0 1.417-3.5c.053-.393.14-.778.263-1.155.166-.332.367-.647.569-.9a6.158 6.158 0 0 0 1.54-3.588v-.149Zm-9.275-9.336.096.043a7.683 7.683 0 0 0 1.619.368c.91.061 1.767.394 2.476.962.577.71.91 1.567.971 2.53.061.533.184 1.058.359 1.566l.044.104c.227.464.507.902.822 1.296l.035.035a4.369 4.369 0 0 1 1.094 2.493 4.553 4.553 0 0 1-1.129 2.538c-.315.402-.595.84-.822 1.303l-.044.105a7.683 7.683 0 0 0-.368 1.62 4.413 4.413 0 0 1-.962 2.476 4.376 4.376 0 0 1-2.529.97 7.416 7.416 0 0 0-1.566.368l-.105.044a7.325 7.325 0 0 0-1.339.858 4.37 4.37 0 0 1-2.494 1.093 4.526 4.526 0 0 1-2.537-1.128 6.96 6.96 0 0 0-1.304-.823l-.096-.044a7.683 7.683 0 0 0-1.619-.367 4.411 4.411 0 0 1-2.476-.963 4.376 4.376 0 0 1-.971-2.529 7.412 7.412 0 0 0-.368-1.566l-.044-.096a7.2 7.2 0 0 0-.857-1.339 4.369 4.369 0 0 1-1.094-2.494 4.526 4.526 0 0 1 1.129-2.537c.324-.402.595-.84.822-1.304l.044-.096a7.683 7.683 0 0 0 .368-1.619c.06-.91.393-1.767.962-2.476a4.376 4.376 0 0 1 2.529-.971 7.412 7.412 0 0 0 1.566-.368l.105-.044a7.328 7.328 0 0 0 1.339-.857 4.369 4.369 0 0 1 2.494-1.094"></path></svg>';
 
 export class IconStampcardLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStampcardLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--stampcardLarge', '', null, 'IconStampcardLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--stampcardLarge', '', null, 'IconStampcardLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--stampcardLarge');
         this.root.append(svg);
     }

package/icons/IconStar.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--star"><path d="m12.288 14.449-4.183-2.197a.219.219 0 0 0-.21 0L3.713 14.45 4.5 9.794a.254.254 0 0 0 0-.193L1.07 6.302l4.673-.682a.228.228 0 0 0 .166-.114L8 1.271l2.091 4.235a.227.227 0 0 0 .167.114l4.672.682-3.386 3.3a.254.254 0 0 0-.061.192l.805 4.655Zm-8.4-7.228 1.487 1.435a1.54 1.54 0 0 1 .438 1.356l-.35 2.04 1.828-.963a1.505 1.505 0 0 1 1.418 0l1.829.962-.35-2.039a1.539 1.539 0 0 1 .437-1.356l1.488-1.435-2.048-.297a1.531 1.531 0 0 1-1.19-.84L8 4.229l-.875 1.855a1.531 1.531 0 0 1-1.155.875l-2.082.262Z"></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--star"><path d="m12.288 14.449-4.183-2.197a.219.219 0 0 0-.21 0L3.713 14.45 4.5 9.794a.254.254 0 0 0 0-.193L1.07 6.302l4.673-.682a.228.228 0 0 0 .166-.114L8 1.271l2.091 4.235a.227.227 0 0 0 .167.114l4.672.682-3.386 3.3a.254.254 0 0 0-.061.192l.805 4.655Zm-8.4-7.228 1.487 1.435a1.54 1.54 0 0 1 .438 1.356l-.35 2.04 1.828-.963a1.505 1.505 0 0 1 1.418 0l1.829.962-.35-2.039a1.539 1.539 0 0 1 .437-1.356l1.488-1.435-2.048-.297a1.531 1.531 0 0 1-1.19-.84L8 4.229l-.875 1.855a1.531 1.531 0 0 1-1.155.875l-2.082.262Z"></path></svg>';
 
 export class IconStar extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStar extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--star', '', null, 'IconStar');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--star', '', null, 'IconStar');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--star');
         this.root.append(svg);
     }

package/icons/IconStarCircle.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--starCircle"><path fill-rule="evenodd" d="M1.219 8c0-3.736 3.045-6.781 6.781-6.781A6.787 6.787 0 0 1 14.781 8c0 3.736-3.045 6.781-6.781 6.781-3.736 0-6.781-3.045-6.781-6.781ZM2.53 8A5.47 5.47 0 0 0 8 13.469 5.47 5.47 0 0 0 13.469 8 5.476 5.476 0 0 0 8 2.531 5.476 5.476 0 0 0 2.531 8ZM8 5.322l.814 1.654 1.82.263L9.32 8.525l.306 1.811L8 9.48l-1.628.857.316-1.811-1.322-1.286 1.82-.263L8 5.322Z" 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--starCircle"><path fill-rule="evenodd" d="M1.219 8c0-3.736 3.045-6.781 6.781-6.781A6.787 6.787 0 0 1 14.781 8c0 3.736-3.045 6.781-6.781 6.781-3.736 0-6.781-3.045-6.781-6.781ZM2.53 8A5.47 5.47 0 0 0 8 13.469 5.47 5.47 0 0 0 13.469 8 5.476 5.476 0 0 0 8 2.531 5.476 5.476 0 0 0 2.531 8ZM8 5.322l.814 1.654 1.82.263L9.32 8.525l.306 1.811L8 9.48l-1.628.857.316-1.811-1.322-1.286 1.82-.263L8 5.322Z" clip-rule="evenodd"></path></svg>';
 
 export class IconStarCircle extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStarCircle extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--starCircle', '', null, 'IconStarCircle');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--starCircle', '', null, 'IconStarCircle');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--starCircle');
         this.root.append(svg);
     }

package/icons/IconStarCircleFilled.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--starCircleFilled"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm1.627 9.117L8 9.48l-1.628.875.307-1.829-1.304-1.286 1.82-.263L8 5.322l.814 1.654 1.82.263L9.32 8.525l.306 1.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--starCircleFilled"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm1.627 9.117L8 9.48l-1.628.875.307-1.829-1.304-1.286 1.82-.263L8 5.322l.814 1.654 1.82.263L9.32 8.525l.306 1.811Z"></path></svg>';
 
 export class IconStarCircleFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStarCircleFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--starCircleFilled', '', null, 'IconStarCircleFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--starCircleFilled', '', null, 'IconStarCircleFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--starCircleFilled');
         this.root.append(svg);
     }

package/icons/IconStarCircleFilledLarge.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--starCircleFilledLarge"><path d="m17.829 16.866.656-.639 1.164-1.128-1.602-.236-.91-.132-.41-.822-.718-1.453-.718 1.453-.411.822-.91.132-1.601.236 1.163 1.128.657.64-.158.91-.271 1.6 1.435-.752.814-.429.813.429 1.435.753-.27-1.602-.158-.91Z"></path><path fill-rule="evenodd" d="M16 3.75C9.245 3.75 3.75 9.245 3.75 16S9.245 28.25 16 28.25 28.25 22.755 28.25 16 22.755 3.75 16 3.75Zm2.292 9.38 3.36.49h-.017a.873.873 0 0 1 .49 1.488l-2.433 2.37.578 3.343a.877.877 0 0 1-1.278.919l-3-1.575-3.002 1.575a.871.871 0 0 1-.928-.061.884.884 0 0 1-.35-.858l.578-3.342-2.433-2.371a.873.873 0 0 1 .49-1.488l3.36-.49 1.505-3.045c.15-.297.464-.446.788-.446s.639.149.787.446l1.505 3.045Z" 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--starCircleFilledLarge"><path d="m17.829 16.866.656-.639 1.164-1.128-1.602-.236-.91-.132-.41-.822-.718-1.453-.718 1.453-.411.822-.91.132-1.601.236 1.163 1.128.657.64-.158.91-.271 1.6 1.435-.752.814-.429.813.429 1.435.753-.27-1.602-.158-.91Z"></path><path fill-rule="evenodd" d="M16 3.75C9.245 3.75 3.75 9.245 3.75 16S9.245 28.25 16 28.25 28.25 22.755 28.25 16 22.755 3.75 16 3.75Zm2.292 9.38 3.36.49h-.017a.873.873 0 0 1 .49 1.488l-2.433 2.37.578 3.343a.877.877 0 0 1-1.278.919l-3-1.575-3.002 1.575a.871.871 0 0 1-.928-.061.884.884 0 0 1-.35-.858l.578-3.342-2.433-2.371a.873.873 0 0 1 .49-1.488l3.36-.49 1.505-3.045c.15-.297.464-.446.788-.446s.639.149.787.446l1.505 3.045Z" clip-rule="evenodd"></path></svg>';
 
 export class IconStarCircleFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStarCircleFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--starCircleFilledLarge', '', null, 'IconStarCircleFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--starCircleFilledLarge', '', null, 'IconStarCircleFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--starCircleFilledLarge');
         this.root.append(svg);
     }

package/icons/IconStarCircleLarge.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--starCircleLarge"><path d="M16 3.75C9.245 3.75 3.75 9.245 3.75 16S9.245 28.25 16 28.25 28.25 22.755 28.25 16 22.755 3.75 16 3.75Zm0 22.75c-5.793 0-10.5-4.707-10.5-10.5S10.216 5.5 16 5.5 26.5 10.207 26.5 16 21.793 26.5 16 26.5Z"></path><path d="m21.652 13.62-3.36-.49-1.505-3.045c-.148-.298-.463-.446-.787-.446s-.639.149-.787.446l-1.505 3.045-3.36.49a.873.873 0 0 0-.49 1.488l2.432 2.37-.577 3.343a.884.884 0 0 0 .35.858.871.871 0 0 0 .928.061l3-1.575 3.002 1.575a.87.87 0 0 0 .927-.061.877.877 0 0 0 .35-.858l-.578-3.342 2.433-2.371a.873.873 0 0 0-.49-1.488h.017Zm-3.167 2.607-.656.64.157.91.271 1.6-1.434-.752-.814-.429-.814.429-1.435.753.271-1.602.158-.91-.656-.639-1.164-1.128 1.601-.236.91-.132.411-.822.718-1.453.717 1.453.412.822.91.132 1.6.236-1.163 1.128Z"></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--starCircleLarge"><path d="M16 3.75C9.245 3.75 3.75 9.245 3.75 16S9.245 28.25 16 28.25 28.25 22.755 28.25 16 22.755 3.75 16 3.75Zm0 22.75c-5.793 0-10.5-4.707-10.5-10.5S10.216 5.5 16 5.5 26.5 10.207 26.5 16 21.793 26.5 16 26.5Z"></path><path d="m21.652 13.62-3.36-.49-1.505-3.045c-.148-.298-.463-.446-.787-.446s-.639.149-.787.446l-1.505 3.045-3.36.49a.873.873 0 0 0-.49 1.488l2.432 2.37-.577 3.343a.884.884 0 0 0 .35.858.871.871 0 0 0 .928.061l3-1.575 3.002 1.575a.87.87 0 0 0 .927-.061.877.877 0 0 0 .35-.858l-.578-3.342 2.433-2.371a.873.873 0 0 0-.49-1.488h.017Zm-3.167 2.607-.656.64.157.91.271 1.6-1.434-.752-.814-.429-.814.429-1.435.753.271-1.602.158-.91-.656-.639-1.164-1.128 1.601-.236.91-.132.411-.822.718-1.453.717 1.453.412.822.91.132 1.6.236-1.163 1.128Z"></path></svg>';
 
 export class IconStarCircleLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStarCircleLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--starCircleLarge', '', null, 'IconStarCircleLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--starCircleLarge', '', null, 'IconStarCircleLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--starCircleLarge');
         this.root.append(svg);
     }

package/icons/IconStarFilled.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--starFilled"><path d="m12.288 14.449-4.183-2.197a.219.219 0 0 0-.21 0L3.713 14.45 4.5 9.794a.254.254 0 0 0 0-.193L1.07 6.302l4.673-.682a.228.228 0 0 0 .166-.114L8 1.271l2.091 4.235a.227.227 0 0 0 .167.114l4.672.682-3.386 3.3a.254.254 0 0 0-.061.192l.805 4.655Z"></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--starFilled"><path d="m12.288 14.449-4.183-2.197a.219.219 0 0 0-.21 0L3.713 14.45 4.5 9.794a.254.254 0 0 0 0-.193L1.07 6.302l4.673-.682a.228.228 0 0 0 .166-.114L8 1.271l2.091 4.235a.227.227 0 0 0 .167.114l4.672.682-3.386 3.3a.254.254 0 0 0-.061.192l.805 4.655Z"></path></svg>';
 
 export class IconStarFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStarFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--starFilled', '', null, 'IconStarFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--starFilled', '', null, 'IconStarFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--starFilled');
         this.root.append(svg);
     }

package/icons/IconStarFilledLarge.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--starFilledLarge"><path d="m24.601 29.029-8.199-4.279a.874.874 0 0 0-.813 0l-8.19 4.279 1.6-9.126a.875.875 0 0 0-.253-.77l-6.659-6.467 9.162-1.33a.874.874 0 0 0 .656-.48L16 2.56l4.095 8.295a.875.875 0 0 0 .656.481l9.161 1.33-6.623 6.467a.874.874 0 0 0-.254.77l1.566 9.126Z"></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--starFilledLarge"><path d="m24.601 29.029-8.199-4.279a.874.874 0 0 0-.813 0l-8.19 4.279 1.6-9.126a.875.875 0 0 0-.253-.77l-6.659-6.467 9.162-1.33a.874.874 0 0 0 .656-.48L16 2.56l4.095 8.295a.875.875 0 0 0 .656.481l9.161 1.33-6.623 6.467a.874.874 0 0 0-.254.77l1.566 9.126Z"></path></svg>';
 
 export class IconStarFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStarFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--starFilledLarge', '', null, 'IconStarFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--starFilledLarge', '', null, 'IconStarFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--starFilledLarge');
         this.root.append(svg);
     }

package/icons/IconStarHalfFilled.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--starHalfFilled"><path d="m11.544 9.601 3.386-3.299-4.672-.682a.227.227 0 0 1-.167-.114l-2.09-4.235-2.092 4.235a.228.228 0 0 1-.166.114l-4.673.682 3.43 3.3a.254.254 0 0 1 .061.192l-.848 4.655 4.182-2.197a.219.219 0 0 1 .21 0l4.183 2.197-.788-4.655a.251.251 0 0 1 .044-.193Zm-1.356.411.35 2.04-1.83-.963A1.54 1.54 0 0 0 8 10.914V4.229l.875 1.855a1.531 1.531 0 0 0 1.155.875l2.048.297-1.453 1.4a1.54 1.54 0 0 0-.437 1.356Z"></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--starHalfFilled"><path d="m11.544 9.601 3.386-3.299-4.672-.682a.227.227 0 0 1-.167-.114l-2.09-4.235-2.092 4.235a.228.228 0 0 1-.166.114l-4.673.682 3.43 3.3a.254.254 0 0 1 .061.192l-.848 4.655 4.182-2.197a.219.219 0 0 1 .21 0l4.183 2.197-.788-4.655a.251.251 0 0 1 .044-.193Zm-1.356.411.35 2.04-1.83-.963A1.54 1.54 0 0 0 8 10.914V4.229l.875 1.855a1.531 1.531 0 0 0 1.155.875l2.048.297-1.453 1.4a1.54 1.54 0 0 0-.437 1.356Z"></path></svg>';
 
 export class IconStarHalfFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconStarHalfFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--starHalfFilled', '', null, 'IconStarHalfFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--starHalfFilled', '', null, 'IconStarHalfFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--starHalfFilled');
         this.root.append(svg);
     }