@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/icons/IconNachos.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--nachos"><path d="M7.256 7.265a.875.875 0 0 0 .805.612.875.875 0 0 0 .49-.14 31.253 31.253 0 0 0 2.38-1.653 30.579 30.579 0 0 0 2.424-2.074.875.875 0 0 0 .271-.718.823.823 0 0 0-.411-.612c-.847-.469-1.75-.83-2.686-1.076a12.855 12.855 0 0 0-2.984-.429.875.875 0 0 0-.656.262.875.875 0 0 0-.263.604c-.01.93.045 1.86.167 2.783.1.823.256 1.638.463 2.441Zm2.931-4.375c.602.165 1.187.381 1.75.647A28.356 28.356 0 0 1 10.1 5.07c-.639.49-1.155.875-1.75 1.251a17.3 17.3 0 0 1-.289-1.636c-.09-.714-.14-1.433-.148-2.153.766.04 1.528.152 2.274.333v.026Z"></path><path d="M14.659 11.115a.675.675 0 0 0-.534-.271h-.245a14.953 14.953 0 0 0-1.575-3.063.927.927 0 0 0-1.277-.271 24.573 24.573 0 0 0-2.512 1.977c-.253.237-.481.455-.7.683l-.402-.298a25 25 0 0 0-2.485-1.54.875.875 0 0 0-.735-.06.928.928 0 0 0-.569.49c-.305.679-.573 1.374-.805 2.082h-.945a.674.674 0 0 0-.534.271.656.656 0 0 0-.087.595l.542 1.627a2.108 2.108 0 0 0 1.995 1.444h8.418a2.109 2.109 0 0 0 1.995-1.444l.542-1.627a.656.656 0 0 0-.087-.595ZM11.43 8.814c.4.647.745 1.326 1.033 2.03h-3.5l.402-.385a22.903 22.903 0 0 1 2.065-1.645Zm-6.764.875c.639.358 1.243.743 1.838 1.155H4.22c.14-.385.28-.77.446-1.155Zm8.295 3.237a.797.797 0 0 1-.752.543H3.79a.796.796 0 0 1-.752-.543l-.289-.77h10.5l-.289.77Z"></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--nachos"><path d="M7.256 7.265a.875.875 0 0 0 .805.612.875.875 0 0 0 .49-.14 31.253 31.253 0 0 0 2.38-1.653 30.579 30.579 0 0 0 2.424-2.074.875.875 0 0 0 .271-.718.823.823 0 0 0-.411-.612c-.847-.469-1.75-.83-2.686-1.076a12.855 12.855 0 0 0-2.984-.429.875.875 0 0 0-.656.262.875.875 0 0 0-.263.604c-.01.93.045 1.86.167 2.783.1.823.256 1.638.463 2.441Zm2.931-4.375c.602.165 1.187.381 1.75.647A28.356 28.356 0 0 1 10.1 5.07c-.639.49-1.155.875-1.75 1.251a17.3 17.3 0 0 1-.289-1.636c-.09-.714-.14-1.433-.148-2.153.766.04 1.528.152 2.274.333v.026Z"></path><path d="M14.659 11.115a.675.675 0 0 0-.534-.271h-.245a14.953 14.953 0 0 0-1.575-3.063.927.927 0 0 0-1.277-.271 24.573 24.573 0 0 0-2.512 1.977c-.253.237-.481.455-.7.683l-.402-.298a25 25 0 0 0-2.485-1.54.875.875 0 0 0-.735-.06.928.928 0 0 0-.569.49c-.305.679-.573 1.374-.805 2.082h-.945a.674.674 0 0 0-.534.271.656.656 0 0 0-.087.595l.542 1.627a2.108 2.108 0 0 0 1.995 1.444h8.418a2.109 2.109 0 0 0 1.995-1.444l.542-1.627a.656.656 0 0 0-.087-.595ZM11.43 8.814c.4.647.745 1.326 1.033 2.03h-3.5l.402-.385a22.903 22.903 0 0 1 2.065-1.645Zm-6.764.875c.639.358 1.243.743 1.838 1.155H4.22c.14-.385.28-.77.446-1.155Zm8.295 3.237a.797.797 0 0 1-.752.543H3.79a.796.796 0 0 1-.752-.543l-.289-.77h10.5l-.289.77Z"></path></svg>';
 
 export class IconNachos extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNachos extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--nachos', '', null, 'IconNachos');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--nachos', '', null, 'IconNachos');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--nachos');
         this.root.append(svg);
     }

package/icons/IconNachosLarge.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--nachosLarge"><path d="M18.188 9a.875.875 0 1 1 0 1.75.875.875 0 0 1 0-1.75Zm-.875-1.75a.875.875 0 1 0 0-1.75.875.875 0 0 0 0 1.75Zm3.5.875a.875.875 0 1 0 0-1.75.875.875 0 0 0 0 1.75Zm-6.8 1.47a41.126 41.126 0 0 1-.323-5.512c.018-.333.162-.646.402-.875a1.435 1.435 0 0 1 1.033-.412c1.98.049 3.946.325 5.863.823 1.832.485 3.596 1.2 5.25 2.126a1.198 1.198 0 0 1 .603.875 1.296 1.296 0 0 1-.402 1.076 60.339 60.339 0 0 1-4.822 4.113 60.719 60.719 0 0 1-4.725 3.29 1.41 1.41 0 0 1-.735.219 1.313 1.313 0 0 1-.48-.097 1.18 1.18 0 0 1-.718-.805 40.53 40.53 0 0 1-.945-4.821Zm1.427-5.04c.005 1.612.107 3.222.306 4.821.17 1.318.406 2.627.709 3.92a52.45 52.45 0 0 0 4.069-2.87 61.767 61.767 0 0 0 4.174-3.5 21.042 21.042 0 0 0-4.2-1.601 24 24 0 0 0-5.058-.77ZM29.125 23.28l-1.137 3.264a3.763 3.763 0 0 1-3.58 2.581H7.592a3.762 3.762 0 0 1-3.579-2.581L2.92 23.28a.875.875 0 0 1 .122-.788.875.875 0 0 1 .709-.367h2.24a43.578 43.578 0 0 1 1.697-4.427 1.4 1.4 0 0 1 1.96-.648 48.003 48.003 0 0 1 4.55 2.8 36.939 36.939 0 0 1 3.5-2.765 1.286 1.286 0 0 1 1.75.367c.175.263.333.525.5.788a44.762 44.762 0 0 1 4.287-.77 1.32 1.32 0 0 1 1.041.297 1.365 1.365 0 0 1 .499.998c.061 1.111.061 2.24 0 3.36h2.476a.876.876 0 0 1 .709.367.875.875 0 0 1 .166.788ZM20.9 19.85c.358.708.676 1.436.954 2.179v.096h2.231v-2.861a38.866 38.866 0 0 0-3.229.586h.044Zm-5.775 1.505c-.289.262-.543.516-.796.77h5.635a20.785 20.785 0 0 0-1.698-3.308 35.634 35.634 0 0 0-3.141 2.538Zm-7.289.77h4.043c.315-.341.647-.691 1.006-1.041-1.225-.875-2.459-1.61-3.754-2.328a39.289 39.289 0 0 0-1.295 3.369Zm19.198 1.75H4.966l.7 2.117a2.039 2.039 0 0 0 1.925 1.383H24.41a2.039 2.039 0 0 0 1.925-1.383l.7-2.117Z"></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--nachosLarge"><path d="M18.188 9a.875.875 0 1 1 0 1.75.875.875 0 0 1 0-1.75Zm-.875-1.75a.875.875 0 1 0 0-1.75.875.875 0 0 0 0 1.75Zm3.5.875a.875.875 0 1 0 0-1.75.875.875 0 0 0 0 1.75Zm-6.8 1.47a41.126 41.126 0 0 1-.323-5.512c.018-.333.162-.646.402-.875a1.435 1.435 0 0 1 1.033-.412c1.98.049 3.946.325 5.863.823 1.832.485 3.596 1.2 5.25 2.126a1.198 1.198 0 0 1 .603.875 1.296 1.296 0 0 1-.402 1.076 60.339 60.339 0 0 1-4.822 4.113 60.719 60.719 0 0 1-4.725 3.29 1.41 1.41 0 0 1-.735.219 1.313 1.313 0 0 1-.48-.097 1.18 1.18 0 0 1-.718-.805 40.53 40.53 0 0 1-.945-4.821Zm1.427-5.04c.005 1.612.107 3.222.306 4.821.17 1.318.406 2.627.709 3.92a52.45 52.45 0 0 0 4.069-2.87 61.767 61.767 0 0 0 4.174-3.5 21.042 21.042 0 0 0-4.2-1.601 24 24 0 0 0-5.058-.77ZM29.125 23.28l-1.137 3.264a3.763 3.763 0 0 1-3.58 2.581H7.592a3.762 3.762 0 0 1-3.579-2.581L2.92 23.28a.875.875 0 0 1 .122-.788.875.875 0 0 1 .709-.367h2.24a43.578 43.578 0 0 1 1.697-4.427 1.4 1.4 0 0 1 1.96-.648 48.003 48.003 0 0 1 4.55 2.8 36.939 36.939 0 0 1 3.5-2.765 1.286 1.286 0 0 1 1.75.367c.175.263.333.525.5.788a44.762 44.762 0 0 1 4.287-.77 1.32 1.32 0 0 1 1.041.297 1.365 1.365 0 0 1 .499.998c.061 1.111.061 2.24 0 3.36h2.476a.876.876 0 0 1 .709.367.875.875 0 0 1 .166.788ZM20.9 19.85c.358.708.676 1.436.954 2.179v.096h2.231v-2.861a38.866 38.866 0 0 0-3.229.586h.044Zm-5.775 1.505c-.289.262-.543.516-.796.77h5.635a20.785 20.785 0 0 0-1.698-3.308 35.634 35.634 0 0 0-3.141 2.538Zm-7.289.77h4.043c.315-.341.647-.691 1.006-1.041-1.225-.875-2.459-1.61-3.754-2.328a39.289 39.289 0 0 0-1.295 3.369Zm19.198 1.75H4.966l.7 2.117a2.039 2.039 0 0 0 1.925 1.383H24.41a2.039 2.039 0 0 0 1.925-1.383l.7-2.117Z"></path></svg>';
 
 export class IconNachosLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNachosLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--nachosLarge', '', null, 'IconNachosLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--nachosLarge', '', null, 'IconNachosLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--nachosLarge');
         this.root.append(svg);
     }

package/icons/IconNavigationCollapse.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--navigationCollapse"><path d="M2.32 2.373V13.45h8.64a3.325 3.325 0 0 0 3.331-3.322V2.373H2.321Zm1.338 1.33h1.33v8.417h-1.33V3.703Zm9.304 6.424a1.994 1.994 0 0 1-1.994 1.993H6.317V3.703h6.645v6.424Z"></path><path d="M11.793 9.666v-3.5L9.187 7.99l2.606 1.675Z"></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--navigationCollapse"><path d="M2.32 2.373V13.45h8.64a3.325 3.325 0 0 0 3.331-3.322V2.373H2.321Zm1.338 1.33h1.33v8.417h-1.33V3.703Zm9.304 6.424a1.994 1.994 0 0 1-1.994 1.993H6.317V3.703h6.645v6.424Z"></path><path d="M11.793 9.666v-3.5L9.187 7.99l2.606 1.675Z"></path></svg>';
 
 export class IconNavigationCollapse extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNavigationCollapse extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--navigationCollapse', '', null, 'IconNavigationCollapse');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--navigationCollapse', '', null, 'IconNavigationCollapse');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--navigationCollapse');
         this.root.append(svg);
     }

package/icons/IconNavigationCollapseLarge.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--navigationCollapseLarge"><path d="M4.625 4.625v22.75H23A4.375 4.375 0 0 0 27.375 23V4.625H4.625Zm1.75 1.75h1.75v19.25h-1.75V6.375ZM25.625 23A2.625 2.625 0 0 1 23 25.625H9.875V6.375h15.75V23Z"></path><path d="m19.614 16.945-1.243-1.242-2.861 2.87a1.305 1.305 0 0 0 0 1.854l2.861 2.87 1.243-1.242-1.68-1.68h5.941v-1.75h-5.941l1.68-1.68Z"></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--navigationCollapseLarge"><path d="M4.625 4.625v22.75H23A4.375 4.375 0 0 0 27.375 23V4.625H4.625Zm1.75 1.75h1.75v19.25h-1.75V6.375ZM25.625 23A2.625 2.625 0 0 1 23 25.625H9.875V6.375h15.75V23Z"></path><path d="m19.614 16.945-1.243-1.242-2.861 2.87a1.305 1.305 0 0 0 0 1.854l2.861 2.87 1.243-1.242-1.68-1.68h5.941v-1.75h-5.941l1.68-1.68Z"></path></svg>';
 
 export class IconNavigationCollapseLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNavigationCollapseLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--navigationCollapseLarge', '', null, 'IconNavigationCollapseLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--navigationCollapseLarge', '', null, 'IconNavigationCollapseLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--navigationCollapseLarge');
         this.root.append(svg);
     }

package/icons/IconNavigationExpand.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--navigationExpand"><path d="M1.93 2.373V13.45h8.64a3.323 3.323 0 0 0 3.322-3.322V2.373H1.93Zm1.33 1.33h3.1v8.417h-3.1V3.703Zm9.303 6.424a1.994 1.994 0 0 1-1.994 1.993H7.69V3.703h4.874v6.424Z"></path><path d="m8.797 9.666 2.605-1.826-2.605-1.674"></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--navigationExpand"><path d="M1.93 2.373V13.45h8.64a3.323 3.323 0 0 0 3.322-3.322V2.373H1.93Zm1.33 1.33h3.1v8.417h-3.1V3.703Zm9.303 6.424a1.994 1.994 0 0 1-1.994 1.993H7.69V3.703h4.874v6.424Z"></path><path d="m8.797 9.666 2.605-1.826-2.605-1.674"></path></svg>';
 
 export class IconNavigationExpand extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNavigationExpand extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--navigationExpand', '', null, 'IconNavigationExpand');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--navigationExpand', '', null, 'IconNavigationExpand');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--navigationExpand');
         this.root.append(svg);
     }

package/icons/IconNavigationExpandLarge.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--navigationExpandLarge"><path d="M4.48 4.48v23.03h18.602a4.429 4.429 0 0 0 4.429-4.428V4.48H4.48Zm7.086 21.26H6.252V6.251h5.314v19.487Zm14.173-2.658a2.657 2.657 0 0 1-2.657 2.657h-9.744V6.252h12.401v16.83Z"></path><path d="m19.468 16.952 1.7 1.701H15.11v1.771h6.058l-1.7 1.701 1.249 1.258 2.905-2.905a1.338 1.338 0 0 0 0-1.878l-2.905-2.897-1.25 1.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--navigationExpandLarge"><path d="M4.48 4.48v23.03h18.602a4.429 4.429 0 0 0 4.429-4.428V4.48H4.48Zm7.086 21.26H6.252V6.251h5.314v19.487Zm14.173-2.658a2.657 2.657 0 0 1-2.657 2.657h-9.744V6.252h12.401v16.83Z"></path><path d="m19.468 16.952 1.7 1.701H15.11v1.771h6.058l-1.7 1.701 1.249 1.258 2.905-2.905a1.338 1.338 0 0 0 0-1.878l-2.905-2.897-1.25 1.25Z"></path></svg>';
 
 export class IconNavigationExpandLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNavigationExpandLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--navigationExpandLarge', '', null, 'IconNavigationExpandLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--navigationExpandLarge', '', null, 'IconNavigationExpandLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--navigationExpandLarge');
         this.root.append(svg);
     }

package/icons/IconNetworkError.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--networkError"><path d="M13.189 3.013H9.05v5.46L4.824 1.437H3.3l3.063 5.11H2.81v6.44H6.95v-5.46l2.1 3.5v1.96h1.181l.945 1.575H12.7l-.937-1.574h1.427V3.011Zm-7.551 8.75H4.124V7.824h1.514v3.937Zm6.238 0h-.875l-.638-1.138V4.299h1.513v7.463Z"></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--networkError"><path d="M13.189 3.013H9.05v5.46L4.824 1.437H3.3l3.063 5.11H2.81v6.44H6.95v-5.46l2.1 3.5v1.96h1.181l.945 1.575H12.7l-.937-1.574h1.427V3.011Zm-7.551 8.75H4.124V7.824h1.514v3.937Zm6.238 0h-.875l-.638-1.138V4.299h1.513v7.463Z"></path></svg>';
 
 export class IconNetworkError extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNetworkError extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--networkError', '', null, 'IconNetworkError');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--networkError', '', null, 'IconNetworkError');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--networkError');
         this.root.append(svg);
     }

package/icons/IconNetworkErrorLarge.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--networkErrorLarge"><path d="M7 25h4.8V14.5H7V25Zm1.5-9h1.8v7.5H8.5V16Z"></path><path d="M25 7h-4.8v14.543l-1.8-3V10.75h-4.65l-3.623-6H8.372l5.25 8.707V25h4.8v-3.54l1.8 3V25h.278l1.35 2.25h1.755L22.255 25H25V7Zm-9.9 5.25h1.8v3.795l-1.8-3v-.795Zm1.8 11.25h-1.8v-7.545l1.8 3V23.5Zm6.6 0h-1.8v-15h1.8v15Z"></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--networkErrorLarge"><path d="M7 25h4.8V14.5H7V25Zm1.5-9h1.8v7.5H8.5V16Z"></path><path d="M25 7h-4.8v14.543l-1.8-3V10.75h-4.65l-3.623-6H8.372l5.25 8.707V25h4.8v-3.54l1.8 3V25h.278l1.35 2.25h1.755L22.255 25H25V7Zm-9.9 5.25h1.8v3.795l-1.8-3v-.795Zm1.8 11.25h-1.8v-7.545l1.8 3V23.5Zm6.6 0h-1.8v-15h1.8v15Z"></path></svg>';
 
 export class IconNetworkErrorLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNetworkErrorLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--networkErrorLarge', '', null, 'IconNetworkErrorLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--networkErrorLarge', '', null, 'IconNetworkErrorLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--networkErrorLarge');
         this.root.append(svg);
     }

package/icons/IconNoodles.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--noodles"><path d="m14.125 3.793-.942-.83-3.59 3.762L11.35 2.34l-1.2-.465-1.593 4.011A3.191 3.191 0 0 0 7.11 4.788a3.299 3.299 0 0 0-1.832-.147 3.234 3.234 0 0 0-1.613.852c-.44.431-.741.978-.865 1.573h-.925V9.35c0 .807.258 1.595.736 2.256a4.047 4.047 0 0 0 1.937 1.44l.257 1.079h5.705l.257-1.08a4.047 4.047 0 0 0 1.937-1.44 3.854 3.854 0 0 0 .736-2.255V7.066h-2.425l3.11-3.273ZM5.945 5.82c.396 0 .783.12 1.107.344.324.223.568.538.7.902H4.137c.13-.364.375-.679.699-.902a1.96 1.96 0 0 1 1.108-.344Zm6.21 3.53a2.639 2.639 0 0 1-.587 1.646c-.378.47-.907.806-1.503.953l-.377.1-.197.83H5.824l-.197-.83-.377-.1a2.784 2.784 0 0 1-1.504-.953A2.64 2.64 0 0 1 3.16 9.35V8.31h8.995V9.35Z"></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--noodles"><path d="m14.125 3.793-.942-.83-3.59 3.762L11.35 2.34l-1.2-.465-1.593 4.011A3.191 3.191 0 0 0 7.11 4.788a3.299 3.299 0 0 0-1.832-.147 3.234 3.234 0 0 0-1.613.852c-.44.431-.741.978-.865 1.573h-.925V9.35c0 .807.258 1.595.736 2.256a4.047 4.047 0 0 0 1.937 1.44l.257 1.079h5.705l.257-1.08a4.047 4.047 0 0 0 1.937-1.44 3.854 3.854 0 0 0 .736-2.255V7.066h-2.425l3.11-3.273ZM5.945 5.82c.396 0 .783.12 1.107.344.324.223.568.538.7.902H4.137c.13-.364.375-.679.699-.902a1.96 1.96 0 0 1 1.108-.344Zm6.21 3.53a2.639 2.639 0 0 1-.587 1.646c-.378.47-.907.806-1.503.953l-.377.1-.197.83H5.824l-.197-.83-.377-.1a2.784 2.784 0 0 1-1.504-.953A2.64 2.64 0 0 1 3.16 9.35V8.31h8.995V9.35Z"></path></svg>';
 
 export class IconNoodles extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNoodles extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--noodles', '', null, 'IconNoodles');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--noodles', '', null, 'IconNoodles');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--noodles');
         this.root.append(svg);
     }

package/icons/IconNoodlesLarge.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--noodlesLarge"><path d="M24.755 14.854a4.376 4.376 0 0 0-3.902-3.5l5.652-5.906-1.26-1.173-7 7.35 2.537-9.152L19.102 2l-2.432 8.627a7 7 0 0 0-11.734 4.227H4v4.375a7.875 7.875 0 0 0 5.39 7.446l.508 2.179h10.954l.508-2.179a7.875 7.875 0 0 0 5.39-7.446v-4.375h-1.995Zm-1.82 0h-4.121a7.008 7.008 0 0 0-.201-.963 2.626 2.626 0 0 1 4.322.963Zm-11.06-4.375a5.25 5.25 0 0 1 4.375 2.345c.146.23.272.474.376.726.2.413.34.852.42 1.304h-1.338a3.11 3.11 0 0 0-.254-.744 4.218 4.218 0 0 0-.289-.551 3.938 3.938 0 0 0-7.122 1.295h-1.34a5.25 5.25 0 0 1 5.172-4.375Zm1.995 4.375H9.871a2.197 2.197 0 0 1 3.824-.35c.053.096.105.192.166.324l.009.026ZM25 19.229a6.125 6.125 0 0 1-4.594 5.906l-.516.131-.429 1.838H11.29l-.429-1.838-.516-.131a6.125 6.125 0 0 1-4.594-5.906v-2.625H25v2.625Z"></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--noodlesLarge"><path d="M24.755 14.854a4.376 4.376 0 0 0-3.902-3.5l5.652-5.906-1.26-1.173-7 7.35 2.537-9.152L19.102 2l-2.432 8.627a7 7 0 0 0-11.734 4.227H4v4.375a7.875 7.875 0 0 0 5.39 7.446l.508 2.179h10.954l.508-2.179a7.875 7.875 0 0 0 5.39-7.446v-4.375h-1.995Zm-1.82 0h-4.121a7.008 7.008 0 0 0-.201-.963 2.626 2.626 0 0 1 4.322.963Zm-11.06-4.375a5.25 5.25 0 0 1 4.375 2.345c.146.23.272.474.376.726.2.413.34.852.42 1.304h-1.338a3.11 3.11 0 0 0-.254-.744 4.218 4.218 0 0 0-.289-.551 3.938 3.938 0 0 0-7.122 1.295h-1.34a5.25 5.25 0 0 1 5.172-4.375Zm1.995 4.375H9.871a2.197 2.197 0 0 1 3.824-.35c.053.096.105.192.166.324l.009.026ZM25 19.229a6.125 6.125 0 0 1-4.594 5.906l-.516.131-.429 1.838H11.29l-.429-1.838-.516-.131a6.125 6.125 0 0 1-4.594-5.906v-2.625H25v2.625Z"></path></svg>';
 
 export class IconNoodlesLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNoodlesLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--noodlesLarge', '', null, 'IconNoodlesLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--noodlesLarge', '', null, 'IconNoodlesLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--noodlesLarge');
         this.root.append(svg);
     }

package/icons/IconNote.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--note"><path d="M15 7.344H1v1.312h14V7.344Z"></path><path d="M11.5 11.719H1v1.312h10.5V11.72Z"></path><path d="M15 2.969H1V4.28h14V2.97Z"></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--note"><path d="M15 7.344H1v1.312h14V7.344Z"></path><path d="M11.5 11.719H1v1.312h10.5V11.72Z"></path><path d="M15 2.969H1V4.28h14V2.97Z"></path></svg>';
 
 export class IconNote extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNote extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--note', '', null, 'IconNote');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--note', '', null, 'IconNote');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--note');
         this.root.append(svg);
     }

package/icons/IconNoteLarge.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--noteLarge"><path d="M22.125 23H3.75v1.75h18.375V23Z"></path><path d="M28.25 7.25H3.75V9h24.5V7.25Z"></path><path d="M28.25 15.125H3.75v1.75h24.5v-1.75Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--noteLarge"><path d="M22.125 23H3.75v1.75h18.375V23Z"></path><path d="M28.25 7.25H3.75V9h24.5V7.25Z"></path><path d="M28.25 15.125H3.75v1.75h24.5v-1.75Z"></path></svg>';
 
 export class IconNoteLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNoteLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--noteLarge', '', null, 'IconNoteLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--noteLarge', '', null, 'IconNoteLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--noteLarge');
         this.root.append(svg);
     }

package/icons/IconNotification.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--notification"><path d="m13.906 10.354-.402-.403a4.577 4.577 0 0 1-1.348-3.255V6.25a4.165 4.165 0 0 0-1.365-3.08 4.208 4.208 0 0 0-2.135-1.006V1H7.344v1.164a4.287 4.287 0 0 0-3.5 4.252v.28a4.576 4.576 0 0 1-1.348 3.255l-.402.403v1.802h3.089a2.827 2.827 0 0 0 5.635 0h3.088v-1.802ZM8 13.469a1.532 1.532 0 0 1-1.514-1.313h3.028A1.531 1.531 0 0 1 8 13.47Zm2.686-2.625H3.46a5.871 5.871 0 0 0 1.697-4.148v-.28a2.958 2.958 0 0 1 2.555-2.992 2.844 2.844 0 0 1 3.133 2.826v.446a5.872 5.872 0 0 0 1.697 4.148h-1.855Z"></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--notification"><path d="m13.906 10.354-.402-.403a4.577 4.577 0 0 1-1.348-3.255V6.25a4.165 4.165 0 0 0-1.365-3.08 4.208 4.208 0 0 0-2.135-1.006V1H7.344v1.164a4.287 4.287 0 0 0-3.5 4.252v.28a4.576 4.576 0 0 1-1.348 3.255l-.402.403v1.802h3.089a2.827 2.827 0 0 0 5.635 0h3.088v-1.802ZM8 13.469a1.532 1.532 0 0 1-1.514-1.313h3.028A1.531 1.531 0 0 1 8 13.47Zm2.686-2.625H3.46a5.871 5.871 0 0 0 1.697-4.148v-.28a2.958 2.958 0 0 1 2.555-2.992 2.844 2.844 0 0 1 3.133 2.826v.446a5.872 5.872 0 0 0 1.697 4.148h-1.855Z"></path></svg>';
 
 export class IconNotification extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNotification extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--notification', '', null, 'IconNotification');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--notification', '', null, 'IconNotification');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--notification');
         this.root.append(svg);
     }

package/icons/IconNotificationFilled.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--notificationFilled"><path d="M13.504 9.951a4.577 4.577 0 0 1-1.348-3.255V6.25a4.165 4.165 0 0 0-1.365-3.08 4.208 4.208 0 0 0-2.135-1.006V1H7.344v1.164a4.287 4.287 0 0 0-3.5 4.252v.28a4.576 4.576 0 0 1-1.348 3.255l-.402.403v1.802h11.812v-1.802l-.402-.403Z"></path><path d="M8 14.781a2.817 2.817 0 0 0 2.371-1.312H5.63A2.819 2.819 0 0 0 8 14.78Z"></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--notificationFilled"><path d="M13.504 9.951a4.577 4.577 0 0 1-1.348-3.255V6.25a4.165 4.165 0 0 0-1.365-3.08 4.208 4.208 0 0 0-2.135-1.006V1H7.344v1.164a4.287 4.287 0 0 0-3.5 4.252v.28a4.576 4.576 0 0 1-1.348 3.255l-.402.403v1.802h11.812v-1.802l-.402-.403Z"></path><path d="M8 14.781a2.817 2.817 0 0 0 2.371-1.312H5.63A2.819 2.819 0 0 0 8 14.78Z"></path></svg>';
 
 export class IconNotificationFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNotificationFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--notificationFilled', '', null, 'IconNotificationFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--notificationFilled', '', null, 'IconNotificationFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--notificationFilled');
         this.root.append(svg);
     }

package/icons/IconNotificationFilledLarge.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--notificationFilledLarge"><path d="M16 29.125a4.506 4.506 0 0 0 4.086-2.625h-8.172A4.507 4.507 0 0 0 16 29.125Z"></path><path d="M26.692 21.084a9.554 9.554 0 0 1-2.817-6.834v-.875a7.875 7.875 0 0 0-7-7.822V2.875h-1.75v2.678a8.137 8.137 0 0 0-7 8.146v.551a9.555 9.555 0 0 1-2.817 6.808l-.683.708v2.984h22.75v-2.984l-.683-.682Z"></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--notificationFilledLarge"><path d="M16 29.125a4.506 4.506 0 0 0 4.086-2.625h-8.172A4.507 4.507 0 0 0 16 29.125Z"></path><path d="M26.692 21.084a9.554 9.554 0 0 1-2.817-6.834v-.875a7.875 7.875 0 0 0-7-7.822V2.875h-1.75v2.678a8.137 8.137 0 0 0-7 8.146v.551a9.555 9.555 0 0 1-2.817 6.808l-.683.708v2.984h22.75v-2.984l-.683-.682Z"></path></svg>';
 
 export class IconNotificationFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNotificationFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--notificationFilledLarge', '', null, 'IconNotificationFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--notificationFilledLarge', '', null, 'IconNotificationFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--notificationFilledLarge');
         this.root.append(svg);
     }

package/icons/IconNotificationLarge.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--notificationLarge"><path d="m27.375 21.766-.683-.682a9.554 9.554 0 0 1-2.817-6.834v-.875a7.875 7.875 0 0 0-7-7.822V2.875h-1.75v2.678a8.137 8.137 0 0 0-7 8.146v.551a9.555 9.555 0 0 1-2.817 6.808l-.683.708v2.984h6.869a4.506 4.506 0 1 0 9.012 0h6.869v-2.984ZM16 27.375a2.765 2.765 0 0 1-2.765-2.625h5.53A2.765 2.765 0 0 1 16 27.375ZM25.625 23H6.375v-.516l.166-.167a11.28 11.28 0 0 0 3.334-8.067v-.578a6.361 6.361 0 0 1 5.512-6.422 6.072 6.072 0 0 1 4.726 1.549 6.126 6.126 0 0 1 2.012 4.576v.875a11.28 11.28 0 0 0 3.334 8.041l.166.166V23Z"></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--notificationLarge"><path d="m27.375 21.766-.683-.682a9.554 9.554 0 0 1-2.817-6.834v-.875a7.875 7.875 0 0 0-7-7.822V2.875h-1.75v2.678a8.137 8.137 0 0 0-7 8.146v.551a9.555 9.555 0 0 1-2.817 6.808l-.683.708v2.984h6.869a4.506 4.506 0 1 0 9.012 0h6.869v-2.984ZM16 27.375a2.765 2.765 0 0 1-2.765-2.625h5.53A2.765 2.765 0 0 1 16 27.375ZM25.625 23H6.375v-.516l.166-.167a11.28 11.28 0 0 0 3.334-8.067v-.578a6.361 6.361 0 0 1 5.512-6.422 6.072 6.072 0 0 1 4.726 1.549 6.126 6.126 0 0 1 2.012 4.576v.875a11.28 11.28 0 0 0 3.334 8.041l.166.166V23Z"></path></svg>';
 
 export class IconNotificationLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNotificationLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--notificationLarge', '', null, 'IconNotificationLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--notificationLarge', '', null, 'IconNotificationLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--notificationLarge');
         this.root.append(svg);
     }

package/icons/IconNotificationOff.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--notificationOff"><path d="m13.906 10.459-.402-.403a4.567 4.567 0 0 1-1.348-3.246v-.455a4.182 4.182 0 0 0-1.365-3.08 4.121 4.121 0 0 0-2.135-.998V1.105H7.344v1.172c-.58.098-1.13.326-1.61.665l-.91-1.505H3.3L4.754 3.87a4.375 4.375 0 0 0-.875 2.625v.289A4.568 4.568 0 0 1 2.53 10.03l-.402.402v1.803h3.054a2.817 2.817 0 0 0 5.293 1.138l.7 1.163H12.7l-1.374-2.275h2.581V10.46ZM8 13.574a1.531 1.531 0 0 1-1.514-1.313h3.028A1.531 1.531 0 0 1 8 13.574Zm-2.144-2.625H3.46A5.871 5.871 0 0 0 5.156 6.81v-.289a3.08 3.08 0 0 1 .35-1.409l3.5 5.837h-3.15Zm4.83 0h-.148l-4.14-6.895a2.747 2.747 0 0 1 1.313-.525 2.844 2.844 0 0 1 3.133 2.826v.455a5.871 5.871 0 0 0 1.697 4.139h-1.855Z"></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--notificationOff"><path d="m13.906 10.459-.402-.403a4.567 4.567 0 0 1-1.348-3.246v-.455a4.182 4.182 0 0 0-1.365-3.08 4.121 4.121 0 0 0-2.135-.998V1.105H7.344v1.172c-.58.098-1.13.326-1.61.665l-.91-1.505H3.3L4.754 3.87a4.375 4.375 0 0 0-.875 2.625v.289A4.568 4.568 0 0 1 2.53 10.03l-.402.402v1.803h3.054a2.817 2.817 0 0 0 5.293 1.138l.7 1.163H12.7l-1.374-2.275h2.581V10.46ZM8 13.574a1.531 1.531 0 0 1-1.514-1.313h3.028A1.531 1.531 0 0 1 8 13.574Zm-2.144-2.625H3.46A5.871 5.871 0 0 0 5.156 6.81v-.289a3.08 3.08 0 0 1 .35-1.409l3.5 5.837h-3.15Zm4.83 0h-.148l-4.14-6.895a2.747 2.747 0 0 1 1.313-.525 2.844 2.844 0 0 1 3.133 2.826v.455a5.871 5.871 0 0 0 1.697 4.139h-1.855Z"></path></svg>';
 
 export class IconNotificationOff extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNotificationOff extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--notificationOff', '', null, 'IconNotificationOff');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--notificationOff', '', null, 'IconNotificationOff');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--notificationOff');
         this.root.append(svg);
     }

package/icons/IconNotificationOffLarge.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--notificationOffLarge"><path d="m27.375 21.766-.683-.682a9.554 9.554 0 0 1-2.817-6.834v-.875a7.875 7.875 0 0 0-7-7.822V2.875h-1.75v2.678a7.508 7.508 0 0 0-3.5 1.382l-2.476-4.06H7.1l3.15 5.25a8.409 8.409 0 0 0-2.126 5.574v.551a9.555 9.555 0 0 1-2.817 6.808l-.683.708v2.984h6.869a4.497 4.497 0 0 0 8.96.376l2.397 3.999H24.9l-2.625-4.375h5.101v-2.984ZM16 27.375a2.765 2.765 0 0 1-2.765-2.625h5.53A2.765 2.765 0 0 1 16 27.375ZM11.713 23H6.375v-.516l.166-.167a11.28 11.28 0 0 0 3.334-8.067v-.578a6.667 6.667 0 0 1 1.33-3.99L19.176 23h-7.463Zm13.912 0H21.25L12.5 8.431a5.757 5.757 0 0 1 2.887-1.181 6.072 6.072 0 0 1 4.726 1.549 6.126 6.126 0 0 1 2.012 4.576v.875a11.28 11.28 0 0 0 3.334 8.041l.166.166V23Z"></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--notificationOffLarge"><path d="m27.375 21.766-.683-.682a9.554 9.554 0 0 1-2.817-6.834v-.875a7.875 7.875 0 0 0-7-7.822V2.875h-1.75v2.678a7.508 7.508 0 0 0-3.5 1.382l-2.476-4.06H7.1l3.15 5.25a8.409 8.409 0 0 0-2.126 5.574v.551a9.555 9.555 0 0 1-2.817 6.808l-.683.708v2.984h6.869a4.497 4.497 0 0 0 8.96.376l2.397 3.999H24.9l-2.625-4.375h5.101v-2.984ZM16 27.375a2.765 2.765 0 0 1-2.765-2.625h5.53A2.765 2.765 0 0 1 16 27.375ZM11.713 23H6.375v-.516l.166-.167a11.28 11.28 0 0 0 3.334-8.067v-.578a6.667 6.667 0 0 1 1.33-3.99L19.176 23h-7.463Zm13.912 0H21.25L12.5 8.431a5.757 5.757 0 0 1 2.887-1.181 6.072 6.072 0 0 1 4.726 1.549 6.126 6.126 0 0 1 2.012 4.576v.875a11.28 11.28 0 0 0 3.334 8.041l.166.166V23Z"></path></svg>';
 
 export class IconNotificationOffLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNotificationOffLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--notificationOffLarge', '', null, 'IconNotificationOffLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--notificationOffLarge', '', null, 'IconNotificationOffLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--notificationOffLarge');
         this.root.append(svg);
     }

package/icons/IconNumberSymbol.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--numberSymbol"><path d="m13.18 6.049.184-1.295h-1.96l.472-3.247h-1.312l-.473 3.247H6.854l.472-3.247H6.022l-.48 3.247H3.545l-.184 1.295h2.013L4.806 9.95H2.82l-.184 1.295h1.96l-.472 3.246h1.312l.473-3.246h3.237l-.472 3.246h1.303l.482-3.246h1.995l.183-1.295h-2.012l.569-3.902h1.986ZM9.33 9.95H6.101L6.67 6.05h3.229L9.33 9.95Z"></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--numberSymbol"><path d="m13.18 6.049.184-1.295h-1.96l.472-3.247h-1.312l-.473 3.247H6.854l.472-3.247H6.022l-.48 3.247H3.545l-.184 1.295h2.013L4.806 9.95H2.82l-.184 1.295h1.96l-.472 3.246h1.312l.473-3.246h3.237l-.472 3.246h1.303l.482-3.246h1.995l.183-1.295h-2.012l.569-3.902h1.986ZM9.33 9.95H6.101L6.67 6.05h3.229L9.33 9.95Z"></path></svg>';
 
 export class IconNumberSymbol extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNumberSymbol extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--numberSymbol', '', null, 'IconNumberSymbol');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--numberSymbol', '', null, 'IconNumberSymbol');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--numberSymbol');
         this.root.append(svg);
     }

package/icons/IconNumberSymbolLarge.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--numberSymbolLarge"><path d="m23 13.375.245-1.75H20.62l.63-4.375H19.5l-.639 4.375h-4.375l.639-4.375h-1.75l-.639 4.375H9.997l-.245 1.75h2.687l-.77 5.25h-2.67l-.244 1.75h2.625l-.63 4.375h1.75l.639-4.375h4.375l-.64 4.375h1.75l.64-4.375h2.695l.245-1.75H19.56l.814-5.25H23Zm-5.189 5.25h-4.375l.814-5.25h4.375l-.814 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--numberSymbolLarge"><path d="m23 13.375.245-1.75H20.62l.63-4.375H19.5l-.639 4.375h-4.375l.639-4.375h-1.75l-.639 4.375H9.997l-.245 1.75h2.687l-.77 5.25h-2.67l-.244 1.75h2.625l-.63 4.375h1.75l.639-4.375h4.375l-.64 4.375h1.75l.64-4.375h2.695l.245-1.75H19.56l.814-5.25H23Zm-5.189 5.25h-4.375l.814-5.25h4.375l-.814 5.25Z"></path></svg>';
 
 export class IconNumberSymbolLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconNumberSymbolLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--numberSymbolLarge', '', null, 'IconNumberSymbolLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--numberSymbolLarge', '', null, 'IconNumberSymbolLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--numberSymbolLarge');
         this.root.append(svg);
     }