@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/icons/IconCloudDownload.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--cloudDownload"><g clip-path="url(#prefix__clip0_222_289)"><path d="M13.145 7.431A5.18 5.18 0 0 0 2.969 6.75 3.342 3.342 0 0 0 1 9.81a3.377 3.377 0 0 0 3.378 3.378h.796L3.756 11.77a2.065 2.065 0 0 1-1.053-3.175c.256-.353.62-.614 1.036-.745l.385-.114.061-.393a3.867 3.867 0 0 1 7.683.586v.516l.498.114a1.689 1.689 0 0 1 1.313 1.645 1.671 1.671 0 0 1-1.54 1.654l-1.321 1.33h1.19a2.992 2.992 0 0 0 1.128-5.758h.009Z"></path><path d="M10.214 10.091 8.656 11.65V7.125H7.344v4.524L5.786 10.09l-.927.928 2.406 2.397a1.032 1.032 0 0 0 1.47 0l2.406-2.397-.927-.928Z"></path></g><defs><clipPath id="prefix__clip0_222_289"><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--cloudDownload"><g clip-path="url(#prefix__clip0_222_289)"><path d="M13.145 7.431A5.18 5.18 0 0 0 2.969 6.75 3.342 3.342 0 0 0 1 9.81a3.377 3.377 0 0 0 3.378 3.378h.796L3.756 11.77a2.065 2.065 0 0 1-1.053-3.175c.256-.353.62-.614 1.036-.745l.385-.114.061-.393a3.867 3.867 0 0 1 7.683.586v.516l.498.114a1.689 1.689 0 0 1 1.313 1.645 1.671 1.671 0 0 1-1.54 1.654l-1.321 1.33h1.19a2.992 2.992 0 0 0 1.128-5.758h.009Z"></path><path d="M10.214 10.091 8.656 11.65V7.125H7.344v4.524L5.786 10.09l-.927.928 2.406 2.397a1.032 1.032 0 0 0 1.47 0l2.406-2.397-.927-.928Z"></path></g><defs><clipPath id="prefix__clip0_222_289"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconCloudDownload extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCloudDownload extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--cloudDownload', '', null, 'IconCloudDownload');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--cloudDownload', '', null, 'IconCloudDownload');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--cloudDownload');
         this.root.append(svg);
     }

package/icons/IconCloudDownloadLarge.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--cloudDownloadLarge"><path d="M26.019 14.731A10.045 10.045 0 0 0 6.2 13.375a6.309 6.309 0 0 0-3.938 5.863 6.387 6.387 0 0 0 6.388 6.387h15.487a5.609 5.609 0 0 0 5.6-5.6 5.68 5.68 0 0 0-3.718-5.294Zm-1.881 9.144H8.65a4.646 4.646 0 0 1-4.638-4.637 4.585 4.585 0 0 1 3.247-4.375A4.137 4.137 0 0 1 8.65 14.6c.453 0 .904.065 1.339.193l.525-1.672a6.555 6.555 0 0 0-2.389-.254 8.304 8.304 0 0 1 16.152 2.538v.691l.674.158a3.894 3.894 0 0 1 3.037 3.771 3.85 3.85 0 0 1-3.85 3.85Zm-4.822-8.059 1.243 1.243-3.413 3.412a1.505 1.505 0 0 1-1.041.429 1.46 1.46 0 0 1-1.033-.429l-3.447-3.412 1.234-1.243 2.336 2.336v-6.527h1.75v6.527l2.371-2.336Z"></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--cloudDownloadLarge"><path d="M26.019 14.731A10.045 10.045 0 0 0 6.2 13.375a6.309 6.309 0 0 0-3.938 5.863 6.387 6.387 0 0 0 6.388 6.387h15.487a5.609 5.609 0 0 0 5.6-5.6 5.68 5.68 0 0 0-3.718-5.294Zm-1.881 9.144H8.65a4.646 4.646 0 0 1-4.638-4.637 4.585 4.585 0 0 1 3.247-4.375A4.137 4.137 0 0 1 8.65 14.6c.453 0 .904.065 1.339.193l.525-1.672a6.555 6.555 0 0 0-2.389-.254 8.304 8.304 0 0 1 16.152 2.538v.691l.674.158a3.894 3.894 0 0 1 3.037 3.771 3.85 3.85 0 0 1-3.85 3.85Zm-4.822-8.059 1.243 1.243-3.413 3.412a1.505 1.505 0 0 1-1.041.429 1.46 1.46 0 0 1-1.033-.429l-3.447-3.412 1.234-1.243 2.336 2.336v-6.527h1.75v6.527l2.371-2.336Z"></path></svg>';
 
 export class IconCloudDownloadLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCloudDownloadLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--cloudDownloadLarge', '', null, 'IconCloudDownloadLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--cloudDownloadLarge', '', null, 'IconCloudDownloadLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--cloudDownloadLarge');
         this.root.append(svg);
     }

package/icons/IconCloudError.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--cloudError"><g clip-path="url(#prefix__clip0_15_700)"><path d="M13.145 7.431A5.18 5.18 0 0 0 2.969 6.75 3.342 3.342 0 0 0 1 9.81a3.378 3.378 0 0 0 3.378 3.378h7.638a2.993 2.993 0 0 0 1.129-5.758Zm-1.129 4.445H4.378a2.065 2.065 0 0 1-2.065-2.065 2.039 2.039 0 0 1 1.426-1.96l.385-.113.061-.394a3.867 3.867 0 0 1 7.683.586v.516l.498.114a1.68 1.68 0 0 1-.358 3.316h.008Zm-1.802-4.751L8.928 8.438l1.286 1.312-.928.875L8 9.365l-1.286 1.26-.928-.875 1.287-1.312-1.287-1.313.928-.875L8 7.51l1.286-1.26.928.875Z"></path></g><defs><clipPath id="prefix__clip0_15_700"><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--cloudError"><g clip-path="url(#prefix__clip0_15_700)"><path d="M13.145 7.431A5.18 5.18 0 0 0 2.969 6.75 3.342 3.342 0 0 0 1 9.81a3.378 3.378 0 0 0 3.378 3.378h7.638a2.993 2.993 0 0 0 1.129-5.758Zm-1.129 4.445H4.378a2.065 2.065 0 0 1-2.065-2.065 2.039 2.039 0 0 1 1.426-1.96l.385-.113.061-.394a3.867 3.867 0 0 1 7.683.586v.516l.498.114a1.68 1.68 0 0 1-.358 3.316h.008Zm-1.802-4.751L8.928 8.438l1.286 1.312-.928.875L8 9.365l-1.286 1.26-.928-.875 1.287-1.312-1.287-1.313.928-.875L8 7.51l1.286-1.26.928.875Z"></path></g><defs><clipPath id="prefix__clip0_15_700"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconCloudError extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCloudError extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--cloudError', '', null, 'IconCloudError');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--cloudError', '', null, 'IconCloudError');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--cloudError');
         this.root.append(svg);
     }

package/icons/IconCloudErrorLarge.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--cloudErrorLarge"><path d="M26.019 14.731A10.045 10.045 0 0 0 6.2 13.375a6.309 6.309 0 0 0-3.938 5.863 6.387 6.387 0 0 0 6.388 6.387h15.487a5.609 5.609 0 0 0 5.6-5.6 5.68 5.68 0 0 0-3.718-5.294Zm-1.881 9.144H8.65a4.646 4.646 0 0 1-4.638-4.637 4.585 4.585 0 0 1 3.247-4.375A4.137 4.137 0 0 1 8.65 14.6c.453 0 .904.065 1.339.193l.525-1.672a6.572 6.572 0 0 0-2.389-.254 8.304 8.304 0 0 1 16.152 2.538v.691l.674.158a3.894 3.894 0 0 1 3.037 3.771 3.85 3.85 0 0 1-3.85 3.85Zm-4.454-9.879-2.45 2.441 2.45 2.442-1.243 1.242L16 17.671l-2.441 2.45-1.243-1.242 2.45-2.442-2.45-2.44 1.243-1.243L16 15.204l2.441-2.45 1.243 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--cloudErrorLarge"><path d="M26.019 14.731A10.045 10.045 0 0 0 6.2 13.375a6.309 6.309 0 0 0-3.938 5.863 6.387 6.387 0 0 0 6.388 6.387h15.487a5.609 5.609 0 0 0 5.6-5.6 5.68 5.68 0 0 0-3.718-5.294Zm-1.881 9.144H8.65a4.646 4.646 0 0 1-4.638-4.637 4.585 4.585 0 0 1 3.247-4.375A4.137 4.137 0 0 1 8.65 14.6c.453 0 .904.065 1.339.193l.525-1.672a6.572 6.572 0 0 0-2.389-.254 8.304 8.304 0 0 1 16.152 2.538v.691l.674.158a3.894 3.894 0 0 1 3.037 3.771 3.85 3.85 0 0 1-3.85 3.85Zm-4.454-9.879-2.45 2.441 2.45 2.442-1.243 1.242L16 17.671l-2.441 2.45-1.243-1.242 2.45-2.442-2.45-2.44 1.243-1.243L16 15.204l2.441-2.45 1.243 1.242Z"></path></svg>';
 
 export class IconCloudErrorLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCloudErrorLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--cloudErrorLarge', '', null, 'IconCloudErrorLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--cloudErrorLarge', '', null, 'IconCloudErrorLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--cloudErrorLarge');
         this.root.append(svg);
     }

package/icons/IconCloudLarge.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--cloudLarge"><path d="M24.137 25.625H8.65a6.388 6.388 0 0 1-6.388-6.387A6.309 6.309 0 0 1 6.2 13.375a10.045 10.045 0 0 1 19.819 1.383 5.679 5.679 0 0 1 3.719 5.267 5.61 5.61 0 0 1-5.6 5.6ZM8.65 14.6a4.14 4.14 0 0 0-1.4.228 4.585 4.585 0 0 0-3.246 4.375 4.646 4.646 0 0 0 4.646 4.672h15.487a3.85 3.85 0 0 0 3.85-3.85 3.894 3.894 0 0 0-3.01-3.771l-.673-.158v-.691a8.304 8.304 0 0 0-16.179-2.537c.8-.062 1.603.024 2.371.253l-.525 1.671A4.762 4.762 0 0 0 8.65 14.6Z"></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--cloudLarge"><path d="M24.137 25.625H8.65a6.388 6.388 0 0 1-6.388-6.387A6.309 6.309 0 0 1 6.2 13.375a10.045 10.045 0 0 1 19.819 1.383 5.679 5.679 0 0 1 3.719 5.267 5.61 5.61 0 0 1-5.6 5.6ZM8.65 14.6a4.14 4.14 0 0 0-1.4.228 4.585 4.585 0 0 0-3.246 4.375 4.646 4.646 0 0 0 4.646 4.672h15.487a3.85 3.85 0 0 0 3.85-3.85 3.894 3.894 0 0 0-3.01-3.771l-.673-.158v-.691a8.304 8.304 0 0 0-16.179-2.537c.8-.062 1.603.024 2.371.253l-.525 1.671A4.762 4.762 0 0 0 8.65 14.6Z"></path></svg>';
 
 export class IconCloudLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCloudLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--cloudLarge', '', null, 'IconCloudLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--cloudLarge', '', null, 'IconCloudLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--cloudLarge');
         this.root.append(svg);
     }

package/icons/IconCloudSuccess.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--cloudSuccess"><g clip-path="url(#prefix__clip0_15_608)"><path d="M12.016 13.189H4.378A3.378 3.378 0 0 1 1 9.81 3.342 3.342 0 0 1 2.969 6.75a5.18 5.18 0 0 1 10.176.682 2.992 2.992 0 0 1-1.129 5.758ZM8 4.124a3.859 3.859 0 0 0-3.815 3.22l-.061.394-.385.113a2.039 2.039 0 0 0-1.426 1.96 2.065 2.065 0 0 0 2.065 2.065h7.638a1.68 1.68 0 0 0 .359-3.316l-.499-.114V7.93A3.885 3.885 0 0 0 8 4.124Zm-.289 5.985 2.826-3.054-.962-.875L7.02 8.875 6.189 8l-.989.875 1.129 1.269a.947.947 0 0 0 .691.297.92.92 0 0 0 .691-.332Z"></path></g><defs><clipPath id="prefix__clip0_15_608"><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--cloudSuccess"><g clip-path="url(#prefix__clip0_15_608)"><path d="M12.016 13.189H4.378A3.378 3.378 0 0 1 1 9.81 3.342 3.342 0 0 1 2.969 6.75a5.18 5.18 0 0 1 10.176.682 2.992 2.992 0 0 1-1.129 5.758ZM8 4.124a3.859 3.859 0 0 0-3.815 3.22l-.061.394-.385.113a2.039 2.039 0 0 0-1.426 1.96 2.065 2.065 0 0 0 2.065 2.065h7.638a1.68 1.68 0 0 0 .359-3.316l-.499-.114V7.93A3.885 3.885 0 0 0 8 4.124Zm-.289 5.985 2.826-3.054-.962-.875L7.02 8.875 6.189 8l-.989.875 1.129 1.269a.947.947 0 0 0 .691.297.92.92 0 0 0 .691-.332Z"></path></g><defs><clipPath id="prefix__clip0_15_608"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconCloudSuccess extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCloudSuccess extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--cloudSuccess', '', null, 'IconCloudSuccess');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--cloudSuccess', '', null, 'IconCloudSuccess');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--cloudSuccess');
         this.root.append(svg);
     }

package/icons/IconCloudSuccessLarge.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--cloudSuccessLarge"><path d="M24.137 25.625H8.65a6.388 6.388 0 0 1-6.388-6.387A6.309 6.309 0 0 1 6.2 13.375a10.045 10.045 0 0 1 19.819 1.383 5.679 5.679 0 0 1 3.719 5.267 5.61 5.61 0 0 1-5.6 5.6ZM8.65 14.6a4.14 4.14 0 0 0-1.4.228 4.585 4.585 0 0 0-3.246 4.375 4.646 4.646 0 0 0 4.646 4.672h15.487a3.85 3.85 0 0 0 3.85-3.85 3.894 3.894 0 0 0-3.01-3.771l-.673-.158v-.691a8.304 8.304 0 0 0-16.179-2.537c.8-.062 1.603.024 2.371.253l-.525 1.671A4.762 4.762 0 0 0 8.65 14.6Zm6.125 5.775a1.453 1.453 0 0 0 1.05-.455l5.512-5.95-1.286-1.19-5.25 5.688-1.925-2.17-1.312 1.155 2.196 2.467a1.417 1.417 0 0 0 1.041.455h-.026Z"></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--cloudSuccessLarge"><path d="M24.137 25.625H8.65a6.388 6.388 0 0 1-6.388-6.387A6.309 6.309 0 0 1 6.2 13.375a10.045 10.045 0 0 1 19.819 1.383 5.679 5.679 0 0 1 3.719 5.267 5.61 5.61 0 0 1-5.6 5.6ZM8.65 14.6a4.14 4.14 0 0 0-1.4.228 4.585 4.585 0 0 0-3.246 4.375 4.646 4.646 0 0 0 4.646 4.672h15.487a3.85 3.85 0 0 0 3.85-3.85 3.894 3.894 0 0 0-3.01-3.771l-.673-.158v-.691a8.304 8.304 0 0 0-16.179-2.537c.8-.062 1.603.024 2.371.253l-.525 1.671A4.762 4.762 0 0 0 8.65 14.6Zm6.125 5.775a1.453 1.453 0 0 0 1.05-.455l5.512-5.95-1.286-1.19-5.25 5.688-1.925-2.17-1.312 1.155 2.196 2.467a1.417 1.417 0 0 0 1.041.455h-.026Z"></path></svg>';
 
 export class IconCloudSuccessLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCloudSuccessLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--cloudSuccessLarge', '', null, 'IconCloudSuccessLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--cloudSuccessLarge', '', null, 'IconCloudSuccessLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--cloudSuccessLarge');
         this.root.append(svg);
     }

package/icons/IconCloudUpload.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--cloudUpload"><g clip-path="url(#prefix__clip0_15_723)"><path d="M15 10.205a2.983 2.983 0 0 1-2.984 2.984h-1.942v-1.313h1.942a1.679 1.679 0 0 0 .359-3.316l-.499-.114V7.93a3.868 3.868 0 0 0-7.682-.586l-.07.393-.385.123a2.021 2.021 0 0 0-1.426 1.951 2.065 2.065 0 0 0 2.065 2.065h1.548v1.313H4.378a3.377 3.377 0 0 1-1.41-6.449 5.189 5.189 0 0 1 10.186.691A2.983 2.983 0 0 1 15 10.205Zm-4.786.332.927-.927-2.406-2.398a1.033 1.033 0 0 0-1.47 0L4.859 9.61l.927.928L7.344 8.98v4.27h1.312V8.98l1.558 1.557Z"></path></g><defs><clipPath id="prefix__clip0_15_723"><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--cloudUpload"><g clip-path="url(#prefix__clip0_15_723)"><path d="M15 10.205a2.983 2.983 0 0 1-2.984 2.984h-1.942v-1.313h1.942a1.679 1.679 0 0 0 .359-3.316l-.499-.114V7.93a3.868 3.868 0 0 0-7.682-.586l-.07.393-.385.123a2.021 2.021 0 0 0-1.426 1.951 2.065 2.065 0 0 0 2.065 2.065h1.548v1.313H4.378a3.377 3.377 0 0 1-1.41-6.449 5.189 5.189 0 0 1 10.186.691A2.983 2.983 0 0 1 15 10.205Zm-4.786.332.927-.927-2.406-2.398a1.033 1.033 0 0 0-1.47 0L4.859 9.61l.927.928L7.344 8.98v4.27h1.312V8.98l1.558 1.557Z"></path></g><defs><clipPath id="prefix__clip0_15_723"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconCloudUpload extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCloudUpload extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--cloudUpload', '', null, 'IconCloudUpload');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--cloudUpload', '', null, 'IconCloudUpload');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--cloudUpload');
         this.root.append(svg);
     }

package/icons/IconCloudUploadLarge.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--cloudUploadLarge"><path d="M26.019 14.731A10.045 10.045 0 0 0 6.2 13.375a6.309 6.309 0 0 0-3.938 5.863 6.387 6.387 0 0 0 6.388 6.387h15.487a5.609 5.609 0 0 0 5.6-5.6 5.68 5.68 0 0 0-3.718-5.294Zm-1.881 9.144H8.65a4.646 4.646 0 0 1-4.638-4.637 4.585 4.585 0 0 1 3.247-4.375A4.137 4.137 0 0 1 8.65 14.6c.453 0 .904.065 1.339.193l.525-1.672a6.555 6.555 0 0 0-2.389-.254 8.304 8.304 0 0 1 16.152 2.538v.691l.674.158a3.894 3.894 0 0 1 3.037 3.771 3.85 3.85 0 0 1-3.85 3.85Zm-7-11.821 3.412 3.412-1.234 1.234-2.336-2.336V20.9h-1.75v-6.536L12.894 16.7l-1.269-1.234 3.412-3.412a1.471 1.471 0 0 1 2.11 0h-.01Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--cloudUploadLarge"><path d="M26.019 14.731A10.045 10.045 0 0 0 6.2 13.375a6.309 6.309 0 0 0-3.938 5.863 6.387 6.387 0 0 0 6.388 6.387h15.487a5.609 5.609 0 0 0 5.6-5.6 5.68 5.68 0 0 0-3.718-5.294Zm-1.881 9.144H8.65a4.646 4.646 0 0 1-4.638-4.637 4.585 4.585 0 0 1 3.247-4.375A4.137 4.137 0 0 1 8.65 14.6c.453 0 .904.065 1.339.193l.525-1.672a6.555 6.555 0 0 0-2.389-.254 8.304 8.304 0 0 1 16.152 2.538v.691l.674.158a3.894 3.894 0 0 1 3.037 3.771 3.85 3.85 0 0 1-3.85 3.85Zm-7-11.821 3.412 3.412-1.234 1.234-2.336-2.336V20.9h-1.75v-6.536L12.894 16.7l-1.269-1.234 3.412-3.412a1.471 1.471 0 0 1 2.11 0h-.01Z"></path></svg>';
 
 export class IconCloudUploadLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCloudUploadLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--cloudUploadLarge', '', null, 'IconCloudUploadLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--cloudUploadLarge', '', null, 'IconCloudUploadLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--cloudUploadLarge');
         this.root.append(svg);
     }

package/icons/IconCo.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--co"><path d="m14.466 9.094-1.216.437c.257.627.282 1.325.07 1.969 0 .053-.131.193-.534.193-.402 0-.534-.272-.875-.875l-.114-.193-.06-.105c-.193-.315-.368-.683-.552-1.059a4.611 4.611 0 0 0 2.625-1.864 1.488 1.488 0 0 0 .053-1.19 1.75 1.75 0 0 0-1.584-.936 2.16 2.16 0 0 1-.543-.096c0-.088.044-.228.061-.324a1.75 1.75 0 0 0-.62-2.047 2.363 2.363 0 0 0-2.302.157c-.647.28-.875.315-.945.201a2.319 2.319 0 0 0-1.846-.945 1.864 1.864 0 0 0-1.453.744c-.726 1.006-1.163.928-1.662.875a1.461 1.461 0 0 0-1.208.158 1.488 1.488 0 0 0-.63 1.032c.024.935.367 1.834.972 2.546a7.516 7.516 0 0 0-.875 3.5 1.75 1.75 0 0 0 .463 1.27 1.539 1.539 0 0 0 1.12.49h9.975a1.854 1.854 0 0 0 1.61-.753c.779-1.111.14-2.975.07-3.185ZM2.461 5.252a1.4 1.4 0 0 1 .272 0c.875.15 1.846.184 2.966-1.365a.551.551 0 0 1 .429-.2 1.067 1.067 0 0 1 .813.463c.744.919 1.75.464 2.477.166.42-.175.875-.367 1.058-.245.184.123.166.105.044.656a1.497 1.497 0 0 0 .271 1.54c.375.302.84.468 1.322.473.176.014.35.052.516.114a.15.15 0 0 1 0 .148 3.71 3.71 0 0 1-2.004 1.278 4.375 4.375 0 0 0-4.13-2.686 6.352 6.352 0 0 0-1.75.227 4.419 4.419 0 0 0-1.75.875 2.564 2.564 0 0 1-.56-1.321c.009-.07.035-.105.026-.123Zm.342 6.467a.226.226 0 0 1-.167-.079.41.41 0 0 1-.105-.306c.114-2.459.893-3.798 2.538-4.209.465-.121.945-.18 1.426-.175 2.039 0 2.678 1.365 3.421 2.94.216.502.467.987.753 1.452l.122.21c0 .07.07.14.114.21l-8.102-.043Z"></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--co"><path d="m14.466 9.094-1.216.437c.257.627.282 1.325.07 1.969 0 .053-.131.193-.534.193-.402 0-.534-.272-.875-.875l-.114-.193-.06-.105c-.193-.315-.368-.683-.552-1.059a4.611 4.611 0 0 0 2.625-1.864 1.488 1.488 0 0 0 .053-1.19 1.75 1.75 0 0 0-1.584-.936 2.16 2.16 0 0 1-.543-.096c0-.088.044-.228.061-.324a1.75 1.75 0 0 0-.62-2.047 2.363 2.363 0 0 0-2.302.157c-.647.28-.875.315-.945.201a2.319 2.319 0 0 0-1.846-.945 1.864 1.864 0 0 0-1.453.744c-.726 1.006-1.163.928-1.662.875a1.461 1.461 0 0 0-1.208.158 1.488 1.488 0 0 0-.63 1.032c.024.935.367 1.834.972 2.546a7.516 7.516 0 0 0-.875 3.5 1.75 1.75 0 0 0 .463 1.27 1.539 1.539 0 0 0 1.12.49h9.975a1.854 1.854 0 0 0 1.61-.753c.779-1.111.14-2.975.07-3.185ZM2.461 5.252a1.4 1.4 0 0 1 .272 0c.875.15 1.846.184 2.966-1.365a.551.551 0 0 1 .429-.2 1.067 1.067 0 0 1 .813.463c.744.919 1.75.464 2.477.166.42-.175.875-.367 1.058-.245.184.123.166.105.044.656a1.497 1.497 0 0 0 .271 1.54c.375.302.84.468 1.322.473.176.014.35.052.516.114a.15.15 0 0 1 0 .148 3.71 3.71 0 0 1-2.004 1.278 4.375 4.375 0 0 0-4.13-2.686 6.352 6.352 0 0 0-1.75.227 4.419 4.419 0 0 0-1.75.875 2.564 2.564 0 0 1-.56-1.321c.009-.07.035-.105.026-.123Zm.342 6.467a.226.226 0 0 1-.167-.079.41.41 0 0 1-.105-.306c.114-2.459.893-3.798 2.538-4.209.465-.121.945-.18 1.426-.175 2.039 0 2.678 1.365 3.421 2.94.216.502.467.987.753 1.452l.122.21c0 .07.07.14.114.21l-8.102-.043Z"></path></svg>';
 
 export class IconCo extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCo extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--co', '', null, 'IconCo');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--co', '', null, 'IconCo');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--co');
         this.root.append(svg);
     }

package/icons/IconComponents.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--components"><g clip-path="url(#prefix__clip0_7066_3730)"><path d="M11.903 5.025 8.928 8l2.975 2.975L14.878 8l-2.975-2.975ZM10.783 8l1.12-1.12L13.023 8l-1.12 1.12L10.783 8Z"></path><path d="M10.975 4.098 8 1.123 5.025 4.098 8 7.073l2.975-2.975ZM8 2.978l1.12 1.12L8 5.218l-1.12-1.12L8 2.978Z"></path><path d="M5.025 11.903 8 14.878l2.975-2.975L8 8.928l-2.975 2.975ZM8 13.023l-1.12-1.12L8 10.783l1.12 1.12L8 13.023Z"></path><path d="M4.098 5.025 1.123 8l2.975 2.975L7.073 8 4.098 5.025ZM2.978 8l1.12-1.12L5.218 8l-1.12 1.12L2.978 8Z"></path></g><defs><clipPath id="prefix__clip0_7066_3730"><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--components"><g clip-path="url(#prefix__clip0_7066_3730)"><path d="M11.903 5.025 8.928 8l2.975 2.975L14.878 8l-2.975-2.975ZM10.783 8l1.12-1.12L13.023 8l-1.12 1.12L10.783 8Z"></path><path d="M10.975 4.098 8 1.123 5.025 4.098 8 7.073l2.975-2.975ZM8 2.978l1.12 1.12L8 5.218l-1.12-1.12L8 2.978Z"></path><path d="M5.025 11.903 8 14.878l2.975-2.975L8 8.928l-2.975 2.975ZM8 13.023l-1.12-1.12L8 10.783l1.12 1.12L8 13.023Z"></path><path d="M4.098 5.025 1.123 8l2.975 2.975L7.073 8 4.098 5.025ZM2.978 8l1.12-1.12L5.218 8l-1.12 1.12L2.978 8Z"></path></g><defs><clipPath id="prefix__clip0_7066_3730"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconComponents extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconComponents extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--components', '', null, 'IconComponents');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--components', '', null, 'IconComponents');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--components');
         this.root.append(svg);
     }

package/icons/IconComponentsLarge.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--componentsLarge"><path d="M21.539 9.21 16 3.662 10.453 9.21 16 14.757l5.548-5.547h-.01ZM15.99 6.139l3.072 3.071-3.072 3.071-3.07-3.071 3.07-3.071Z"></path><path d="M22.79 10.453 17.243 16l5.547 5.547L28.338 16l-5.548-5.547ZM19.72 16l3.071-3.071L25.861 16l-3.07 3.071L19.718 16Z"></path><path d="M9.21 10.444 3.663 15.99 9.21 21.54l5.548-5.548-5.548-5.547ZM6.14 15.99 9.21 12.92l3.071 3.071-3.07 3.072-3.072-3.072Z"></path><path d="M10.453 22.781 16 28.33l5.548-5.548L16 17.234l-5.547 5.547ZM16 25.853 12.93 22.78 16 19.71l3.071 3.071-3.07 3.072Z"></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--componentsLarge"><path d="M21.539 9.21 16 3.662 10.453 9.21 16 14.757l5.548-5.547h-.01ZM15.99 6.139l3.072 3.071-3.072 3.071-3.07-3.071 3.07-3.071Z"></path><path d="M22.79 10.453 17.243 16l5.547 5.547L28.338 16l-5.548-5.547ZM19.72 16l3.071-3.071L25.861 16l-3.07 3.071L19.718 16Z"></path><path d="M9.21 10.444 3.663 15.99 9.21 21.54l5.548-5.548-5.548-5.547ZM6.14 15.99 9.21 12.92l3.071 3.071-3.07 3.072-3.072-3.072Z"></path><path d="M10.453 22.781 16 28.33l5.548-5.548L16 17.234l-5.547 5.547ZM16 25.853 12.93 22.78 16 19.71l3.071 3.071-3.07 3.072Z"></path></svg>';
 
 export class IconComponentsLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconComponentsLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--componentsLarge', '', null, 'IconComponentsLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--componentsLarge', '', null, 'IconComponentsLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--componentsLarge');
         this.root.append(svg);
     }

package/icons/IconConsent.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--consent"><path d="M13.924 11.57v-7c0-.84-.691-1.531-1.531-1.531h-8.75c-.84 0-1.532.691-1.532 1.531v7h-.849v1.313h13.502V11.57h-.84Zm-10.5 0v-7c0-.122.096-.219.218-.219h8.75c.123 0 .22.097.22.22v7H3.423Z"></path><path d="m10.126 5.541-3.123 3.37-1.085-1.226-.98.875L5.97 9.724l.306.341a.993.993 0 0 0 1.453 0l.315-.341 3.045-3.281-.963-.893v-.009Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--consent"><path d="M13.924 11.57v-7c0-.84-.691-1.531-1.531-1.531h-8.75c-.84 0-1.532.691-1.532 1.531v7h-.849v1.313h13.502V11.57h-.84Zm-10.5 0v-7c0-.122.096-.219.218-.219h8.75c.123 0 .22.097.22.22v7H3.423Z"></path><path d="m10.126 5.541-3.123 3.37-1.085-1.226-.98.875L5.97 9.724l.306.341a.993.993 0 0 0 1.453 0l.315-.341 3.045-3.281-.963-.893v-.009Z"></path></svg>';
 
 export class IconConsent extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconConsent extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--consent', '', null, 'IconConsent');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--consent', '', null, 'IconConsent');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--consent');
         this.root.append(svg);
     }

package/icons/IconConsentLarge.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--consentLarge"><path d="m14.04 18.616-2.494-2.809-1.312 1.164 2.66 3.002a1.537 1.537 0 0 0 2.257-.009l6.72-7.245-1.286-1.19-6.571 7.079.026.008Z"></path><path d="M27.375 23.543V9.332a2.633 2.633 0 0 0-2.625-2.625H7.25a2.633 2.633 0 0 0-2.625 2.625v14.21h-1.75v1.75h26.25v-1.75h-1.75Zm-1.75 0H6.375V9.332c0-.482.394-.875.875-.875h17.5c.481 0 .875.393.875.875v14.21Z"></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--consentLarge"><path d="m14.04 18.616-2.494-2.809-1.312 1.164 2.66 3.002a1.537 1.537 0 0 0 2.257-.009l6.72-7.245-1.286-1.19-6.571 7.079.026.008Z"></path><path d="M27.375 23.543V9.332a2.633 2.633 0 0 0-2.625-2.625H7.25a2.633 2.633 0 0 0-2.625 2.625v14.21h-1.75v1.75h26.25v-1.75h-1.75Zm-1.75 0H6.375V9.332c0-.482.394-.875.875-.875h17.5c.481 0 .875.393.875.875v14.21Z"></path></svg>';
 
 export class IconConsentLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconConsentLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--consentLarge', '', null, 'IconConsentLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--consentLarge', '', null, 'IconConsentLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--consentLarge');
         this.root.append(svg);
     }

package/icons/IconConvenience.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--convenience"><path d="m13.075 12.655-.709-6.458h-.831v-1.96H8.62a1.7 1.7 0 0 0-1.417-1.61v-1.47H5.89v1.47A1.701 1.701 0 0 0 4.465 4.3v1.89H3.58l-.709 6.457a1.97 1.97 0 0 0 1.96 2.188h6.283a1.97 1.97 0 0 0 1.96-2.188v.009Zm-2.853-6.458H8.63V5.56h1.592v.638Zm-4.436-1.89c0-.218.175-.393.394-.393h.752c.22 0 .394.175.394.393v1.89H5.795v-1.89h-.009Zm5.819 9.004a.657.657 0 0 1-.49.219H4.832a.643.643 0 0 1-.49-.219.676.676 0 0 1-.166-.507l.586-5.294h6.432l.586 5.294a.643.643 0 0 1-.166.507h-.01Z"></path><path d="M7.956 9.514a.859.859 0 0 1-.857-.858H5.786a2.17 2.17 0 1 0 4.34 0H8.814a.859.859 0 0 1-.858.858Z"></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--convenience"><path d="m13.075 12.655-.709-6.458h-.831v-1.96H8.62a1.7 1.7 0 0 0-1.417-1.61v-1.47H5.89v1.47A1.701 1.701 0 0 0 4.465 4.3v1.89H3.58l-.709 6.457a1.97 1.97 0 0 0 1.96 2.188h6.283a1.97 1.97 0 0 0 1.96-2.188v.009Zm-2.853-6.458H8.63V5.56h1.592v.638Zm-4.436-1.89c0-.218.175-.393.394-.393h.752c.22 0 .394.175.394.393v1.89H5.795v-1.89h-.009Zm5.819 9.004a.657.657 0 0 1-.49.219H4.832a.643.643 0 0 1-.49-.219.676.676 0 0 1-.166-.507l.586-5.294h6.432l.586 5.294a.643.643 0 0 1-.166.507h-.01Z"></path><path d="M7.956 9.514a.859.859 0 0 1-.857-.858H5.786a2.17 2.17 0 1 0 4.34 0H8.814a.859.859 0 0 1-.858.858Z"></path></svg>';
 
 export class IconConvenience extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconConvenience extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--convenience', '', null, 'IconConvenience');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--convenience', '', null, 'IconConvenience');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--convenience');
         this.root.append(svg);
     }

package/icons/IconConvenienceLarge.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--convenienceLarge"><path d="m25.623 25.905-1.41-12.81h-1.662V9.289H16.9v-.28a2.905 2.905 0 0 0-2.774-2.897V2.875h-1.75v3.237c-1.54.08-2.774 1.34-2.774 2.897v4.077H7.825l-1.409 12.81a2.914 2.914 0 0 0 .727 2.258 2.91 2.91 0 0 0 2.16.962h13.415c.822 0 1.61-.35 2.16-.971a2.914 2.914 0 0 0 .727-2.258l.018.018ZM20.8 11.039v2.056H16.9v-2.056H20.8Zm-9.45-2.03c0-.639.525-1.164 1.164-1.164h1.47c.639 0 1.164.525 1.164 1.164v4.077H11.36V9.01h-.009ZM23.593 26.99a1.141 1.141 0 0 1-.858.385H9.321c-.332 0-.638-.14-.857-.385a1.163 1.163 0 0 1-.289-.901l1.243-11.253h13.238L23.89 26.09c.035.332-.07.647-.289.901h-.008Z"></path><path d="M15.998 19.561a2.087 2.087 0 0 1-2.083-2.082h-1.75a3.831 3.831 0 1 0 7.665 0h-1.75a2.087 2.087 0 0 1-2.082 2.082Z"></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--convenienceLarge"><path d="m25.623 25.905-1.41-12.81h-1.662V9.289H16.9v-.28a2.905 2.905 0 0 0-2.774-2.897V2.875h-1.75v3.237c-1.54.08-2.774 1.34-2.774 2.897v4.077H7.825l-1.409 12.81a2.914 2.914 0 0 0 .727 2.258 2.91 2.91 0 0 0 2.16.962h13.415c.822 0 1.61-.35 2.16-.971a2.914 2.914 0 0 0 .727-2.258l.018.018ZM20.8 11.039v2.056H16.9v-2.056H20.8Zm-9.45-2.03c0-.639.525-1.164 1.164-1.164h1.47c.639 0 1.164.525 1.164 1.164v4.077H11.36V9.01h-.009ZM23.593 26.99a1.141 1.141 0 0 1-.858.385H9.321c-.332 0-.638-.14-.857-.385a1.163 1.163 0 0 1-.289-.901l1.243-11.253h13.238L23.89 26.09c.035.332-.07.647-.289.901h-.008Z"></path><path d="M15.998 19.561a2.087 2.087 0 0 1-2.083-2.082h-1.75a3.831 3.831 0 1 0 7.665 0h-1.75a2.087 2.087 0 0 1-2.082 2.082Z"></path></svg>';
 
 export class IconConvenienceLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconConvenienceLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--convenienceLarge', '', null, 'IconConvenienceLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--convenienceLarge', '', null, 'IconConvenienceLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--convenienceLarge');
         this.root.append(svg);
     }

package/icons/IconConversionRate.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--conversionRate"><path d="M10.249 8.157a2.328 2.328 0 1 0-2.328 2.328 2.336 2.336 0 0 0 2.328-2.328Zm-3.343 0a1.015 1.015 0 1 1 2.03 0 1.015 1.015 0 0 1-2.03 0ZM15 7.125 13.25 9.75l-2.03-2.625h1.277a4.506 4.506 0 0 0-1.25-2.371 4.586 4.586 0 0 0-6.493 0l-.928-.928a5.898 5.898 0 0 1 8.348 0 5.819 5.819 0 0 1 1.662 3.299H15Zm-3.754 4.121.928.928a5.897 5.897 0 0 1-8.348 0 5.818 5.818 0 0 1-1.662-3.299H1L2.75 6.25l2.03 2.625H3.502c.167.9.604 1.726 1.252 2.371a4.586 4.586 0 0 0 6.492 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--conversionRate"><path d="M10.249 8.157a2.328 2.328 0 1 0-2.328 2.328 2.336 2.336 0 0 0 2.328-2.328Zm-3.343 0a1.015 1.015 0 1 1 2.03 0 1.015 1.015 0 0 1-2.03 0ZM15 7.125 13.25 9.75l-2.03-2.625h1.277a4.506 4.506 0 0 0-1.25-2.371 4.586 4.586 0 0 0-6.493 0l-.928-.928a5.898 5.898 0 0 1 8.348 0 5.819 5.819 0 0 1 1.662 3.299H15Zm-3.754 4.121.928.928a5.897 5.897 0 0 1-8.348 0 5.818 5.818 0 0 1-1.662-3.299H1L2.75 6.25l2.03 2.625H3.502c.167.9.604 1.726 1.252 2.371a4.586 4.586 0 0 0 6.492 0Z"></path></svg>';
 
 export class IconConversionRate extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconConversionRate extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--conversionRate', '', null, 'IconConversionRate');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--conversionRate', '', null, 'IconConversionRate');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--conversionRate');
         this.root.append(svg);
     }

package/icons/IconConversionRateLarge.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--conversionRateLarge"><path d="M14.04 18.625a3.927 3.927 0 0 0 7.607-.93 3.93 3.93 0 0 0-3.696-4.32 3.927 3.927 0 0 0-7.606.93 3.93 3.93 0 0 0 3.695 4.32Zm4.095-3.5a2.196 2.196 0 0 1-.385 4.375 2.17 2.17 0 0 1-1.943-1.199 3.92 3.92 0 0 0 2.328-3.176ZM14.25 12.5a2.188 2.188 0 1 1 0 4.375 2.188 2.188 0 0 1 0-4.375Zm14.936.98-3.141 3.141a.874.874 0 0 1-1.243 0l-3.14-3.141 1.242-1.242 1.557 1.557A8.75 8.75 0 0 0 9.814 9.814L8.57 8.57a10.5 10.5 0 0 1 17.71 5.329l1.663-1.662 1.242 1.242Zm-7 8.75 1.243 1.242A10.5 10.5 0 0 1 5.719 18.1l-1.663 1.662-1.242-1.242 3.141-3.141a.875.875 0 0 1 1.242 0l3.142 3.141-1.243 1.242-1.557-1.557a8.75 8.75 0 0 0 14.647 3.981v.044Z"></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--conversionRateLarge"><path d="M14.04 18.625a3.927 3.927 0 0 0 7.607-.93 3.93 3.93 0 0 0-3.696-4.32 3.927 3.927 0 0 0-7.606.93 3.93 3.93 0 0 0 3.695 4.32Zm4.095-3.5a2.196 2.196 0 0 1-.385 4.375 2.17 2.17 0 0 1-1.943-1.199 3.92 3.92 0 0 0 2.328-3.176ZM14.25 12.5a2.188 2.188 0 1 1 0 4.375 2.188 2.188 0 0 1 0-4.375Zm14.936.98-3.141 3.141a.874.874 0 0 1-1.243 0l-3.14-3.141 1.242-1.242 1.557 1.557A8.75 8.75 0 0 0 9.814 9.814L8.57 8.57a10.5 10.5 0 0 1 17.71 5.329l1.663-1.662 1.242 1.242Zm-7 8.75 1.243 1.242A10.5 10.5 0 0 1 5.719 18.1l-1.663 1.662-1.242-1.242 3.141-3.141a.875.875 0 0 1 1.242 0l3.142 3.141-1.243 1.242-1.557-1.557a8.75 8.75 0 0 0 14.647 3.981v.044Z"></path></svg>';
 
 export class IconConversionRateLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconConversionRateLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--conversionRateLarge', '', null, 'IconConversionRateLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--conversionRateLarge', '', null, 'IconConversionRateLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--conversionRateLarge');
         this.root.append(svg);
     }

package/icons/IconCookiePolicy.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--cookiePolicy"><g clip-path="url(#prefix__clip0_5014_3343)"><path d="M8 14.563A6.565 6.565 0 0 1 1.437 8 6.565 6.565 0 0 1 8 1.437a6.7 6.7 0 0 1 1.321.132l.28 1.155a1.21 1.21 0 0 0-.464.945c0 .674.552 1.225 1.226 1.225h.07l.656.866a1.22 1.22 0 0 0-.079.411c0 .674.551 1.225 1.225 1.225.429 0 .814-.218 1.041-.586l1.208.245a6.565 6.565 0 0 1-6.492 7.508H8ZM8 2.75A5.254 5.254 0 0 0 2.75 8 5.254 5.254 0 0 0 8 13.25a5.254 5.254 0 0 0 5.224-4.742 2.54 2.54 0 0 1-3.526-2.336v-.053A2.536 2.536 0 0 1 7.99 2.74L8 2.75Z"></path><path d="M5.839 7.37a.805.805 0 1 0 0-1.61.805.805 0 0 0 0 1.61Z"></path><path d="M5.839 11.106a.805.805 0 1 0 0-1.61.805.805 0 0 0 0 1.61Z"></path><path d="M9.426 11.106a.805.805 0 1 0 0-1.61.805.805 0 0 0 0 1.61Z"></path><path d="M12.279 4.692a.805.805 0 1 0 0-1.61.805.805 0 0 0 0 1.61Z"></path></g><defs><clipPath id="prefix__clip0_5014_3343"><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--cookiePolicy"><g clip-path="url(#prefix__clip0_5014_3343)"><path d="M8 14.563A6.565 6.565 0 0 1 1.437 8 6.565 6.565 0 0 1 8 1.437a6.7 6.7 0 0 1 1.321.132l.28 1.155a1.21 1.21 0 0 0-.464.945c0 .674.552 1.225 1.226 1.225h.07l.656.866a1.22 1.22 0 0 0-.079.411c0 .674.551 1.225 1.225 1.225.429 0 .814-.218 1.041-.586l1.208.245a6.565 6.565 0 0 1-6.492 7.508H8ZM8 2.75A5.254 5.254 0 0 0 2.75 8 5.254 5.254 0 0 0 8 13.25a5.254 5.254 0 0 0 5.224-4.742 2.54 2.54 0 0 1-3.526-2.336v-.053A2.536 2.536 0 0 1 7.99 2.74L8 2.75Z"></path><path d="M5.839 7.37a.805.805 0 1 0 0-1.61.805.805 0 0 0 0 1.61Z"></path><path d="M5.839 11.106a.805.805 0 1 0 0-1.61.805.805 0 0 0 0 1.61Z"></path><path d="M9.426 11.106a.805.805 0 1 0 0-1.61.805.805 0 0 0 0 1.61Z"></path><path d="M12.279 4.692a.805.805 0 1 0 0-1.61.805.805 0 0 0 0 1.61Z"></path></g><defs><clipPath id="prefix__clip0_5014_3343"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconCookiePolicy extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCookiePolicy extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--cookiePolicy', '', null, 'IconCookiePolicy');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--cookiePolicy', '', null, 'IconCookiePolicy');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--cookiePolicy');
         this.root.append(svg);
     }

package/icons/IconCookiePolicyLarge.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--cookiePolicyLarge"><path fill-rule="evenodd" d="M16 28.25C9.245 28.25 3.75 22.755 3.75 16S9.245 3.75 16 3.75c.831 0 1.654.087 2.459.245l.376 1.54c-.656.534-1.041 1.304-1.041 2.135a2.752 2.752 0 0 0 2.747 2.748l.02-.003c.053-.008.1-.015.155-.015l.875 1.164c-.114.323-.175.63-.175.918a2.752 2.752 0 0 0 2.748 2.748c1.111 0 2.152-.543 2.213-.989h1.733c.096.665.14 1.216.14 1.759 0 6.755-5.495 12.25-12.25 12.25ZM16 5.5C10.207 5.5 5.5 10.207 5.5 16S10.207 26.5 16 26.5s10.255-4.462 10.491-10.045c-.7.35-1.54.525-2.327.525a4.507 4.507 0 0 1-4.498-4.498c0-.13 0-.262.018-.402a4.507 4.507 0 0 1-3.64-4.419c0-.761.192-1.496.56-2.152A13.903 13.903 0 0 0 16 5.49V5.5Zm-4.568 8.444a1.846 1.846 0 1 0 0-3.693 1.846 1.846 0 0 0 0 3.693Zm6.073 7.656a1.846 1.846 0 1 1-3.693 0 1.846 1.846 0 0 1 3.693 0Zm-.639-4.646a1.208 1.208 0 1 0 0-2.415 1.208 1.208 0 0 0 0 2.415Zm-5.661 1.4a1.207 1.207 0 1 1-2.415 0 1.207 1.207 0 0 1 2.415 0Zm10.343 2.424a1.207 1.207 0 1 0 0-2.415 1.207 1.207 0 0 0 0 2.415Zm4.33-12.39a1.207 1.207 0 1 1-2.414 0 1.207 1.207 0 0 1 2.415 0Z" 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--cookiePolicyLarge"><path fill-rule="evenodd" d="M16 28.25C9.245 28.25 3.75 22.755 3.75 16S9.245 3.75 16 3.75c.831 0 1.654.087 2.459.245l.376 1.54c-.656.534-1.041 1.304-1.041 2.135a2.752 2.752 0 0 0 2.747 2.748l.02-.003c.053-.008.1-.015.155-.015l.875 1.164c-.114.323-.175.63-.175.918a2.752 2.752 0 0 0 2.748 2.748c1.111 0 2.152-.543 2.213-.989h1.733c.096.665.14 1.216.14 1.759 0 6.755-5.495 12.25-12.25 12.25ZM16 5.5C10.207 5.5 5.5 10.207 5.5 16S10.207 26.5 16 26.5s10.255-4.462 10.491-10.045c-.7.35-1.54.525-2.327.525a4.507 4.507 0 0 1-4.498-4.498c0-.13 0-.262.018-.402a4.507 4.507 0 0 1-3.64-4.419c0-.761.192-1.496.56-2.152A13.903 13.903 0 0 0 16 5.49V5.5Zm-4.568 8.444a1.846 1.846 0 1 0 0-3.693 1.846 1.846 0 0 0 0 3.693Zm6.073 7.656a1.846 1.846 0 1 1-3.693 0 1.846 1.846 0 0 1 3.693 0Zm-.639-4.646a1.208 1.208 0 1 0 0-2.415 1.208 1.208 0 0 0 0 2.415Zm-5.661 1.4a1.207 1.207 0 1 1-2.415 0 1.207 1.207 0 0 1 2.415 0Zm10.343 2.424a1.207 1.207 0 1 0 0-2.415 1.207 1.207 0 0 0 0 2.415Zm4.33-12.39a1.207 1.207 0 1 1-2.414 0 1.207 1.207 0 0 1 2.415 0Z" clip-rule="evenodd"></path></svg>';
 
 export class IconCookiePolicyLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconCookiePolicyLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--cookiePolicyLarge', '', null, 'IconCookiePolicyLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--cookiePolicyLarge', '', null, 'IconCookiePolicyLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--cookiePolicyLarge');
         this.root.append(svg);
     }