@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/icons/IconSocialYoutubeCircle.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--youtubeCircle"><g clip-path="url(#prefix__clip0_889_625)"><path d="M8 1.175A6.781 6.781 0 1 0 14.78 8 6.79 6.79 0 0 0 8 1.175Zm0 12.25A5.469 5.469 0 1 1 8 2.487a5.469 5.469 0 0 1 0 10.938Z"></path><path fill-rule="evenodd" d="M10.344 6.128a.76.76 0 0 1 .53.543C11 7.15 11 8.148 11 8.148s0 1-.125 1.478a.76.76 0 0 1-.53.543c-.469.128-2.345.128-2.345.128s-1.876 0-2.344-.128a.76.76 0 0 1-.53-.543C5 9.147 5 8.148 5 8.148s0-.998.125-1.477a.76.76 0 0 1 .53-.543C6.125 6 8 6 8 6s1.876 0 2.344.128Zm-1.39 2.174-1.568.907V7.395l1.569.907Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_889_625"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--youtubeCircle"><g clip-path="url(#prefix__clip0_889_625)"><path d="M8 1.175A6.781 6.781 0 1 0 14.78 8 6.79 6.79 0 0 0 8 1.175Zm0 12.25A5.469 5.469 0 1 1 8 2.487a5.469 5.469 0 0 1 0 10.938Z"></path><path fill-rule="evenodd" d="M10.344 6.128a.76.76 0 0 1 .53.543C11 7.15 11 8.148 11 8.148s0 1-.125 1.478a.76.76 0 0 1-.53.543c-.469.128-2.345.128-2.345.128s-1.876 0-2.344-.128a.76.76 0 0 1-.53-.543C5 9.147 5 8.148 5 8.148s0-.998.125-1.477a.76.76 0 0 1 .53-.543C6.125 6 8 6 8 6s1.876 0 2.344.128Zm-1.39 2.174-1.568.907V7.395l1.569.907Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_889_625"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconSocialYoutubeCircle extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialYoutubeCircle extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--youtubeCircle', '', null, 'IconSocialYoutubeCircle');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--youtubeCircle', '', null, 'IconSocialYoutubeCircle');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--youtubeCircle');
         this.root.append(svg);
     }

package/icons/IconSocialYoutubeCircleFilled.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--youtubeCircleFilled"><g clip-path="url(#prefix__clip0_1611_662)"><path fill-rule="evenodd" d="M4.237 2.315A6.781 6.781 0 0 1 8 1.175 6.79 6.79 0 0 1 14.78 8 6.781 6.781 0 1 1 4.237 2.315Zm6.638 4.356a.76.76 0 0 0-.53-.543C9.875 6 8 6 8 6s-1.876 0-2.344.128a.76.76 0 0 0-.53.543C5 7.15 5 8.148 5 8.148s0 1 .125 1.478a.76.76 0 0 0 .53.543c.469.128 2.345.128 2.345.128s1.876 0 2.344-.128a.76.76 0 0 0 .53-.543C11 9.147 11 8.148 11 8.148s0-.998-.125-1.477ZM7.386 9.209l1.569-.907-1.569-.907V9.21Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_1611_662"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--youtubeCircleFilled"><g clip-path="url(#prefix__clip0_1611_662)"><path fill-rule="evenodd" d="M4.237 2.315A6.781 6.781 0 0 1 8 1.175 6.79 6.79 0 0 1 14.78 8 6.781 6.781 0 1 1 4.237 2.315Zm6.638 4.356a.76.76 0 0 0-.53-.543C9.875 6 8 6 8 6s-1.876 0-2.344.128a.76.76 0 0 0-.53.543C5 7.15 5 8.148 5 8.148s0 1 .125 1.478a.76.76 0 0 0 .53.543c.469.128 2.345.128 2.345.128s1.876 0 2.344-.128a.76.76 0 0 0 .53-.543C11 9.147 11 8.148 11 8.148s0-.998-.125-1.477ZM7.386 9.209l1.569-.907-1.569-.907V9.21Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_1611_662"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconSocialYoutubeCircleFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialYoutubeCircleFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--youtubeCircleFilled', '', null, 'IconSocialYoutubeCircleFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--youtubeCircleFilled', '', null, 'IconSocialYoutubeCircleFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--youtubeCircleFilled');
         this.root.append(svg);
     }

package/icons/IconSocialYoutubeCircleFilledLarge.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--youtubeCircleFilledLarge"><path fill-rule="evenodd" d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm6.707 9.174a1.774 1.774 0 0 0-1.237-1.267c-1.092-.299-5.47-.299-5.47-.299s-4.378 0-5.47.3a1.774 1.774 0 0 0-1.237 1.266C9 14.04 9 16.37 9 16.37s0 2.33.293 3.448c.16.616.635 1.1 1.237 1.266 1.092.299 5.47.299 5.47.299s4.378 0 5.47-.3a1.774 1.774 0 0 0 1.237-1.265C23 18.701 23 16.37 23 16.37s0-2.33-.293-3.447Zm-8.138 5.563 3.659-2.116-3.66-2.116v4.232Z" 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--youtubeCircleFilledLarge"><path fill-rule="evenodd" d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm6.707 9.174a1.774 1.774 0 0 0-1.237-1.267c-1.092-.299-5.47-.299-5.47-.299s-4.378 0-5.47.3a1.774 1.774 0 0 0-1.237 1.266C9 14.04 9 16.37 9 16.37s0 2.33.293 3.448c.16.616.635 1.1 1.237 1.266 1.092.299 5.47.299 5.47.299s4.378 0 5.47-.3a1.774 1.774 0 0 0 1.237-1.265C23 18.701 23 16.37 23 16.37s0-2.33-.293-3.447Zm-8.138 5.563 3.659-2.116-3.66-2.116v4.232Z" clip-rule="evenodd"></path></svg>';
 
 export class IconSocialYoutubeCircleFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialYoutubeCircleFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--youtubeCircleFilledLarge', '', null, 'IconSocialYoutubeCircleFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--youtubeCircleFilledLarge', '', null, 'IconSocialYoutubeCircleFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--youtubeCircleFilledLarge');
         this.root.append(svg);
     }

package/icons/IconSocialYoutubeCircleLarge.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--youtubeCircleLarge"><path fill-rule="evenodd" d="M9.194 5.814a12.25 12.25 0 1 1 13.612 20.372A12.25 12.25 0 0 1 9.194 5.814Zm.972 18.916A10.5 10.5 0 1 0 21.834 7.27a10.5 10.5 0 0 0-11.666 17.46Z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M21.47 11.3c.602.164 1.077.65 1.238 1.266.292 1.116.292 3.447.292 3.447s0 2.33-.293 3.447a1.774 1.774 0 0 1-1.237 1.267c-1.092.299-5.47.299-5.47.299s-4.378 0-5.47-.3a1.774 1.774 0 0 1-1.237-1.266C9 18.343 9 16.013 9 16.013s0-2.33.293-3.447a1.774 1.774 0 0 1 1.237-1.267C11.622 11 16 11 16 11s4.378 0 5.47.3Zm-3.242 5.071-3.66 2.116v-4.232l3.66 2.116Z" 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--youtubeCircleLarge"><path fill-rule="evenodd" d="M9.194 5.814a12.25 12.25 0 1 1 13.612 20.372A12.25 12.25 0 0 1 9.194 5.814Zm.972 18.916A10.5 10.5 0 1 0 21.834 7.27a10.5 10.5 0 0 0-11.666 17.46Z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M21.47 11.3c.602.164 1.077.65 1.238 1.266.292 1.116.292 3.447.292 3.447s0 2.33-.293 3.447a1.774 1.774 0 0 1-1.237 1.267c-1.092.299-5.47.299-5.47.299s-4.378 0-5.47-.3a1.774 1.774 0 0 1-1.237-1.266C9 18.343 9 16.013 9 16.013s0-2.33.293-3.447a1.774 1.774 0 0 1 1.237-1.267C11.622 11 16 11 16 11s4.378 0 5.47.3Zm-3.242 5.071-3.66 2.116v-4.232l3.66 2.116Z" clip-rule="evenodd"></path></svg>';
 
 export class IconSocialYoutubeCircleLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialYoutubeCircleLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--youtubeCircleLarge', '', null, 'IconSocialYoutubeCircleLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--youtubeCircleLarge', '', null, 'IconSocialYoutubeCircleLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--youtubeCircleLarge');
         this.root.append(svg);
     }

package/icons/IconSocialYoutubeStatic.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--youtubeStatic"><path fill="red" d="M13.95 4.985a1.567 1.567 0 0 0-1.093-1.118c-.964-.264-4.831-.264-4.831-.264s-3.867 0-4.831.264a1.567 1.567 0 0 0-1.093 1.118c-.259.987-.259 3.045-.259 3.045s0 2.058.259 3.045c.142.544.56.973 1.093 1.119.964.264 4.83.264 4.83.264s3.867 0 4.832-.264a1.567 1.567 0 0 0 1.093-1.119c.258-.986.258-3.045.258-3.045s0-2.058-.258-3.045Z"></path><path fill="#fff" d="M6.761 9.899 9.993 8.03 6.761 6.161V9.9Z"></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--youtubeStatic"><path fill="red" d="M13.95 4.985a1.567 1.567 0 0 0-1.093-1.118c-.964-.264-4.831-.264-4.831-.264s-3.867 0-4.831.264a1.567 1.567 0 0 0-1.093 1.118c-.259.987-.259 3.045-.259 3.045s0 2.058.259 3.045c.142.544.56.973 1.093 1.119.964.264 4.83.264 4.83.264s3.867 0 4.832-.264a1.567 1.567 0 0 0 1.093-1.119c.258-.986.258-3.045.258-3.045s0-2.058-.258-3.045Z"></path><path fill="#fff" d="M6.761 9.899 9.993 8.03 6.761 6.161V9.9Z"></path></svg>';
 
 export class IconSocialYoutubeStatic extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialYoutubeStatic extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--youtubeStatic', '', null, 'IconSocialYoutubeStatic');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--youtubeStatic', '', null, 'IconSocialYoutubeStatic');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--youtubeStatic');
         this.root.append(svg);
     }

package/icons/IconSocialYoutubeStaticLarge.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--youtubeStaticLarge"><path fill="red" d="M27.9 9.97a3.134 3.134 0 0 0-2.186-2.236c-1.928-.529-9.662-.529-9.662-.529s-7.733 0-9.662.529A3.133 3.133 0 0 0 4.204 9.97c-.517 1.973-.517 6.09-.517 6.09s0 4.116.517 6.09a3.134 3.134 0 0 0 2.186 2.236c1.929.529 9.662.529 9.662.529s7.734 0 9.662-.529a3.134 3.134 0 0 0 2.187-2.237c.516-1.973.516-6.09.516-6.09s0-4.116-.516-6.09Z"></path><path fill="#fff" d="m13.523 19.798 6.464-3.738-6.464-3.737v7.475Z"></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--youtubeStaticLarge"><path fill="red" d="M27.9 9.97a3.134 3.134 0 0 0-2.186-2.236c-1.928-.529-9.662-.529-9.662-.529s-7.733 0-9.662.529A3.133 3.133 0 0 0 4.204 9.97c-.517 1.973-.517 6.09-.517 6.09s0 4.116.517 6.09a3.134 3.134 0 0 0 2.186 2.236c1.929.529 9.662.529 9.662.529s7.734 0 9.662-.529a3.134 3.134 0 0 0 2.187-2.237c.516-1.973.516-6.09.516-6.09s0-4.116-.516-6.09Z"></path><path fill="#fff" d="m13.523 19.798 6.464-3.738-6.464-3.737v7.475Z"></path></svg>';
 
 export class IconSocialYoutubeStaticLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSocialYoutubeStaticLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--youtubeStaticLarge', '', null, 'IconSocialYoutubeStaticLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--youtubeStaticLarge', '', null, 'IconSocialYoutubeStaticLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--youtubeStaticLarge');
         this.root.append(svg);
     }

package/icons/IconSort.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--sort"><path d="M9.75 11.719h-3.5v1.312h3.5V11.72Z"></path><path d="M12.375 7.344h-8.75v1.312h8.75V7.344Z"></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--sort"><path d="M9.75 11.719h-3.5v1.312h3.5V11.72Z"></path><path d="M12.375 7.344h-8.75v1.312h8.75V7.344Z"></path><path d="M15 2.969H1V4.28h14V2.97Z"></path></svg>';
 
 export class IconSort extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSort extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--sort', '', null, 'IconSort');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--sort', '', null, 'IconSort');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sort');
         this.root.append(svg);
     }

package/icons/IconSortAscending.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--sortAscending"><path d="M1 7.344h6.816l-.551 1.312H1V7.344Zm8.286-3.5H1v1.312h7.735l.551-1.312ZM1 12.156h4.786l.56-1.312H1v1.312Zm12.994-2.502L12.156 11.5V6.25h-1.312v5.25L9.006 9.654l-.927.971 2.625 2.625a1.075 1.075 0 0 0 1.54 0l2.625-2.625-.875-.971Z"></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--sortAscending"><path d="M1 7.344h6.816l-.551 1.312H1V7.344Zm8.286-3.5H1v1.312h7.735l.551-1.312ZM1 12.156h4.786l.56-1.312H1v1.312Zm12.994-2.502L12.156 11.5V6.25h-1.312v5.25L9.006 9.654l-.927.971 2.625 2.625a1.075 1.075 0 0 0 1.54 0l2.625-2.625-.875-.971Z"></path></svg>';
 
 export class IconSortAscending extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSortAscending extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--sortAscending', '', null, 'IconSortAscending');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--sortAscending', '', null, 'IconSortAscending');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sortAscending');
         this.root.append(svg);
     }

package/icons/IconSortAscendingLarge.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--sortAscendingLarge"><path d="M18.03 10.75H2V9h16.765l-.735 1.75ZM2 23h10.867l.735-1.75H2V23Zm0-6.125h13.449l.735-1.75H2v1.75Zm25.891 3.141-4.016 4.078V12.5h-1.75v11.524l-4.016-4.008-1.234 1.234 4.926 4.935a1.75 1.75 0 0 0 2.398 0l4.926-4.935-1.234-1.234Z"></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--sortAscendingLarge"><path d="M18.03 10.75H2V9h16.765l-.735 1.75ZM2 23h10.867l.735-1.75H2V23Zm0-6.125h13.449l.735-1.75H2v1.75Zm25.891 3.141-4.016 4.078V12.5h-1.75v11.524l-4.016-4.008-1.234 1.234 4.926 4.935a1.75 1.75 0 0 0 2.398 0l4.926-4.935-1.234-1.234Z"></path></svg>';
 
 export class IconSortAscendingLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSortAscendingLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--sortAscendingLarge', '', null, 'IconSortAscendingLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--sortAscendingLarge', '', null, 'IconSortAscendingLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sortAscendingLarge');
         this.root.append(svg);
     }

package/icons/IconSortDescending.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--sortDescending"><path d="M1 9.23h6.817l-.551-1.312H1V9.23Zm8.287 3.5H1v-1.312h7.736l.551 1.312ZM1 4.418h4.787l.56 1.312H1V4.418ZM13.995 6.92l-1.838-1.846v5.25h-1.312v-5.25L9.007 6.92l-.928-.97 2.626-2.626a1.077 1.077 0 0 1 1.54 0L14.87 5.95l-.875.971Z"></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--sortDescending"><path d="M1 9.23h6.817l-.551-1.312H1V9.23Zm8.287 3.5H1v-1.312h7.736l.551 1.312ZM1 4.418h4.787l.56 1.312H1V4.418ZM13.995 6.92l-1.838-1.846v5.25h-1.312v-5.25L9.007 6.92l-.928-.97 2.626-2.626a1.077 1.077 0 0 1 1.54 0L14.87 5.95l-.875.971Z"></path></svg>';
 
 export class IconSortDescending extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSortDescending extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--sortDescending', '', null, 'IconSortDescending');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--sortDescending', '', null, 'IconSortDescending');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sortDescending');
         this.root.append(svg);
     }

package/icons/IconSortDescendingLarge.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--sortDescendingLarge"><path d="M18.033 22.91H2v1.75h16.768l-.735-1.75ZM2 10.66h10.87l.735 1.75H2v-1.75Zm0 6.125h13.451l.735 1.75H2v-1.75Zm25.896-3.141-4.017-4.078V21.16h-1.75V9.636l-4.017 4.008-1.234-1.234 4.927-4.935a1.75 1.75 0 0 1 2.398 0l4.927 4.935-1.234 1.234Z"></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--sortDescendingLarge"><path d="M18.033 22.91H2v1.75h16.768l-.735-1.75ZM2 10.66h10.87l.735 1.75H2v-1.75Zm0 6.125h13.451l.735 1.75H2v-1.75Zm25.896-3.141-4.017-4.078V21.16h-1.75V9.636l-4.017 4.008-1.234-1.234 4.927-4.935a1.75 1.75 0 0 1 2.398 0l4.927 4.935-1.234 1.234Z"></path></svg>';
 
 export class IconSortDescendingLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSortDescendingLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--sortDescendingLarge', '', null, 'IconSortDescendingLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--sortDescendingLarge', '', null, 'IconSortDescendingLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sortDescendingLarge');
         this.root.append(svg);
     }

package/icons/IconSortLarge.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--sortLarge"><path d="M18.625 20.125h-5.25v1.75h5.25v-1.75Z"></path><path d="M5.5 6.375v1.75h22.75v-1.75H5.5Z"></path><path d="M5.5 6.375H3.75v1.75H5.5v-1.75Z"></path><path d="M23 13.25H9V15h14v-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--sortLarge"><path d="M18.625 20.125h-5.25v1.75h5.25v-1.75Z"></path><path d="M5.5 6.375v1.75h22.75v-1.75H5.5Z"></path><path d="M5.5 6.375H3.75v1.75H5.5v-1.75Z"></path><path d="M23 13.25H9V15h14v-1.75Z"></path></svg>';
 
 export class IconSortLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSortLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--sortLarge', '', null, 'IconSortLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--sortLarge', '', null, 'IconSortLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sortLarge');
         this.root.append(svg);
     }

package/icons/IconSoundOff.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--soundOff"><path d="M11.281 4.736v-3.5H9.75l-.166.167A21.623 21.623 0 0 1 7.598 3.1 23.625 23.625 0 0 1 5.19 4.719H2.75A1.54 1.54 0 0 0 1.219 6.25v3.5a1.54 1.54 0 0 0 1.531 1.531h2.441c.837.487 1.64 1.028 2.407 1.619a22.864 22.864 0 0 1 1.986 1.697l.192.184h1.505v-3.5L9.97 12.594v.586c-.508-.464-1.033-.875-1.566-1.313a26.789 26.789 0 0 0-2.372-1.6V5.75c.82-.49 1.61-1.024 2.372-1.601.533-.411 1.058-.875 1.566-1.312v.586l1.312 1.312ZM4.72 9.97H2.75a.219.219 0 0 1-.219-.219v-3.5a.219.219 0 0 1 .219-.219h1.969V9.97Z"></path><path d="M14.633 6.058 12.69 8l1.943 1.943-.928.927-1.943-1.942L9.82 10.87l-.928-.927L10.835 8 8.892 6.058l.928-.928 1.942 1.943 1.943-1.943.928.928Z"></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--soundOff"><path d="M11.281 4.736v-3.5H9.75l-.166.167A21.623 21.623 0 0 1 7.598 3.1 23.625 23.625 0 0 1 5.19 4.719H2.75A1.54 1.54 0 0 0 1.219 6.25v3.5a1.54 1.54 0 0 0 1.531 1.531h2.441c.837.487 1.64 1.028 2.407 1.619a22.864 22.864 0 0 1 1.986 1.697l.192.184h1.505v-3.5L9.97 12.594v.586c-.508-.464-1.033-.875-1.566-1.313a26.789 26.789 0 0 0-2.372-1.6V5.75c.82-.49 1.61-1.024 2.372-1.601.533-.411 1.058-.875 1.566-1.312v.586l1.312 1.312ZM4.72 9.97H2.75a.219.219 0 0 1-.219-.219v-3.5a.219.219 0 0 1 .219-.219h1.969V9.97Z"></path><path d="M14.633 6.058 12.69 8l1.943 1.943-.928.927-1.943-1.942L9.82 10.87l-.928-.927L10.835 8 8.892 6.058l.928-.928 1.942 1.943 1.943-1.943.928.928Z"></path></svg>';
 
 export class IconSoundOff extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSoundOff extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--soundOff', '', null, 'IconSoundOff');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--soundOff', '', null, 'IconSoundOff');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--soundOff');
         this.root.append(svg);
     }

package/icons/IconSoundOffLarge.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--soundOffLarge"><path d="M20.375 22.79v3.658a48.52 48.52 0 0 0-3.841-3.264 48.651 48.651 0 0 0-4.909-3.308v-7.752c1.703-1 3.343-2.105 4.909-3.308a48.518 48.518 0 0 0 3.841-3.264v3.754l.508.517 1.242 1.233V3.75h-2.398l-.227.245a48.276 48.276 0 0 1-4.008 3.439 49.96 49.96 0 0 1-4.987 3.316H7.25a2.625 2.625 0 0 0-2.625 2.625v5.25A2.625 2.625 0 0 0 7.25 21.25h3.255a48.311 48.311 0 0 1 8.995 6.755l.254.245h2.371v-7.21l-1.75 1.75Zm-10.5-3.29H7.25a.875.875 0 0 1-.875-.875v-5.25a.875.875 0 0 1 .875-.875h2.625v7Z"></path><path d="M28.399 12.246 24.645 16l3.754 3.754-1.234 1.242-3.762-3.762-3.754 3.762-1.234-1.242L22.169 16l-3.754-3.754 1.234-1.242 3.753 3.762 3.763-3.762 1.234 1.242Z"></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--soundOffLarge"><path d="M20.375 22.79v3.658a48.52 48.52 0 0 0-3.841-3.264 48.651 48.651 0 0 0-4.909-3.308v-7.752c1.703-1 3.343-2.105 4.909-3.308a48.518 48.518 0 0 0 3.841-3.264v3.754l.508.517 1.242 1.233V3.75h-2.398l-.227.245a48.276 48.276 0 0 1-4.008 3.439 49.96 49.96 0 0 1-4.987 3.316H7.25a2.625 2.625 0 0 0-2.625 2.625v5.25A2.625 2.625 0 0 0 7.25 21.25h3.255a48.311 48.311 0 0 1 8.995 6.755l.254.245h2.371v-7.21l-1.75 1.75Zm-10.5-3.29H7.25a.875.875 0 0 1-.875-.875v-5.25a.875.875 0 0 1 .875-.875h2.625v7Z"></path><path d="M28.399 12.246 24.645 16l3.754 3.754-1.234 1.242-3.762-3.762-3.754 3.762-1.234-1.242L22.169 16l-3.754-3.754 1.234-1.242 3.753 3.762 3.763-3.762 1.234 1.242Z"></path></svg>';
 
 export class IconSoundOffLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSoundOffLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--soundOffLarge', '', null, 'IconSoundOffLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--soundOffLarge', '', null, 'IconSoundOffLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--soundOffLarge');
         this.root.append(svg);
     }

package/icons/IconSoundOn.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--soundOn"><path d="m11.5 1.219-.193.183A21.624 21.624 0 0 1 9.348 3.1a23.625 23.625 0 0 1-2.406 1.619H4.5A1.54 1.54 0 0 0 2.969 6.25v3.5A1.54 1.54 0 0 0 4.5 11.281h2.441c.837.487 1.64 1.028 2.407 1.619a22.87 22.87 0 0 1 1.986 1.697l.192.184h1.505V1.22H11.5ZM4.281 9.75v-3.5a.219.219 0 0 1 .219-.219h1.969V9.97H4.5a.219.219 0 0 1-.219-.219Zm7.438 3.412c-.508-.463-1.033-.875-1.566-1.312a26.812 26.812 0 0 0-2.372-1.601V5.75c.82-.49 1.61-1.024 2.372-1.601.533-.411 1.058-.875 1.566-1.313v10.325Z"></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--soundOn"><path d="m11.5 1.219-.193.183A21.624 21.624 0 0 1 9.348 3.1a23.625 23.625 0 0 1-2.406 1.619H4.5A1.54 1.54 0 0 0 2.969 6.25v3.5A1.54 1.54 0 0 0 4.5 11.281h2.441c.837.487 1.64 1.028 2.407 1.619a22.87 22.87 0 0 1 1.986 1.697l.192.184h1.505V1.22H11.5ZM4.281 9.75v-3.5a.219.219 0 0 1 .219-.219h1.969V9.97H4.5a.219.219 0 0 1-.219-.219Zm7.438 3.412c-.508-.463-1.033-.875-1.566-1.312a26.812 26.812 0 0 0-2.372-1.601V5.75c.82-.49 1.61-1.024 2.372-1.601.533-.411 1.058-.875 1.566-1.313v10.325Z"></path></svg>';
 
 export class IconSoundOn extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSoundOn extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--soundOn', '', null, 'IconSoundOn');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--soundOn', '', null, 'IconSoundOn');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--soundOn');
         this.root.append(svg);
     }

package/icons/IconSoundOnFilled.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--soundOnFilled"><path d="m11.5 1.219-.193.183A21.624 21.624 0 0 1 9.348 3.1a23.625 23.625 0 0 1-2.406 1.619H4.5A1.54 1.54 0 0 0 2.969 6.25v3.5A1.54 1.54 0 0 0 4.5 11.281h2.441c.837.487 1.64 1.028 2.407 1.619a22.87 22.87 0 0 1 1.986 1.697l.192.184h1.505V1.22H11.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--soundOnFilled"><path d="m11.5 1.219-.193.183A21.624 21.624 0 0 1 9.348 3.1a23.625 23.625 0 0 1-2.406 1.619H4.5A1.54 1.54 0 0 0 2.969 6.25v3.5A1.54 1.54 0 0 0 4.5 11.281h2.441c.837.487 1.64 1.028 2.407 1.619a22.87 22.87 0 0 1 1.986 1.697l.192.184h1.505V1.22H11.5Z"></path></svg>';
 
 export class IconSoundOnFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSoundOnFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--soundOnFilled', '', null, 'IconSoundOnFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--soundOnFilled', '', null, 'IconSoundOnFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--soundOnFilled');
         this.root.append(svg);
     }

package/icons/IconSoundOnFilledLarge.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--soundOnFilledLarge"><path d="M21.688 3.75h-2.39l-.253.245a49.875 49.875 0 0 1-4.016 3.439 48.477 48.477 0 0 1-4.961 3.316H6.813a2.625 2.625 0 0 0-2.625 2.625v5.25a2.625 2.625 0 0 0 2.625 2.625h3.255a47.09 47.09 0 0 1 4.96 3.316 48.293 48.293 0 0 1 4.008 3.439l.254.245h2.398V3.75Z"></path><path d="M23.438 10.129v1.864a4.375 4.375 0 0 1 0 8.014v1.864a6.125 6.125 0 0 0 0-11.742Z"></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--soundOnFilledLarge"><path d="M21.688 3.75h-2.39l-.253.245a49.875 49.875 0 0 1-4.016 3.439 48.477 48.477 0 0 1-4.961 3.316H6.813a2.625 2.625 0 0 0-2.625 2.625v5.25a2.625 2.625 0 0 0 2.625 2.625h3.255a47.09 47.09 0 0 1 4.96 3.316 48.293 48.293 0 0 1 4.008 3.439l.254.245h2.398V3.75Z"></path><path d="M23.438 10.129v1.864a4.375 4.375 0 0 1 0 8.014v1.864a6.125 6.125 0 0 0 0-11.742Z"></path></svg>';
 
 export class IconSoundOnFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSoundOnFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--soundOnFilledLarge', '', null, 'IconSoundOnFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--soundOnFilledLarge', '', null, 'IconSoundOnFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--soundOnFilledLarge');
         this.root.append(svg);
     }

package/icons/IconSoundOnLarge.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--soundOnLarge"><path d="M18.625 3.995a48.276 48.276 0 0 1-4.008 3.439A49.96 49.96 0 0 1 9.63 10.75H6.375a2.625 2.625 0 0 0-2.625 2.625v5.25a2.625 2.625 0 0 0 2.625 2.625H9.63a48.311 48.311 0 0 1 8.995 6.755l.254.245h2.371V3.75h-2.398l-.227.245ZM5.5 18.625v-5.25a.875.875 0 0 1 .875-.875H9v7H6.375a.875.875 0 0 1-.875-.875Zm14 7.823a48.503 48.503 0 0 0-3.841-3.264 48.638 48.638 0 0 0-4.909-3.308v-7.752c1.703-1 3.343-2.105 4.909-3.308A48.502 48.502 0 0 0 19.5 5.552v20.896ZM27.375 16A6.125 6.125 0 0 1 23 21.871v-1.863a4.375 4.375 0 0 0 0-8.015v-1.864A6.125 6.125 0 0 1 27.375 16Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--soundOnLarge"><path d="M18.625 3.995a48.276 48.276 0 0 1-4.008 3.439A49.96 49.96 0 0 1 9.63 10.75H6.375a2.625 2.625 0 0 0-2.625 2.625v5.25a2.625 2.625 0 0 0 2.625 2.625H9.63a48.311 48.311 0 0 1 8.995 6.755l.254.245h2.371V3.75h-2.398l-.227.245ZM5.5 18.625v-5.25a.875.875 0 0 1 .875-.875H9v7H6.375a.875.875 0 0 1-.875-.875Zm14 7.823a48.503 48.503 0 0 0-3.841-3.264 48.638 48.638 0 0 0-4.909-3.308v-7.752c1.703-1 3.343-2.105 4.909-3.308A48.502 48.502 0 0 0 19.5 5.552v20.896ZM27.375 16A6.125 6.125 0 0 1 23 21.871v-1.863a4.375 4.375 0 0 0 0-8.015v-1.864A6.125 6.125 0 0 1 27.375 16Z"></path></svg>';
 
 export class IconSoundOnLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSoundOnLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--soundOnLarge', '', null, 'IconSoundOnLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--soundOnLarge', '', null, 'IconSoundOnLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--soundOnLarge');
         this.root.append(svg);
     }

package/icons/IconSpicy.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--spicy"><path d="M4.106 13.758a3.036 3.036 0 0 1-2.625-1.138l-.429-.682.762-.29c2.275-.874 3.5-3.22 4.506-5.25a12.959 12.959 0 0 1 1.96-3.15 3.5 3.5 0 0 1 5.075 0 3.71 3.71 0 0 1 0 5.146c-1.855 1.82-5.154 4.287-7.201 4.987a6.38 6.38 0 0 1-2.048.377Zm-.761-1.383c.8.175 1.632.102 2.389-.21 1.75-.612 5.005-2.992 6.676-4.707a2.389 2.389 0 0 0 0-3.317 2.275 2.275 0 0 0-3.194 0 12.25 12.25 0 0 0-1.75 2.835c-.918 1.838-2.091 4.104-4.121 5.399Z"></path><path d="m13.145 3.783-1.085-.736A3.789 3.789 0 0 1 15 1.22V2.53a2.538 2.538 0 0 0-1.855 1.252Z"></path><path d="M13.136 6.74a3.631 3.631 0 0 1-3.631-3.631 1.75 1.75 0 0 1 0-.403l1.277.298-.638-.149.639.14v.114A2.319 2.319 0 0 0 13.1 5.428c.146.014.292.014.438 0l.297 1.277a3.325 3.325 0 0 1-.7.035Z"></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--spicy"><path d="M4.106 13.758a3.036 3.036 0 0 1-2.625-1.138l-.429-.682.762-.29c2.275-.874 3.5-3.22 4.506-5.25a12.959 12.959 0 0 1 1.96-3.15 3.5 3.5 0 0 1 5.075 0 3.71 3.71 0 0 1 0 5.146c-1.855 1.82-5.154 4.287-7.201 4.987a6.38 6.38 0 0 1-2.048.377Zm-.761-1.383c.8.175 1.632.102 2.389-.21 1.75-.612 5.005-2.992 6.676-4.707a2.389 2.389 0 0 0 0-3.317 2.275 2.275 0 0 0-3.194 0 12.25 12.25 0 0 0-1.75 2.835c-.918 1.838-2.091 4.104-4.121 5.399Z"></path><path d="m13.145 3.783-1.085-.736A3.789 3.789 0 0 1 15 1.22V2.53a2.538 2.538 0 0 0-1.855 1.252Z"></path><path d="M13.136 6.74a3.631 3.631 0 0 1-3.631-3.631 1.75 1.75 0 0 1 0-.403l1.277.298-.638-.149.639.14v.114A2.319 2.319 0 0 0 13.1 5.428c.146.014.292.014.438 0l.297 1.277a3.325 3.325 0 0 1-.7.035Z"></path></svg>';
 
 export class IconSpicy extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSpicy extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--spicy', '', null, 'IconSpicy');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--spicy', '', null, 'IconSpicy');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--spicy');
         this.root.append(svg);
     }

package/icons/IconSpicyLarge.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--spicyLarge"><path d="M8.37 26.106c-3.168 0-4.375-1.829-4.48-1.934l-.586-.875 1.006-.385c4.279-1.662 6.44-6.037 8.4-9.843a23.407 23.407 0 0 1 3.5-5.67 6.126 6.126 0 0 1 8.794 0 6.44 6.44 0 0 1 0 8.942c-3.29 3.378-9.302 7.875-12.994 9.091a11.28 11.28 0 0 1-3.64.674Zm-2.118-2.231c.875.446 2.512.779 5.198-.131 3.404-1.164 9.222-5.495 12.311-8.663a4.672 4.672 0 0 0 0-6.492 4.376 4.376 0 0 0-6.282 0 22.226 22.226 0 0 0-3.212 5.25c-1.872 3.745-3.98 7.918-8.015 10.036Z"></path><path d="m22.921 11.109-1.592-.718c2.87-6.44 6.755-6.51 6.921-6.51v1.75c-.105 0-2.957.167-5.329 5.478Z"></path><path d="M25.056 12.806a6.011 6.011 0 0 1-6.002-6.002 2.77 2.77 0 0 1 .052-.63l1.706.385a2.003 2.003 0 0 0 0 .245 4.261 4.261 0 0 0 4.253 4.252c.277.004.553-.025.822-.087l.386 1.706a5.25 5.25 0 0 1-1.217.131Z"></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--spicyLarge"><path d="M8.37 26.106c-3.168 0-4.375-1.829-4.48-1.934l-.586-.875 1.006-.385c4.279-1.662 6.44-6.037 8.4-9.843a23.407 23.407 0 0 1 3.5-5.67 6.126 6.126 0 0 1 8.794 0 6.44 6.44 0 0 1 0 8.942c-3.29 3.378-9.302 7.875-12.994 9.091a11.28 11.28 0 0 1-3.64.674Zm-2.118-2.231c.875.446 2.512.779 5.198-.131 3.404-1.164 9.222-5.495 12.311-8.663a4.672 4.672 0 0 0 0-6.492 4.376 4.376 0 0 0-6.282 0 22.226 22.226 0 0 0-3.212 5.25c-1.872 3.745-3.98 7.918-8.015 10.036Z"></path><path d="m22.921 11.109-1.592-.718c2.87-6.44 6.755-6.51 6.921-6.51v1.75c-.105 0-2.957.167-5.329 5.478Z"></path><path d="M25.056 12.806a6.011 6.011 0 0 1-6.002-6.002 2.77 2.77 0 0 1 .052-.63l1.706.385a2.003 2.003 0 0 0 0 .245 4.261 4.261 0 0 0 4.253 4.252c.277.004.553-.025.822-.087l.386 1.706a5.25 5.25 0 0 1-1.217.131Z"></path></svg>';
 
 export class IconSpicyLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconSpicyLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--spicyLarge', '', null, 'IconSpicyLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--spicyLarge', '', null, 'IconSpicyLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--spicyLarge');
         this.root.append(svg);
     }