@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/icons/IconPoliciesLarge.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--policiesLarge"><path d="M18.625 3.75h-14v25.375h22.75V12.5a8.749 8.749 0 0 0-8.75-8.75Zm6.773 7h-5.023V5.728a7.044 7.044 0 0 1 5.023 5.022Zm.227 16.625H6.375V5.5h12.25v7h7v14.875Zm-10.5-14H10.75v-1.75h4.375v1.75Zm-4.375 7h7v1.75h-7v-1.75Zm0-4.375h10.5v1.75h-10.5V16Z"></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--policiesLarge"><path d="M18.625 3.75h-14v25.375h22.75V12.5a8.749 8.749 0 0 0-8.75-8.75Zm6.773 7h-5.023V5.728a7.044 7.044 0 0 1 5.023 5.022Zm.227 16.625H6.375V5.5h12.25v7h7v14.875Zm-10.5-14H10.75v-1.75h4.375v1.75Zm-4.375 7h7v1.75h-7v-1.75Zm0-4.375h10.5v1.75h-10.5V16Z"></path></svg>';
 
 export class IconPoliciesLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPoliciesLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--policiesLarge', '', null, 'IconPoliciesLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--policiesLarge', '', null, 'IconPoliciesLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--policiesLarge');
         this.root.append(svg);
     }

package/icons/IconPound.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--pound"><path d="M12.585 11.885c-.315 1.277-1.33 1.803-2.695 1.803H3.625v-1.47h1.12v-3.5h-1.12V7.353h1.12V5.83c0-2.327 1.295-3.727 3.692-3.727A3.911 3.911 0 0 1 11.5 3.328l-1.05 1.067a2.625 2.625 0 0 0-2.012-.822c-1.278 0-2.048.647-2.048 2.187v1.593h3.587v1.365H6.39v3.5h3.5a1.18 1.18 0 0 0 1.277-.823l1.418.49Z"></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--pound"><path d="M12.585 11.885c-.315 1.277-1.33 1.803-2.695 1.803H3.625v-1.47h1.12v-3.5h-1.12V7.353h1.12V5.83c0-2.327 1.295-3.727 3.692-3.727A3.911 3.911 0 0 1 11.5 3.328l-1.05 1.067a2.625 2.625 0 0 0-2.012-.822c-1.278 0-2.048.647-2.048 2.187v1.593h3.587v1.365H6.39v3.5h3.5a1.18 1.18 0 0 0 1.277-.823l1.418.49Z"></path></svg>';
 
 export class IconPound extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPound extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--pound', '', null, 'IconPound');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--pound', '', null, 'IconPound');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pound');
         this.root.append(svg);
     }

package/icons/IconPoundLarge.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--poundLarge"><path d="m19.29 19.281 1.523.517c-.333 1.338-1.4 1.89-2.827 1.89h-6.545v-1.54h1.138v-3.675H11.44v-1.435h1.138v-1.602c0-2.441 1.365-3.911 3.876-3.911a4.121 4.121 0 0 1 3.185 1.286l-1.102 1.12a2.737 2.737 0 0 0-2.083-.875c-1.339 0-2.144.683-2.144 2.302v1.68h3.763v1.434H14.31v3.675h3.631a1.251 1.251 0 0 0 1.348-.866ZM28.25 16a12.25 12.25 0 1 1-24.499 0 12.25 12.25 0 0 1 24.499 0Zm-1.75 0a10.5 10.5 0 1 0-21 0 10.5 10.5 0 0 0 21 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 32 32" class="c-pieIcon c-pieIcon--poundLarge"><path d="m19.29 19.281 1.523.517c-.333 1.338-1.4 1.89-2.827 1.89h-6.545v-1.54h1.138v-3.675H11.44v-1.435h1.138v-1.602c0-2.441 1.365-3.911 3.876-3.911a4.121 4.121 0 0 1 3.185 1.286l-1.102 1.12a2.737 2.737 0 0 0-2.083-.875c-1.339 0-2.144.683-2.144 2.302v1.68h3.763v1.434H14.31v3.675h3.631a1.251 1.251 0 0 0 1.348-.866ZM28.25 16a12.25 12.25 0 1 1-24.499 0 12.25 12.25 0 0 1 24.499 0Zm-1.75 0a10.5 10.5 0 1 0-21 0 10.5 10.5 0 0 0 21 0Z"></path></svg>';
 
 export class IconPoundLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPoundLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--poundLarge', '', null, 'IconPoundLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--poundLarge', '', null, 'IconPoundLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--poundLarge');
         this.root.append(svg);
     }

package/icons/IconPrepare.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--prepare"><g clip-path="url(#prefix__clip0_6395_3745)"><path d="M13.574 12.813c.219-.342.341-.744.341-1.182 0-.262-.052-.56-.149-.875a1.414 1.414 0 0 0-.726-.857 1.476 1.476 0 0 0-.542-.149.634.634 0 0 1 .437-.525l-.402-1.251c-.49.157-1.33.726-1.357 1.793a1.593 1.593 0 0 0-.288-.008 4.788 4.788 0 0 0-.15-.587 2.412 2.412 0 0 0-1.26-1.39c.263-.158.517-.298.78-.482.42-.254.778-.814.56-1.418A161.98 161.98 0 0 0 10.1 4.02c1.391-.718 2.188-1.059 2.888-1.365L13.1 2.6l-.62-1.085-.088.035c-.85.368-1.75.77-3.36 1.61-2.888 1.505-5.067 2.774-6.86 3.999l-.044.035C1.315 7.79.99 8.262 1.053 8.744c.078.586.577.91 1.032.971.105.017.455.079 1.024.079h.061A3.94 3.94 0 0 0 4.23 12.69c.044.044.096.079.14.123H1.21l.35 1.312h12.915l.35-1.313h-1.26.009ZM8.98 4.604l.639 1.627s-.026.018-.035.027C8.77 6.8 8 7.212 7.283 7.536a.12.12 0 0 0-.035-.026l-.56-.464A1.657 1.657 0 0 0 5.2 6.722a79.426 79.426 0 0 1 3.78-2.117ZM3.476 8.534c-.472.026-.813 0-.997-.018a4.88 4.88 0 0 1 .376-.306c.473-.324.98-.648 1.514-.98a3.895 3.895 0 0 0-.893 1.304Zm2.87 3.272-.052.709a2.652 2.652 0 0 1-1.111-.718 2.597 2.597 0 0 1-.71-1.916c0-.07.027-.131.036-.201.07-.525.306-1.024.674-1.409.078-.079.148-.166.227-.236a.312.312 0 0 1 .201-.07c.088 0 .175.035.245.087l.027.018.525.429c.218.201.48.341.76.428.01 0 .018.01.027.01l.096.025c.228.07.385.28.385.517a.154.154 0 0 1-.07.131 2.838 2.838 0 0 0-1.26 2.179v.017Zm3.16-.831a2.635 2.635 0 0 1-1.9 1.61l.053-.683c.035-.48.28-.91.682-1.172.412-.271.657-.726.657-1.225 0-.184-.027-.359-.08-.525.263.122.482.35.578.639.167.472.167.962.01 1.365v-.009Zm2.178 1.584a.926.926 0 0 1-.928-.919c0-.088.018-.245.088-.473.009-.043.044-.06.061-.07.018 0 .035-.017.061-.017h.044c.289.105.49.149.665.149.131 0 .289-.026.656-.158.053-.017.088 0 .114 0a.1.1 0 0 1 .061.07c.08.236.088.394.088.482a.919.919 0 0 1-.919.918l.009.018Z"></path></g><defs><clipPath id="prefix__clip0_6395_3745"><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--prepare"><g clip-path="url(#prefix__clip0_6395_3745)"><path d="M13.574 12.813c.219-.342.341-.744.341-1.182 0-.262-.052-.56-.149-.875a1.414 1.414 0 0 0-.726-.857 1.476 1.476 0 0 0-.542-.149.634.634 0 0 1 .437-.525l-.402-1.251c-.49.157-1.33.726-1.357 1.793a1.593 1.593 0 0 0-.288-.008 4.788 4.788 0 0 0-.15-.587 2.412 2.412 0 0 0-1.26-1.39c.263-.158.517-.298.78-.482.42-.254.778-.814.56-1.418A161.98 161.98 0 0 0 10.1 4.02c1.391-.718 2.188-1.059 2.888-1.365L13.1 2.6l-.62-1.085-.088.035c-.85.368-1.75.77-3.36 1.61-2.888 1.505-5.067 2.774-6.86 3.999l-.044.035C1.315 7.79.99 8.262 1.053 8.744c.078.586.577.91 1.032.971.105.017.455.079 1.024.079h.061A3.94 3.94 0 0 0 4.23 12.69c.044.044.096.079.14.123H1.21l.35 1.312h12.915l.35-1.313h-1.26.009ZM8.98 4.604l.639 1.627s-.026.018-.035.027C8.77 6.8 8 7.212 7.283 7.536a.12.12 0 0 0-.035-.026l-.56-.464A1.657 1.657 0 0 0 5.2 6.722a79.426 79.426 0 0 1 3.78-2.117ZM3.476 8.534c-.472.026-.813 0-.997-.018a4.88 4.88 0 0 1 .376-.306c.473-.324.98-.648 1.514-.98a3.895 3.895 0 0 0-.893 1.304Zm2.87 3.272-.052.709a2.652 2.652 0 0 1-1.111-.718 2.597 2.597 0 0 1-.71-1.916c0-.07.027-.131.036-.201.07-.525.306-1.024.674-1.409.078-.079.148-.166.227-.236a.312.312 0 0 1 .201-.07c.088 0 .175.035.245.087l.027.018.525.429c.218.201.48.341.76.428.01 0 .018.01.027.01l.096.025c.228.07.385.28.385.517a.154.154 0 0 1-.07.131 2.838 2.838 0 0 0-1.26 2.179v.017Zm3.16-.831a2.635 2.635 0 0 1-1.9 1.61l.053-.683c.035-.48.28-.91.682-1.172.412-.271.657-.726.657-1.225 0-.184-.027-.359-.08-.525.263.122.482.35.578.639.167.472.167.962.01 1.365v-.009Zm2.178 1.584a.926.926 0 0 1-.928-.919c0-.088.018-.245.088-.473.009-.043.044-.06.061-.07.018 0 .035-.017.061-.017h.044c.289.105.49.149.665.149.131 0 .289-.026.656-.158.053-.017.088 0 .114 0a.1.1 0 0 1 .061.07c.08.236.088.394.088.482a.919.919 0 0 1-.919.918l.009.018Z"></path></g><defs><clipPath id="prefix__clip0_6395_3745"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconPrepare extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPrepare extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--prepare', '', null, 'IconPrepare');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--prepare', '', null, 'IconPrepare');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--prepare');
         this.root.append(svg);
     }

package/icons/IconPrepareLarge.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--prepareLarge"><path d="M23.263 24.552a3.527 3.527 0 0 0 1.12-2.58c0-.42-.079-.902-.245-1.427a2.192 2.192 0 0 0-1.12-1.313 2.268 2.268 0 0 0-1.243-.218c.21-.499.7-.709.832-.753l-.272-.831-.262-.831a3.233 3.233 0 0 0-1.785 1.487 3.885 3.885 0 0 0-2.214-1.968c.56-.324 1.129-.665 1.715-1.05.656-.403 1.207-1.26.875-2.197-.175-.49-.849-2.213-1.286-3.334 2.45-1.26 3.841-1.872 5.084-2.406L23.587 5.6c-1.34.577-2.897 1.269-5.714 2.747-4.909 2.564-8.619 4.726-11.673 6.808l-.07.053c-1.286.944-1.82 1.688-1.724 2.432.132.91.91 1.409 1.61 1.496.202.044.928.158 2.065.131 0 .07-.017.14-.026.21-.105 1.715.534 3.448 1.733 4.743.105.114.219.219.332.324H4.625l.446 1.75H26.93l.446-1.742h-4.112Zm-14.77-7.07c-1.365.088-2.144-.06-2.162-.06l-.087-.018c.14-.158.402-.42.927-.805 2.818-1.925 6.213-3.92 10.64-6.248.447 1.129 1.042 2.66 1.208 3.071a.589.589 0 0 1-.166.175 27.665 27.665 0 0 1-4.095 2.258c-.044-.035-.096-.053-.131-.088l-.963-.796c-.971-.805-2.362-.822-3.307-.035A6.41 6.41 0 0 0 8.5 17.5l-.008-.017Zm4.97 5.417-.105 1.505a4.788 4.788 0 0 1-2.293-1.374c-.883-.945-1.347-2.205-1.269-3.448a4.704 4.704 0 0 1 .84-2.398c.237-.34.517-.655.84-.918a.782.782 0 0 1 .49-.175c.202 0 .412.07.578.21l.332.272.604.498c.35.315.779.551 1.225.691.009 0 .027.01.035.018h.035l.14.052c.49.15.823.595.823 1.112a.52.52 0 0 1-.228.428 4.577 4.577 0 0 0-2.038 3.518l-.01.009Zm5.145-3.649a2.15 2.15 0 0 0-1.111 1.313c-.158.516-.237.988-.237 1.4 0 .498.105.98.289 1.408a4.697 4.697 0 0 1-2.441 1.129l.105-1.479a2.853 2.853 0 0 1 1.269-2.187 2.252 2.252 0 0 0 1.006-1.881c0-.456-.105-.893-.289-1.278a2.144 2.144 0 0 1 1.627 1.383c.01.035.018.06.027.096-.079.026-.158.052-.228.096h-.017Zm2.213 4.532a1.8 1.8 0 0 1-1.04-.332 1.816 1.816 0 0 1-.78-1.488c0-.236.053-.542.158-.883a.489.489 0 0 1 .228-.271.443.443 0 0 1 .218-.053c.053 0 .105 0 .158.026.42.149.717.219.962.228h.079c.158-.026.42-.026 1.041-.254a.457.457 0 0 1 .377.026.497.497 0 0 1 .236.271c.105.35.166.657.166.902 0 1.006-.814 1.82-1.82 1.82l.018.008Z"></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--prepareLarge"><path d="M23.263 24.552a3.527 3.527 0 0 0 1.12-2.58c0-.42-.079-.902-.245-1.427a2.192 2.192 0 0 0-1.12-1.313 2.268 2.268 0 0 0-1.243-.218c.21-.499.7-.709.832-.753l-.272-.831-.262-.831a3.233 3.233 0 0 0-1.785 1.487 3.885 3.885 0 0 0-2.214-1.968c.56-.324 1.129-.665 1.715-1.05.656-.403 1.207-1.26.875-2.197-.175-.49-.849-2.213-1.286-3.334 2.45-1.26 3.841-1.872 5.084-2.406L23.587 5.6c-1.34.577-2.897 1.269-5.714 2.747-4.909 2.564-8.619 4.726-11.673 6.808l-.07.053c-1.286.944-1.82 1.688-1.724 2.432.132.91.91 1.409 1.61 1.496.202.044.928.158 2.065.131 0 .07-.017.14-.026.21-.105 1.715.534 3.448 1.733 4.743.105.114.219.219.332.324H4.625l.446 1.75H26.93l.446-1.742h-4.112Zm-14.77-7.07c-1.365.088-2.144-.06-2.162-.06l-.087-.018c.14-.158.402-.42.927-.805 2.818-1.925 6.213-3.92 10.64-6.248.447 1.129 1.042 2.66 1.208 3.071a.589.589 0 0 1-.166.175 27.665 27.665 0 0 1-4.095 2.258c-.044-.035-.096-.053-.131-.088l-.963-.796c-.971-.805-2.362-.822-3.307-.035A6.41 6.41 0 0 0 8.5 17.5l-.008-.017Zm4.97 5.417-.105 1.505a4.788 4.788 0 0 1-2.293-1.374c-.883-.945-1.347-2.205-1.269-3.448a4.704 4.704 0 0 1 .84-2.398c.237-.34.517-.655.84-.918a.782.782 0 0 1 .49-.175c.202 0 .412.07.578.21l.332.272.604.498c.35.315.779.551 1.225.691.009 0 .027.01.035.018h.035l.14.052c.49.15.823.595.823 1.112a.52.52 0 0 1-.228.428 4.577 4.577 0 0 0-2.038 3.518l-.01.009Zm5.145-3.649a2.15 2.15 0 0 0-1.111 1.313c-.158.516-.237.988-.237 1.4 0 .498.105.98.289 1.408a4.697 4.697 0 0 1-2.441 1.129l.105-1.479a2.853 2.853 0 0 1 1.269-2.187 2.252 2.252 0 0 0 1.006-1.881c0-.456-.105-.893-.289-1.278a2.144 2.144 0 0 1 1.627 1.383c.01.035.018.06.027.096-.079.026-.158.052-.228.096h-.017Zm2.213 4.532a1.8 1.8 0 0 1-1.04-.332 1.816 1.816 0 0 1-.78-1.488c0-.236.053-.542.158-.883a.489.489 0 0 1 .228-.271.443.443 0 0 1 .218-.053c.053 0 .105 0 .158.026.42.149.717.219.962.228h.079c.158-.026.42-.026 1.041-.254a.457.457 0 0 1 .377.026.497.497 0 0 1 .236.271c.105.35.166.657.166.902 0 1.006-.814 1.82-1.82 1.82l.018.008Z"></path></svg>';
 
 export class IconPrepareLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPrepareLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--prepareLarge', '', null, 'IconPrepareLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--prepareLarge', '', null, 'IconPrepareLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--prepareLarge');
         this.root.append(svg);
     }

package/icons/IconPreparePause.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--preparePause"><g clip-path="url(#prefix__clip0_6395_3736)"><path d="M10.844 7.886h-.875V9.96h.875V7.886Z"></path><path d="M11.526 7.886h.875V9.96h-.875V7.886Z"></path><path fill-rule="evenodd" d="M2.09 9.89h-.005c-.455-.061-.954-.385-1.033-.971-.061-.482.263-.954 1.059-1.54l.044-.035c1.793-1.225 3.972-2.494 6.86-4a50.45 50.45 0 0 1 3.36-1.609l.087-.035.621 1.085-.113.052-.122.053c-.671.294-1.454.636-2.766 1.312.131.342.306.788.455 1.164a3.96 3.96 0 0 1 .648-.061A3.533 3.533 0 0 1 14.71 8.83c0 1.943-1.61 3.527-3.526 3.527A3.522 3.522 0 0 1 7.667 8.9C5.672 9.776 4.071 9.97 3.1 9.97c-.543 0-.9-.06-1.01-.078Zm8.784-3.25-.022.004A2.2 2.2 0 0 0 9.076 8.2a2.424 2.424 0 0 0-.096.621c0 1.217.997 2.214 2.213 2.214a2.222 2.222 0 0 0 2.214-2.214 2.216 2.216 0 0 0-2.214-2.213c-.114 0-.214.015-.32.031ZM8.98 4.771C6.433 6.12 4.482 7.265 2.855 8.376h-.01a4.88 4.88 0 0 0-.375.306c.577.062 2.65.15 5.512-1.32a3.501 3.501 0 0 1 1.4-1.558L8.98 4.77Z" clip-rule="evenodd"></path><path d="m1.516 14.125-.35-1.313H14.79l-.359 1.313H1.516Z"></path></g><defs><clipPath id="prefix__clip0_6395_3736"><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--preparePause"><g clip-path="url(#prefix__clip0_6395_3736)"><path d="M10.844 7.886h-.875V9.96h.875V7.886Z"></path><path d="M11.526 7.886h.875V9.96h-.875V7.886Z"></path><path fill-rule="evenodd" d="M2.09 9.89h-.005c-.455-.061-.954-.385-1.033-.971-.061-.482.263-.954 1.059-1.54l.044-.035c1.793-1.225 3.972-2.494 6.86-4a50.45 50.45 0 0 1 3.36-1.609l.087-.035.621 1.085-.113.052-.122.053c-.671.294-1.454.636-2.766 1.312.131.342.306.788.455 1.164a3.96 3.96 0 0 1 .648-.061A3.533 3.533 0 0 1 14.71 8.83c0 1.943-1.61 3.527-3.526 3.527A3.522 3.522 0 0 1 7.667 8.9C5.672 9.776 4.071 9.97 3.1 9.97c-.543 0-.9-.06-1.01-.078Zm8.784-3.25-.022.004A2.2 2.2 0 0 0 9.076 8.2a2.424 2.424 0 0 0-.096.621c0 1.217.997 2.214 2.213 2.214a2.222 2.222 0 0 0 2.214-2.214 2.216 2.216 0 0 0-2.214-2.213c-.114 0-.214.015-.32.031ZM8.98 4.771C6.433 6.12 4.482 7.265 2.855 8.376h-.01a4.88 4.88 0 0 0-.375.306c.577.062 2.65.15 5.512-1.32a3.501 3.501 0 0 1 1.4-1.558L8.98 4.77Z" clip-rule="evenodd"></path><path d="m1.516 14.125-.35-1.313H14.79l-.359 1.313H1.516Z"></path></g><defs><clipPath id="prefix__clip0_6395_3736"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 export class IconPreparePause extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPreparePause extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--preparePause', '', null, 'IconPreparePause');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--preparePause', '', null, 'IconPreparePause');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--preparePause');
         this.root.append(svg);
     }

package/icons/IconPreparePauseLarge.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--preparePauseLarge"><path d="M19.3 15.873h1.75v3.63H19.3v-3.63Z"></path><path d="M22.02 15.873h1.75v3.63h-1.75v-3.63Z"></path><path fill-rule="evenodd" d="M20.235 11.769c.42-.097.849-.149 1.295-.149h.009c3.246 0 5.897 2.651 5.897 5.897 0 3.247-2.65 5.898-5.897 5.898a5.906 5.906 0 0 1-5.898-5.898v-.148C10.2 19.836 6.498 19.233 6 19.136c-.7-.087-1.479-.586-1.61-1.496-.096-.744.437-1.488 1.724-2.433l.07-.052c3.053-2.082 6.763-4.244 11.672-6.808C20.673 6.87 22.23 6.177 23.57 5.6l.875 1.531c-1.243.534-2.634 1.146-5.084 2.406.263.657.604 1.532.875 2.232ZM6.323 17.413c.043.008 3.955.778 9.79-2.223l-.008-.009a5.883 5.883 0 0 1 2.503-2.791c-.245-.621-.552-1.4-.805-2.048-4.428 2.328-7.823 4.323-10.64 6.248-.525.385-.788.648-.928.805l.088.018Zm11.06.113a4.15 4.15 0 0 0 4.147 4.148v-.009a4.156 4.156 0 0 0 4.148-4.148 4.15 4.15 0 0 0-4.148-4.147 4.157 4.157 0 0 0-3.973 3.036 3.945 3.945 0 0 0-.174 1.12Z" clip-rule="evenodd"></path><path d="M27.375 24.544H4.625l.446 1.75H26.93l.446-1.742v-.008Z"></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--preparePauseLarge"><path d="M19.3 15.873h1.75v3.63H19.3v-3.63Z"></path><path d="M22.02 15.873h1.75v3.63h-1.75v-3.63Z"></path><path fill-rule="evenodd" d="M20.235 11.769c.42-.097.849-.149 1.295-.149h.009c3.246 0 5.897 2.651 5.897 5.897 0 3.247-2.65 5.898-5.897 5.898a5.906 5.906 0 0 1-5.898-5.898v-.148C10.2 19.836 6.498 19.233 6 19.136c-.7-.087-1.479-.586-1.61-1.496-.096-.744.437-1.488 1.724-2.433l.07-.052c3.053-2.082 6.763-4.244 11.672-6.808C20.673 6.87 22.23 6.177 23.57 5.6l.875 1.531c-1.243.534-2.634 1.146-5.084 2.406.263.657.604 1.532.875 2.232ZM6.323 17.413c.043.008 3.955.778 9.79-2.223l-.008-.009a5.883 5.883 0 0 1 2.503-2.791c-.245-.621-.552-1.4-.805-2.048-4.428 2.328-7.823 4.323-10.64 6.248-.525.385-.788.648-.928.805l.088.018Zm11.06.113a4.15 4.15 0 0 0 4.147 4.148v-.009a4.156 4.156 0 0 0 4.148-4.148 4.15 4.15 0 0 0-4.148-4.147 4.157 4.157 0 0 0-3.973 3.036 3.945 3.945 0 0 0-.174 1.12Z" clip-rule="evenodd"></path><path d="M27.375 24.544H4.625l.446 1.75H26.93l.446-1.742v-.008Z"></path></svg>';
 
 export class IconPreparePauseLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPreparePauseLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--preparePauseLarge', '', null, 'IconPreparePauseLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--preparePauseLarge', '', null, 'IconPreparePauseLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--preparePauseLarge');
         this.root.append(svg);
     }

package/icons/IconPresentationChart.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--presentationChart"><path d="M15 2.094H1v1.312h1.094v5.469a1.54 1.54 0 0 0 1.531 1.531h3.719v1.707l-1.969 2.012h1.82L8 13.311l.805.814h1.82l-1.969-2.021v-1.698h3.719a1.54 1.54 0 0 0 1.531-1.531V3.406H15V2.094Zm-2.406 6.781a.219.219 0 0 1-.219.219h-8.75a.219.219 0 0 1-.219-.219V3.406h9.188v5.469Z"></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--presentationChart"><path d="M15 2.094H1v1.312h1.094v5.469a1.54 1.54 0 0 0 1.531 1.531h3.719v1.707l-1.969 2.012h1.82L8 13.311l.805.814h1.82l-1.969-2.021v-1.698h3.719a1.54 1.54 0 0 0 1.531-1.531V3.406H15V2.094Zm-2.406 6.781a.219.219 0 0 1-.219.219h-8.75a.219.219 0 0 1-.219-.219V3.406h9.188v5.469Z"></path></svg>';
 
 export class IconPresentationChart extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPresentationChart extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--presentationChart', '', null, 'IconPresentationChart');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--presentationChart', '', null, 'IconPresentationChart');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--presentationChart');
         this.root.append(svg);
     }

package/icons/IconPresentationChartLarge.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--presentationChartLarge"><path d="M29.125 5.5H2.875v1.75h1.75V19.5a2.625 2.625 0 0 0 2.625 2.625h7.875V24.4l-3.824 3.85h2.468L16 25.992l2.231 2.258h2.459l-3.815-3.867v-2.258h7.875a2.625 2.625 0 0 0 2.625-2.625V7.25h1.75V5.5Zm-3.5 14a.875.875 0 0 1-.875.875H7.25a.875.875 0 0 1-.875-.875V7.25h19.25V19.5ZM12.5 16.875h-1.75v-3.5h1.75v3.5Zm4.375 0h-1.75v-7h1.75v7Zm4.375 0H19.5v-5.25h1.75v5.25Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--presentationChartLarge"><path d="M29.125 5.5H2.875v1.75h1.75V19.5a2.625 2.625 0 0 0 2.625 2.625h7.875V24.4l-3.824 3.85h2.468L16 25.992l2.231 2.258h2.459l-3.815-3.867v-2.258h7.875a2.625 2.625 0 0 0 2.625-2.625V7.25h1.75V5.5Zm-3.5 14a.875.875 0 0 1-.875.875H7.25a.875.875 0 0 1-.875-.875V7.25h19.25V19.5ZM12.5 16.875h-1.75v-3.5h1.75v3.5Zm4.375 0h-1.75v-7h1.75v7Zm4.375 0H19.5v-5.25h1.75v5.25Z"></path></svg>';
 
 export class IconPresentationChartLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPresentationChartLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--presentationChartLarge', '', null, 'IconPresentationChartLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--presentationChartLarge', '', null, 'IconPresentationChartLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--presentationChartLarge');
         this.root.append(svg);
     }

package/icons/IconPrinter.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--printer"><path d="M14.781 7.125a1.54 1.54 0 0 0-1.531-1.531h-1.969v-3.5H4.72v3.5H2.75a1.54 1.54 0 0 0-1.531 1.531v5.906h3.5v1.75h6.562v-1.75h3.5V7.125Zm-8.75-3.719H9.97v2.188H6.03V3.406ZM9.97 13.47H6.03v-3.063H9.97v3.063Zm3.5-1.75H11.28v-1.313h.875V9.094H3.844v1.312h.875v1.313H2.53V7.125a.219.219 0 0 1 .219-.219h10.5a.219.219 0 0 1 .219.219v4.594Z"></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--printer"><path d="M14.781 7.125a1.54 1.54 0 0 0-1.531-1.531h-1.969v-3.5H4.72v3.5H2.75a1.54 1.54 0 0 0-1.531 1.531v5.906h3.5v1.75h6.562v-1.75h3.5V7.125Zm-8.75-3.719H9.97v2.188H6.03V3.406ZM9.97 13.47H6.03v-3.063H9.97v3.063Zm3.5-1.75H11.28v-1.313h.875V9.094H3.844v1.312h.875v1.313H2.53V7.125a.219.219 0 0 1 .219-.219h10.5a.219.219 0 0 1 .219.219v4.594Z"></path></svg>';
 
 export class IconPrinter extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPrinter extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--printer', '', null, 'IconPrinter');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--printer', '', null, 'IconPrinter');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--printer');
         this.root.append(svg);
     }

package/icons/IconPrinterFilled.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--printerFilled"><path d="M11.281 3.844V1.656H4.72v2.188h6.562Z"></path><path d="M13.25 5.156H2.75a1.54 1.54 0 0 0-1.531 1.532v5.906h3.5V9.969h-.875V8.656h8.312V9.97h-.875v2.625h3.5V6.688a1.54 1.54 0 0 0-1.531-1.532Z"></path><path d="M6.031 9.969v4.375H9.96v-.656h.009v-3.72H6.03Z"></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--printerFilled"><path d="M11.281 3.844V1.656H4.72v2.188h6.562Z"></path><path d="M13.25 5.156H2.75a1.54 1.54 0 0 0-1.531 1.532v5.906h3.5V9.969h-.875V8.656h8.312V9.97h-.875v2.625h3.5V6.688a1.54 1.54 0 0 0-1.531-1.532Z"></path><path d="M6.031 9.969v4.375H9.96v-.656h.009v-3.72H6.03Z"></path></svg>';
 
 export class IconPrinterFilled extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPrinterFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--printerFilled', '', null, 'IconPrinterFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--printerFilled', '', null, 'IconPrinterFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--printerFilled');
         this.root.append(svg);
     }

package/icons/IconPrinterFilledLarge.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--printerFilledLarge"><path d="M23 9V3.75H9V9h14Z"></path><path d="M21.25 20.41h-10.5v7.84h10.5v-7.84Z"></path><path d="M26.5 10.75h-21a2.625 2.625 0 0 0-2.625 2.625V24.75H9v-4.375H7.25v-1.75h17.5v1.75H23v4.375h6.125V13.375A2.625 2.625 0 0 0 26.5 10.75Zm-5.25 6.125v-1.75h3.5v1.75h-3.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--printerFilledLarge"><path d="M23 9V3.75H9V9h14Z"></path><path d="M21.25 20.41h-10.5v7.84h10.5v-7.84Z"></path><path d="M26.5 10.75h-21a2.625 2.625 0 0 0-2.625 2.625V24.75H9v-4.375H7.25v-1.75h17.5v1.75H23v4.375h6.125V13.375A2.625 2.625 0 0 0 26.5 10.75Zm-5.25 6.125v-1.75h3.5v1.75h-3.5Z"></path></svg>';
 
 export class IconPrinterFilledLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPrinterFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--printerFilledLarge', '', null, 'IconPrinterFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--printerFilledLarge', '', null, 'IconPrinterFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--printerFilledLarge');
         this.root.append(svg);
     }

package/icons/IconPrinterLarge.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--printerLarge"><path d="M29.125 13.375A2.625 2.625 0 0 0 26.5 10.75H23v-7H9v7H5.5a2.625 2.625 0 0 0-2.625 2.625V24.75H9v3.5h14v-3.5h6.125V13.375ZM10.75 5.5h10.5v5.25h-10.5V5.5Zm10.5 21h-10.5v-6.125h10.5V26.5Zm6.125-3.5H23v-2.625h1.75v-1.75H7.25v1.75H9V23H4.625v-9.625A.875.875 0 0 1 5.5 12.5h21a.875.875 0 0 1 .875.875V23Zm-6.125-7.875h3.5v1.75h-3.5v-1.75Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--printerLarge"><path d="M29.125 13.375A2.625 2.625 0 0 0 26.5 10.75H23v-7H9v7H5.5a2.625 2.625 0 0 0-2.625 2.625V24.75H9v3.5h14v-3.5h6.125V13.375ZM10.75 5.5h10.5v5.25h-10.5V5.5Zm10.5 21h-10.5v-6.125h10.5V26.5Zm6.125-3.5H23v-2.625h1.75v-1.75H7.25v1.75H9V23H4.625v-9.625A.875.875 0 0 1 5.5 12.5h21a.875.875 0 0 1 .875.875V23Zm-6.125-7.875h3.5v1.75h-3.5v-1.75Z"></path></svg>';
 
 export class IconPrinterLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconPrinterLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--printerLarge', '', null, 'IconPrinterLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--printerLarge', '', null, 'IconPrinterLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--printerLarge');
         this.root.append(svg);
     }

package/icons/IconRadioSelected.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--radioSelected"><path d="M8 1.219C4.264 1.219 1.219 4.264 1.219 8c0 3.736 3.045 6.781 6.781 6.781 3.736 0 6.781-3.045 6.781-6.781 0-3.736-3.045-6.781-6.781-6.781Zm0 12.25A5.47 5.47 0 0 1 2.531 8 5.47 5.47 0 0 1 8 2.531 5.47 5.47 0 0 1 13.469 8 5.47 5.47 0 0 1 8 13.469ZM10.625 8A2.621 2.621 0 0 1 8 10.625 2.621 2.621 0 0 1 5.375 8 2.621 2.621 0 0 1 8 5.375 2.621 2.621 0 0 1 10.625 8Z"></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--radioSelected"><path d="M8 1.219C4.264 1.219 1.219 4.264 1.219 8c0 3.736 3.045 6.781 6.781 6.781 3.736 0 6.781-3.045 6.781-6.781 0-3.736-3.045-6.781-6.781-6.781Zm0 12.25A5.47 5.47 0 0 1 2.531 8 5.47 5.47 0 0 1 8 2.531 5.47 5.47 0 0 1 13.469 8 5.47 5.47 0 0 1 8 13.469ZM10.625 8A2.621 2.621 0 0 1 8 10.625 2.621 2.621 0 0 1 5.375 8 2.621 2.621 0 0 1 8 5.375 2.621 2.621 0 0 1 10.625 8Z"></path></svg>';
 
 export class IconRadioSelected extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconRadioSelected extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--radioSelected', '', null, 'IconRadioSelected');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--radioSelected', '', null, 'IconRadioSelected');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--radioSelected');
         this.root.append(svg);
     }

package/icons/IconRadioSelectedLarge.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--radioSelectedLarge"><path d="M16 3.75C9.245 3.75 3.75 9.245 3.75 16S9.245 28.25 16 28.25 28.25 22.755 28.25 16 22.755 3.75 16 3.75Zm0 22.75c-5.793 0-10.5-4.707-10.5-10.5S10.207 5.5 16 5.5 26.5 10.207 26.5 16 21.793 26.5 16 26.5ZM21.25 16A5.254 5.254 0 0 1 16 21.25 5.254 5.254 0 0 1 10.75 16 5.254 5.254 0 0 1 16 10.75 5.254 5.254 0 0 1 21.25 16Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--radioSelectedLarge"><path d="M16 3.75C9.245 3.75 3.75 9.245 3.75 16S9.245 28.25 16 28.25 28.25 22.755 28.25 16 22.755 3.75 16 3.75Zm0 22.75c-5.793 0-10.5-4.707-10.5-10.5S10.207 5.5 16 5.5 26.5 10.207 26.5 16 21.793 26.5 16 26.5ZM21.25 16A5.254 5.254 0 0 1 16 21.25 5.254 5.254 0 0 1 10.75 16 5.254 5.254 0 0 1 16 10.75 5.254 5.254 0 0 1 21.25 16Z"></path></svg>';
 
 export class IconRadioSelectedLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconRadioSelectedLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--radioSelectedLarge', '', null, 'IconRadioSelectedLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--radioSelectedLarge', '', null, 'IconRadioSelectedLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--radioSelectedLarge');
         this.root.append(svg);
     }

package/icons/IconRadioUnselected.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--radioUnselected"><path d="M8 1.219C4.264 1.219 1.219 4.264 1.219 8c0 3.736 3.045 6.781 6.781 6.781 3.736 0 6.781-3.045 6.781-6.781 0-3.736-3.045-6.781-6.781-6.781Zm0 12.25A5.47 5.47 0 0 1 2.531 8 5.47 5.47 0 0 1 8 2.531 5.47 5.47 0 0 1 13.469 8 5.47 5.47 0 0 1 8 13.469Z"></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--radioUnselected"><path d="M8 1.219C4.264 1.219 1.219 4.264 1.219 8c0 3.736 3.045 6.781 6.781 6.781 3.736 0 6.781-3.045 6.781-6.781 0-3.736-3.045-6.781-6.781-6.781Zm0 12.25A5.47 5.47 0 0 1 2.531 8 5.47 5.47 0 0 1 8 2.531 5.47 5.47 0 0 1 13.469 8 5.47 5.47 0 0 1 8 13.469Z"></path></svg>';
 
 export class IconRadioUnselected extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconRadioUnselected extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--radioUnselected', '', null, 'IconRadioUnselected');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--radioUnselected', '', null, 'IconRadioUnselected');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--radioUnselected');
         this.root.append(svg);
     }

package/icons/IconRadioUnselectedLarge.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--radioUnselectedLarge"><path d="M16 3.75C9.245 3.75 3.75 9.245 3.75 16S9.245 28.25 16 28.25 28.25 22.755 28.25 16 22.755 3.75 16 3.75Zm0 22.75c-5.793 0-10.5-4.707-10.5-10.5S10.207 5.5 16 5.5 26.5 10.207 26.5 16 21.793 26.5 16 26.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--radioUnselectedLarge"><path d="M16 3.75C9.245 3.75 3.75 9.245 3.75 16S9.245 28.25 16 28.25 28.25 22.755 28.25 16 22.755 3.75 16 3.75Zm0 22.75c-5.793 0-10.5-4.707-10.5-10.5S10.207 5.5 16 5.5 26.5 10.207 26.5 16 21.793 26.5 16 26.5Z"></path></svg>';
 
 export class IconRadioUnselectedLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconRadioUnselectedLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--radioUnselectedLarge', '', null, 'IconRadioUnselectedLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--radioUnselectedLarge', '', null, 'IconRadioUnselectedLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--radioUnselectedLarge');
         this.root.append(svg);
     }

package/icons/IconReceipt.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--receipt"><path d="M11.1 2.57a.23.23 0 0 1-.2 0L8 1.26 5.1 2.57a.23.23 0 0 1-.2 0L1.25.92v14.16l3.65-1.65a.23.23 0 0 1 .2 0L8 14.74l2.9-1.31a.23.23 0 0 1 .2 0l3.65 1.65V.92L11.1 2.57Zm2.15 10.19-1.53-.69a1.721 1.721 0 0 0-1.44 0L8 13.1l-2.28-1a1.701 1.701 0 0 0-1.44 0l-1.53.69V3.24l1.53.69a1.72 1.72 0 0 0 1.44 0L8 2.9l2.28 1a1.7 1.7 0 0 0 1.44 0l1.53-.69v9.55Z"></path><path d="M11 5.75H5v1.5h6v-1.5Z"></path><path d="M10 8.75H6v1.5h4v-1.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--receipt"><path d="M11.1 2.57a.23.23 0 0 1-.2 0L8 1.26 5.1 2.57a.23.23 0 0 1-.2 0L1.25.92v14.16l3.65-1.65a.23.23 0 0 1 .2 0L8 14.74l2.9-1.31a.23.23 0 0 1 .2 0l3.65 1.65V.92L11.1 2.57Zm2.15 10.19-1.53-.69a1.721 1.721 0 0 0-1.44 0L8 13.1l-2.28-1a1.701 1.701 0 0 0-1.44 0l-1.53.69V3.24l1.53.69a1.72 1.72 0 0 0 1.44 0L8 2.9l2.28 1a1.7 1.7 0 0 0 1.44 0l1.53-.69v9.55Z"></path><path d="M11 5.75H5v1.5h6v-1.5Z"></path><path d="M10 8.75H6v1.5h4v-1.5Z"></path></svg>';
 
 export class IconReceipt extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconReceipt extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--receipt', '', null, 'IconReceipt');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--receipt', '', null, 'IconReceipt');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--receipt');
         this.root.append(svg);
     }

package/icons/IconReceiptError.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--receiptError"><path d="M10.719 3.444a.201.201 0 0 1-.175 0L8.006 2.297 5.47 3.444a.201.201 0 0 1-.175 0L2.1 2v12.39l3.194-1.444a.202.202 0 0 1 .175 0l2.537 1.146 2.538-1.146a.202.202 0 0 1 .175 0l3.194 1.444V2l-3.194 1.444ZM12.6 12.36l-1.339-.604a1.505 1.505 0 0 0-1.26 0l-1.995.902-1.995-.875a1.488 1.488 0 0 0-1.26 0l-1.338.603V4.03l1.338.604a1.505 1.505 0 0 0 1.26 0l1.995-.902 1.995.875a1.488 1.488 0 0 0 1.26 0l1.34-.603v8.356Z"></path><path d="M9.979 7.131 8.938 8.2l1.076 1.067-.936.937L8.01 9.126l-1.067 1.077-.937-.937L7.083 8.2 6.006 7.13l.937-.936L8.01 7.271l1.068-1.076.9.936Z"></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--receiptError"><path d="M10.719 3.444a.201.201 0 0 1-.175 0L8.006 2.297 5.47 3.444a.201.201 0 0 1-.175 0L2.1 2v12.39l3.194-1.444a.202.202 0 0 1 .175 0l2.537 1.146 2.538-1.146a.202.202 0 0 1 .175 0l3.194 1.444V2l-3.194 1.444ZM12.6 12.36l-1.339-.604a1.505 1.505 0 0 0-1.26 0l-1.995.902-1.995-.875a1.488 1.488 0 0 0-1.26 0l-1.338.603V4.03l1.338.604a1.505 1.505 0 0 0 1.26 0l1.995-.902 1.995.875a1.488 1.488 0 0 0 1.26 0l1.34-.603v8.356Z"></path><path d="M9.979 7.131 8.938 8.2l1.076 1.067-.936.937L8.01 9.126l-1.067 1.077-.937-.937L7.083 8.2 6.006 7.13l.937-.936L8.01 7.271l1.068-1.076.9.936Z"></path></svg>';
 
 export class IconReceiptError extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconReceiptError extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--receiptError', '', null, 'IconReceiptError');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--receiptError', '', null, 'IconReceiptError');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--receiptError');
         this.root.append(svg);
     }

package/icons/IconReceiptErrorLarge.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--receiptErrorLarge"><path d="M19.5 11.625h-7v1.75h7v-1.75Z"></path><path d="M15.65 15.125h-4.9v1.75h3.447a8.444 8.444 0 0 1 1.453-1.75Z"></path><path d="m12.5 25.494-2.572-1.479a1.75 1.75 0 0 0-1.69 0l-.988.499V7.486l.989.525a1.75 1.75 0 0 0 1.688 0L12.5 6.506l2.625 1.488a1.75 1.75 0 0 0 1.75 0L19.5 6.506l2.625 1.479a1.75 1.75 0 0 0 1.689 0l.936-.499v6.239a8.361 8.361 0 0 1 1.75 1.085V4.573L22.939 6.47 19.5 4.494 16 6.463l-3.5-1.97-3.439 1.978L5.5 4.573v22.854l3.561-1.898 3.439 1.977 2.161-1.216a8.642 8.642 0 0 1-.875-1.496l-1.286.7Z"></path><path d="M27.27 18.861c-.288-.702-.737-1.315-1.242-1.881a6.47 6.47 0 0 0-.604-.595 6.501 6.501 0 0 0-8.549 0 6.44 6.44 0 0 0-1.855 2.625 6.447 6.447 0 0 0-.394 1.75v.551a6.563 6.563 0 1 0 12.644-2.45Zm-6.125 7.298a4.813 4.813 0 0 1-4.813-4.813v-.551a4.78 4.78 0 0 1 .56-1.75c.18-.318.397-.611.648-.875a4.786 4.786 0 0 1 7.149 0c.251.264.469.557.647.875a4.78 4.78 0 0 1 .56 1.75v.551a4.822 4.822 0 0 1-4.751 4.813Z"></path><path d="m22.858 24.353-1.735-1.743-1.734 1.743-1.242-1.242 1.743-1.734-1.743-1.735 1.242-1.242 1.735 1.743 1.734-1.743 1.242 1.242-1.743 1.735L24.1 23.11l-1.242 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--receiptErrorLarge"><path d="M19.5 11.625h-7v1.75h7v-1.75Z"></path><path d="M15.65 15.125h-4.9v1.75h3.447a8.444 8.444 0 0 1 1.453-1.75Z"></path><path d="m12.5 25.494-2.572-1.479a1.75 1.75 0 0 0-1.69 0l-.988.499V7.486l.989.525a1.75 1.75 0 0 0 1.688 0L12.5 6.506l2.625 1.488a1.75 1.75 0 0 0 1.75 0L19.5 6.506l2.625 1.479a1.75 1.75 0 0 0 1.689 0l.936-.499v6.239a8.361 8.361 0 0 1 1.75 1.085V4.573L22.939 6.47 19.5 4.494 16 6.463l-3.5-1.97-3.439 1.978L5.5 4.573v22.854l3.561-1.898 3.439 1.977 2.161-1.216a8.642 8.642 0 0 1-.875-1.496l-1.286.7Z"></path><path d="M27.27 18.861c-.288-.702-.737-1.315-1.242-1.881a6.47 6.47 0 0 0-.604-.595 6.501 6.501 0 0 0-8.549 0 6.44 6.44 0 0 0-1.855 2.625 6.447 6.447 0 0 0-.394 1.75v.551a6.563 6.563 0 1 0 12.644-2.45Zm-6.125 7.298a4.813 4.813 0 0 1-4.813-4.813v-.551a4.78 4.78 0 0 1 .56-1.75c.18-.318.397-.611.648-.875a4.786 4.786 0 0 1 7.149 0c.251.264.469.557.647.875a4.78 4.78 0 0 1 .56 1.75v.551a4.822 4.822 0 0 1-4.751 4.813Z"></path><path d="m22.858 24.353-1.735-1.743-1.734 1.743-1.242-1.242 1.743-1.734-1.743-1.735 1.242-1.242 1.735 1.743 1.734-1.743 1.242 1.242-1.743 1.735L24.1 23.11l-1.242 1.242Z"></path></svg>';
 
 export class IconReceiptErrorLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconReceiptErrorLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--receiptErrorLarge', '', null, 'IconReceiptErrorLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--receiptErrorLarge', '', null, 'IconReceiptErrorLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--receiptErrorLarge');
         this.root.append(svg);
     }