@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/dist/IconTemp.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--temp"><path d="M10.992 8V4.124A2.957 2.957 0 0 0 8 1.219a2.958 2.958 0 0 0-2.992 2.905V8a3.964 3.964 0 0 0-1.164 2.783A4.104 4.104 0 0 0 8 14.78a4.104 4.104 0 0 0 4.156-4.034A3.963 3.963 0 0 0 10.992 8ZM8 13.469a2.78 2.78 0 0 1-2.844-2.721 2.625 2.625 0 0 1 .937-2.004l.227-.193V4.124A1.645 1.645 0 0 1 8 2.53a1.645 1.645 0 0 1 1.68 1.593V8.55l.228.193a2.626 2.626 0 0 1 .936 2.004A2.784 2.784 0 0 1 8 13.468Zm1.313-2.406a1.312 1.312 0 1 1-1.97-1.13V6.25h1.313v3.684a1.304 1.304 0 0 1 .656 1.129Z"></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--temp"><path d="M10.992 8V4.124A2.957 2.957 0 0 0 8 1.219a2.958 2.958 0 0 0-2.992 2.905V8a3.964 3.964 0 0 0-1.164 2.783A4.104 4.104 0 0 0 8 14.78a4.104 4.104 0 0 0 4.156-4.034A3.963 3.963 0 0 0 10.992 8ZM8 13.469a2.78 2.78 0 0 1-2.844-2.721 2.625 2.625 0 0 1 .937-2.004l.227-.193V4.124A1.645 1.645 0 0 1 8 2.53a1.645 1.645 0 0 1 1.68 1.593V8.55l.228.193a2.626 2.626 0 0 1 .936 2.004A2.784 2.784 0 0 1 8 13.468Zm1.313-2.406a1.312 1.312 0 1 1-1.97-1.13V6.25h1.313v3.684a1.304 1.304 0 0 1 .656 1.129Z"></path></svg>';
 
 class IconTemp extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconTemp extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--temp', '', null, 'IconTemp');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--temp', '', null, 'IconTemp');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--temp');
         this.root.append(svg);
     }

package/dist/IconTempLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--tempLarge"><path d="M10.75 9H6.375V7.25h4.375V9Zm-3.5 3.5h3.5v-1.75h-3.5v1.75ZM6.375 16h4.375v-1.75H6.375V16Zm17.938 5.688a6.563 6.563 0 1 1-12.545-2.702 6.501 6.501 0 0 1 1.65-2.216V8.808a4.375 4.375 0 0 1 8.663 0v7.962a6.502 6.502 0 0 1 2.232 4.918Zm-1.75 0a4.803 4.803 0 0 0-1.89-3.816l-.342-.262V8.808a2.626 2.626 0 0 0-5.162 0v8.802l-.341.262a4.813 4.813 0 1 0 7.735 3.816Zm-1.75 0a3.063 3.063 0 1 1-3.938-2.923V12.5h1.75v6.265a3.063 3.063 0 0 1 2.188 2.922Zm-1.75 0a1.313 1.313 0 1 0-2.626 0 1.313 1.313 0 0 0 2.625 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--tempLarge"><path d="M10.75 9H6.375V7.25h4.375V9Zm-3.5 3.5h3.5v-1.75h-3.5v1.75ZM6.375 16h4.375v-1.75H6.375V16Zm17.938 5.688a6.563 6.563 0 1 1-12.545-2.702 6.501 6.501 0 0 1 1.65-2.216V8.808a4.375 4.375 0 0 1 8.663 0v7.962a6.502 6.502 0 0 1 2.232 4.918Zm-1.75 0a4.803 4.803 0 0 0-1.89-3.816l-.342-.262V8.808a2.626 2.626 0 0 0-5.162 0v8.802l-.341.262a4.813 4.813 0 1 0 7.735 3.816Zm-1.75 0a3.063 3.063 0 1 1-3.938-2.923V12.5h1.75v6.265a3.063 3.063 0 0 1 2.188 2.922Zm-1.75 0a1.313 1.313 0 1 0-2.626 0 1.313 1.313 0 0 0 2.625 0Z"></path></svg>';
 
 class IconTempLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconTempLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--tempLarge', '', null, 'IconTempLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--tempLarge', '', null, 'IconTempLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--tempLarge');
         this.root.append(svg);
     }

package/dist/IconTermsAndConditions.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--termsAndConditions"><g clip-path="url(#prefix__clip0_18_941)"><path d="M8.744 4.482H4.491v1.313h4.253V4.482Z"></path><path d="M6.329 7.519H4.491V8.83H6.33V7.52Z"></path><path d="M14.947 9.085c0-.831-.463-1.584-1.198-1.96l-.919-.473V1.22H1.219v12.6h5.897c.56 0 1.05 0 1.505-.018.201.158.412.315.656.447l1.68.708 1.707-.691a4.292 4.292 0 0 0 1.758-1.663c.298-.498.473-1.102.534-1.872V9.085h-.008ZM6.96 9.059v1.601l.052.411a4.39 4.39 0 0 0 .464 1.435H2.531V2.531h8.986V5.98l-.49-.254-2.8 1.339a2.214 2.214 0 0 0-1.26 1.995H6.96Zm6.326 2.879a2.955 2.955 0 0 1-1.172 1.128l-1.155.464-.053-.026-1.067-.447a2.857 2.857 0 0 1-.744-.595c-.088-.096-.184-.183-.263-.288-.262-.359-.437-.796-.516-1.313L8.28 10.6V9.05c0-.341.201-.665.516-.814l2.214-1.059.516.263 1.313.674.315.166c.297.158.49.464.49.796v1.61c-.035.49-.149.91-.35 1.234l-.009.018Z"></path><path d="m10.599 10.424-.604-.665-.971.883.857.937a.95.95 0 0 0 .7.315h.009a.966.966 0 0 0 .7-.298l1.592-1.68-.953-.901-1.34 1.409h.01Z"></path></g><defs><clipPath id="prefix__clip0_18_941"><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--termsAndConditions"><g clip-path="url(#prefix__clip0_18_941)"><path d="M8.744 4.482H4.491v1.313h4.253V4.482Z"></path><path d="M6.329 7.519H4.491V8.83H6.33V7.52Z"></path><path d="M14.947 9.085c0-.831-.463-1.584-1.198-1.96l-.919-.473V1.22H1.219v12.6h5.897c.56 0 1.05 0 1.505-.018.201.158.412.315.656.447l1.68.708 1.707-.691a4.292 4.292 0 0 0 1.758-1.663c.298-.498.473-1.102.534-1.872V9.085h-.008ZM6.96 9.059v1.601l.052.411a4.39 4.39 0 0 0 .464 1.435H2.531V2.531h8.986V5.98l-.49-.254-2.8 1.339a2.214 2.214 0 0 0-1.26 1.995H6.96Zm6.326 2.879a2.955 2.955 0 0 1-1.172 1.128l-1.155.464-.053-.026-1.067-.447a2.857 2.857 0 0 1-.744-.595c-.088-.096-.184-.183-.263-.288-.262-.359-.437-.796-.516-1.313L8.28 10.6V9.05c0-.341.201-.665.516-.814l2.214-1.059.516.263 1.313.674.315.166c.297.158.49.464.49.796v1.61c-.035.49-.149.91-.35 1.234l-.009.018Z"></path><path d="m10.599 10.424-.604-.665-.971.883.857.937a.95.95 0 0 0 .7.315h.009a.966.966 0 0 0 .7-.298l1.592-1.68-.953-.901-1.34 1.409h.01Z"></path></g><defs><clipPath id="prefix__clip0_18_941"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconTermsAndConditions extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconTermsAndConditions extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--termsAndConditions', '', null, 'IconTermsAndConditions');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--termsAndConditions', '', null, 'IconTermsAndConditions');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--termsAndConditions');
         this.root.append(svg);
     }

package/dist/IconTermsAndConditionsLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--termsAndConditionsLarge"><path d="M10.872 10.75h8.26v1.75h-8.26v-1.75Z"></path><path d="M10.872 15.125h4.13v1.75h-4.13v-1.75Z"></path><path d="m20.235 21.381.813.893 2.748-2.896 1.269 1.207-3.02 3.185a1.39 1.39 0 0 1-.997.429h-.008c-.385 0-.753-.167-1.007-.447l-1.085-1.19 1.287-1.18Z"></path><path fill-rule="evenodd" d="M27.917 19.483c0-.98-.551-1.873-1.426-2.328l-.875-.446V4.59H4.634v22.82h13.562c.04 0 .081-.002.12-.005a1.84 1.84 0 0 1 .108-.004c.245.175.498.341.778.49l2.581 1.094 2.617-1.059a6.723 6.723 0 0 0 2.704-2.555c.454-.77.726-1.697.822-2.782v-3.106h-.009Zm-12.171 3.526c.157 1.006.49 1.89.989 2.651H6.384V6.34h17.482v9.476l-1.969-1.006-4.733 2.257a2.643 2.643 0 0 0-1.497 2.372v2.957l.088.621-.009-.008Zm9.844 1.47c-.473.805-1.164 1.461-1.925 1.855l-1.873.752-.665-.28-1.172-.49a5.231 5.231 0 0 1-.989-.708 5.11 5.11 0 0 1-.656-.718c-.429-.578-.709-1.295-.831-2.135l-.062-.42v-2.896c0-.333.193-.648.499-.788l3.955-1.881 1.995 1.024 1.75.901.079.044a.872.872 0 0 1 .472.778v2.976c-.052.796-.245 1.478-.569 2.012l-.008-.026Z" 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--termsAndConditionsLarge"><path d="M10.872 10.75h8.26v1.75h-8.26v-1.75Z"></path><path d="M10.872 15.125h4.13v1.75h-4.13v-1.75Z"></path><path d="m20.235 21.381.813.893 2.748-2.896 1.269 1.207-3.02 3.185a1.39 1.39 0 0 1-.997.429h-.008c-.385 0-.753-.167-1.007-.447l-1.085-1.19 1.287-1.18Z"></path><path fill-rule="evenodd" d="M27.917 19.483c0-.98-.551-1.873-1.426-2.328l-.875-.446V4.59H4.634v22.82h13.562c.04 0 .081-.002.12-.005a1.84 1.84 0 0 1 .108-.004c.245.175.498.341.778.49l2.581 1.094 2.617-1.059a6.723 6.723 0 0 0 2.704-2.555c.454-.77.726-1.697.822-2.782v-3.106h-.009Zm-12.171 3.526c.157 1.006.49 1.89.989 2.651H6.384V6.34h17.482v9.476l-1.969-1.006-4.733 2.257a2.643 2.643 0 0 0-1.497 2.372v2.957l.088.621-.009-.008Zm9.844 1.47c-.473.805-1.164 1.461-1.925 1.855l-1.873.752-.665-.28-1.172-.49a5.231 5.231 0 0 1-.989-.708 5.11 5.11 0 0 1-.656-.718c-.429-.578-.709-1.295-.831-2.135l-.062-.42v-2.896c0-.333.193-.648.499-.788l3.955-1.881 1.995 1.024 1.75.901.079.044a.872.872 0 0 1 .472.778v2.976c-.052.796-.245 1.478-.569 2.012l-.008-.026Z" clip-rule="evenodd"></path></svg>';
 
 class IconTermsAndConditionsLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconTermsAndConditionsLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--termsAndConditionsLarge', '', null, 'IconTermsAndConditionsLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--termsAndConditionsLarge', '', null, 'IconTermsAndConditionsLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--termsAndConditionsLarge');
         this.root.append(svg);
     }

package/dist/IconThumbsDown.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--thumbsDown"><path d="M14.204 6.906 13.18 3.625a2.406 2.406 0 0 0-2.24-1.54H1.875v1.312H4.5a9.082 9.082 0 0 0-.131 1.61c-.003.781.067 1.56.21 2.328H1.875v1.312h4.314a.21.21 0 0 1 .183.105l2.503 5.154h.989a1.793 1.793 0 0 0 1.75-2.135l-.464-2.415 1.96-.481a1.514 1.514 0 0 0 .963-.726 1.557 1.557 0 0 0 .13-1.243Zm-1.269.569a.236.236 0 0 1-.14.105l-3.176.814.726 3.64a.473.473 0 0 1-.455.56h-.14L7.562 8.13a1.575 1.575 0 0 0-1.338-.787h-.272a10.99 10.99 0 0 1-.236-2.328 8.05 8.05 0 0 1 .14-1.61h5.084a1.076 1.076 0 0 1 1.006.674l1.007 3.22a.218.218 0 0 1-.018.175Z"></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--thumbsDown"><path d="M14.204 6.906 13.18 3.625a2.406 2.406 0 0 0-2.24-1.54H1.875v1.312H4.5a9.082 9.082 0 0 0-.131 1.61c-.003.781.067 1.56.21 2.328H1.875v1.312h4.314a.21.21 0 0 1 .183.105l2.503 5.154h.989a1.793 1.793 0 0 0 1.75-2.135l-.464-2.415 1.96-.481a1.514 1.514 0 0 0 .963-.726 1.557 1.557 0 0 0 .13-1.243Zm-1.269.569a.236.236 0 0 1-.14.105l-3.176.814.726 3.64a.473.473 0 0 1-.455.56h-.14L7.562 8.13a1.575 1.575 0 0 0-1.338-.787h-.272a10.99 10.99 0 0 1-.236-2.328 8.05 8.05 0 0 1 .14-1.61h5.084a1.076 1.076 0 0 1 1.006.674l1.007 3.22a.218.218 0 0 1-.018.175Z"></path></svg>';
 
 class IconThumbsDown extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconThumbsDown extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--thumbsDown', '', null, 'IconThumbsDown');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--thumbsDown', '', null, 'IconThumbsDown');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--thumbsDown');
         this.root.append(svg);
     }

package/dist/IconThumbsDownFilled.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--thumbsDownFilled"><path d="M4.404 5.016c-.01 1.234.17 2.461.534 3.64H1.874V2.094h2.992a8.085 8.085 0 0 0-.463 2.922Zm9.8 1.89L13.18 3.625a2.406 2.406 0 0 0-2.24-1.54H6.25a6.685 6.685 0 0 0-.569 2.922 9.984 9.984 0 0 0 .648 3.737l2.546 5.162h.402a1.75 1.75 0 0 0 1.75-2.135l-.402-2.389 2.45-.507a1.531 1.531 0 0 0 1.191-1.338 1.558 1.558 0 0 0-.062-.63Z"></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--thumbsDownFilled"><path d="M4.404 5.016c-.01 1.234.17 2.461.534 3.64H1.874V2.094h2.992a8.085 8.085 0 0 0-.463 2.922Zm9.8 1.89L13.18 3.625a2.406 2.406 0 0 0-2.24-1.54H6.25a6.685 6.685 0 0 0-.569 2.922 9.984 9.984 0 0 0 .648 3.737l2.546 5.162h.402a1.75 1.75 0 0 0 1.75-2.135l-.402-2.389 2.45-.507a1.531 1.531 0 0 0 1.191-1.338 1.558 1.558 0 0 0-.062-.63Z"></path></svg>';
 
 class IconThumbsDownFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconThumbsDownFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--thumbsDownFilled', '', null, 'IconThumbsDownFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--thumbsDownFilled', '', null, 'IconThumbsDownFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--thumbsDownFilled');
         this.root.append(svg);
     }

package/dist/IconThumbsDownFilledLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--thumbsDownFilledLarge"><path d="m26.587 17.242-4.724 1.164.97 4.839c.145.65.093 1.33-.148 1.951a3.43 3.43 0 0 1-3.754 2.179s-4.611-9.249-5.39-10.404c-.307-.43-.585-.88-.831-1.347a12.119 12.119 0 0 1-1.085-5.312 8.521 8.521 0 0 1 1.094-4.374c.245-.454.517-.892.814-1.313h8.88A4.375 4.375 0 0 1 26.5 7.39l1.986 6.545a2.625 2.625 0 0 1-1.899 3.307ZM11.18 5.072a10.29 10.29 0 0 0-1.304 5.24 13.842 13.842 0 0 0 1.286 6.126c.088.175.184.332.271.48H3.75V4.626h7.682l-.253.446Z"></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--thumbsDownFilledLarge"><path d="m26.587 17.242-4.724 1.164.97 4.839c.145.65.093 1.33-.148 1.951a3.43 3.43 0 0 1-3.754 2.179s-4.611-9.249-5.39-10.404c-.307-.43-.585-.88-.831-1.347a12.119 12.119 0 0 1-1.085-5.312 8.521 8.521 0 0 1 1.094-4.374c.245-.454.517-.892.814-1.313h8.88A4.375 4.375 0 0 1 26.5 7.39l1.986 6.545a2.625 2.625 0 0 1-1.899 3.307ZM11.18 5.072a10.29 10.29 0 0 0-1.304 5.24 13.842 13.842 0 0 0 1.286 6.126c.088.175.184.332.271.48H3.75V4.626h7.682l-.253.446Z"></path></svg>';
 
 class IconThumbsDownFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconThumbsDownFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--thumbsDownFilledLarge', '', null, 'IconThumbsDownFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--thumbsDownFilledLarge', '', null, 'IconThumbsDownFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--thumbsDownFilledLarge');
         this.root.append(svg);
     }

package/dist/IconThumbsDownLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--thumbsDownLarge"><path d="M28.53 13.944 26.5 7.39a4.375 4.375 0 0 0-4.086-2.765H3.75v1.75h6.825a9.976 9.976 0 0 0-.7 3.938c-.01 1.634.247 3.26.761 4.812H3.75v1.75h9.293a.876.876 0 0 1 .743.429l5.18 10.071h.534a3.411 3.411 0 0 0 3.343-4.078l-.98-4.89 4.76-1.12a2.625 2.625 0 0 0 1.907-3.343Zm-1.75 1.216a.875.875 0 0 1-.56.42l-6.405 1.514 1.313 6.545a1.68 1.68 0 0 1-.342 1.382c-.203.251-.478.434-.787.525l-4.681-9.1a2.625 2.625 0 0 0-2.275-1.321H12.5a12.416 12.416 0 0 1-.875-4.813 8.207 8.207 0 0 1 .875-3.937h9.914a2.625 2.625 0 0 1 2.423 1.619l2.022 6.475c.06.22.032.456-.079.656v.035Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--thumbsDownLarge"><path d="M28.53 13.944 26.5 7.39a4.375 4.375 0 0 0-4.086-2.765H3.75v1.75h6.825a9.976 9.976 0 0 0-.7 3.938c-.01 1.634.247 3.26.761 4.812H3.75v1.75h9.293a.876.876 0 0 1 .743.429l5.18 10.071h.534a3.411 3.411 0 0 0 3.343-4.078l-.98-4.89 4.76-1.12a2.625 2.625 0 0 0 1.907-3.343Zm-1.75 1.216a.875.875 0 0 1-.56.42l-6.405 1.514 1.313 6.545a1.68 1.68 0 0 1-.342 1.382c-.203.251-.478.434-.787.525l-4.681-9.1a2.625 2.625 0 0 0-2.275-1.321H12.5a12.416 12.416 0 0 1-.875-4.813 8.207 8.207 0 0 1 .875-3.937h9.914a2.625 2.625 0 0 1 2.423 1.619l2.022 6.475c.06.22.032.456-.079.656v.035Z"></path></svg>';
 
 class IconThumbsDownLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconThumbsDownLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--thumbsDownLarge', '', null, 'IconThumbsDownLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--thumbsDownLarge', '', null, 'IconThumbsDownLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--thumbsDownLarge');
         this.root.append(svg);
     }

package/dist/IconThumbsUp.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--thumbsUp"><path d="M14.072 7.878a1.512 1.512 0 0 0-.962-.753l-1.96-.481.49-2.415a1.75 1.75 0 0 0-.376-1.479 1.75 1.75 0 0 0-1.374-.656H8.875L6.372 7.239a.21.21 0 0 1-.183.105H1.875v1.312h2.739a12.513 12.513 0 0 0-.21 2.328 9.083 9.083 0 0 0 .096 1.61H1.875v1.312h9.065a2.406 2.406 0 0 0 2.24-1.531l1.024-3.272a1.558 1.558 0 0 0-.132-1.225Zm-1.12.822-1.006 3.22a1.076 1.076 0 0 1-1.006.674H5.856a8.05 8.05 0 0 1-.14-1.61 10.99 10.99 0 0 1 .236-2.328h.237a1.575 1.575 0 0 0 1.338-.787L9.75 3.406h.175a.473.473 0 0 1 .455.56l-.761 3.64 3.176.814a.236.236 0 0 1 .14.105.218.218 0 0 1 .018.175Z"></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--thumbsUp"><path d="M14.072 7.878a1.512 1.512 0 0 0-.962-.753l-1.96-.481.49-2.415a1.75 1.75 0 0 0-.376-1.479 1.75 1.75 0 0 0-1.374-.656H8.875L6.372 7.239a.21.21 0 0 1-.183.105H1.875v1.312h2.739a12.513 12.513 0 0 0-.21 2.328 9.083 9.083 0 0 0 .096 1.61H1.875v1.312h9.065a2.406 2.406 0 0 0 2.24-1.531l1.024-3.272a1.558 1.558 0 0 0-.132-1.225Zm-1.12.822-1.006 3.22a1.076 1.076 0 0 1-1.006.674H5.856a8.05 8.05 0 0 1-.14-1.61 10.99 10.99 0 0 1 .236-2.328h.237a1.575 1.575 0 0 0 1.338-.787L9.75 3.406h.175a.473.473 0 0 1 .455.56l-.761 3.64 3.176.814a.236.236 0 0 1 .14.105.218.218 0 0 1 .018.175Z"></path></svg>';
 
 class IconThumbsUp extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconThumbsUp extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--thumbsUp', '', null, 'IconThumbsUp');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--thumbsUp', '', null, 'IconThumbsUp');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--thumbsUp');
         this.root.append(svg);
     }

package/dist/IconThumbsUpFilled.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--thumbsUpFilled"><path d="M4.867 13.906H1.875V7.344h3.063a12.058 12.058 0 0 0-.534 3.64c-.027.994.13 1.985.463 2.922Zm9.206-6.028a1.53 1.53 0 0 0-.998-.753l-2.45-.507.473-2.39a1.75 1.75 0 0 0-1.75-2.134h-.473L6.372 7.239a9.984 9.984 0 0 0-.647 3.736 6.685 6.685 0 0 0 .525 2.931h4.655a2.407 2.407 0 0 0 2.275-1.531l1.024-3.272a1.558 1.558 0 0 0-.132-1.225Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--thumbsUpFilled"><path d="M4.867 13.906H1.875V7.344h3.063a12.058 12.058 0 0 0-.534 3.64c-.027.994.13 1.985.463 2.922Zm9.206-6.028a1.53 1.53 0 0 0-.998-.753l-2.45-.507.473-2.39a1.75 1.75 0 0 0-1.75-2.134h-.473L6.372 7.239a9.984 9.984 0 0 0-.647 3.736 6.685 6.685 0 0 0 .525 2.931h4.655a2.407 2.407 0 0 0 2.275-1.531l1.024-3.272a1.558 1.558 0 0 0-.132-1.225Z"></path></svg>';
 
 class IconThumbsUpFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconThumbsUpFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--thumbsUpFilled', '', null, 'IconThumbsUpFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--thumbsUpFilled', '', null, 'IconThumbsUpFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--thumbsUpFilled');
         this.root.append(svg);
     }

package/dist/IconThumbsUpFilledLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--thumbsUpFilledLarge"><path d="M28.469 18.065 26.5 24.61a4.375 4.375 0 0 1-4.086 2.765h-8.882c-.295-.407-.566-.83-.813-1.269a8.522 8.522 0 0 1-1.094-4.419 12.118 12.118 0 0 1 1.085-5.25c.246-.467.524-.917.831-1.347.779-1.155 5.39-10.404 5.39-10.404a3.43 3.43 0 0 1 3.754 2.135c.241.622.293 1.3.149 1.952l-.971 4.82 4.724 1.165a2.626 2.626 0 0 1 1.882 3.307Zm-17.037 9.31H3.75v-12.25h7.682c-.087.149-.183.306-.27.481a13.841 13.841 0 0 0-1.287 6.082 10.29 10.29 0 0 0 1.304 5.25l.253.437Z"></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--thumbsUpFilledLarge"><path d="M28.469 18.065 26.5 24.61a4.375 4.375 0 0 1-4.086 2.765h-8.882c-.295-.407-.566-.83-.813-1.269a8.522 8.522 0 0 1-1.094-4.419 12.118 12.118 0 0 1 1.085-5.25c.246-.467.524-.917.831-1.347.779-1.155 5.39-10.404 5.39-10.404a3.43 3.43 0 0 1 3.754 2.135c.241.622.293 1.3.149 1.952l-.971 4.82 4.724 1.165a2.626 2.626 0 0 1 1.882 3.307Zm-17.037 9.31H3.75v-12.25h7.682c-.087.149-.183.306-.27.481a13.841 13.841 0 0 0-1.287 6.082 10.29 10.29 0 0 0 1.304 5.25l.253.437Z"></path></svg>';
 
 class IconThumbsUpFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconThumbsUpFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--thumbsUpFilledLarge', '', null, 'IconThumbsUpFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--thumbsUpFilledLarge', '', null, 'IconThumbsUpFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--thumbsUpFilledLarge');
         this.root.append(svg);
     }

package/dist/IconThumbsUpLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--thumbsUpLarge"><path d="M28.302 16a2.625 2.625 0 0 0-1.68-1.26l-4.76-1.146.98-4.891A3.413 3.413 0 0 0 19.5 4.625h-.534l-5.18 10.071a.876.876 0 0 1-.743.429H3.75v1.75h6.886a14.997 14.997 0 0 0-.761 4.813 9.976 9.976 0 0 0 .7 3.937H3.75v1.75h18.664A4.374 4.374 0 0 0 26.5 24.61l2.047-6.554A2.625 2.625 0 0 0 28.302 16Zm-1.443 1.558-2.022 6.474a2.625 2.625 0 0 1-2.423 1.593H12.5a8.207 8.207 0 0 1-.875-3.938c-.03-1.646.267-3.282.875-4.812h.516a2.626 2.626 0 0 0 2.275-1.321l4.681-9.1c.31.09.585.274.788.525a1.678 1.678 0 0 1 .341 1.382l-1.312 6.545 6.405 1.514a.875.875 0 0 1 .56.42.876.876 0 0 1 .105.691v.027Z"></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--thumbsUpLarge"><path d="M28.302 16a2.625 2.625 0 0 0-1.68-1.26l-4.76-1.146.98-4.891A3.413 3.413 0 0 0 19.5 4.625h-.534l-5.18 10.071a.876.876 0 0 1-.743.429H3.75v1.75h6.886a14.997 14.997 0 0 0-.761 4.813 9.976 9.976 0 0 0 .7 3.937H3.75v1.75h18.664A4.374 4.374 0 0 0 26.5 24.61l2.047-6.554A2.625 2.625 0 0 0 28.302 16Zm-1.443 1.558-2.022 6.474a2.625 2.625 0 0 1-2.423 1.593H12.5a8.207 8.207 0 0 1-.875-3.938c-.03-1.646.267-3.282.875-4.812h.516a2.626 2.626 0 0 0 2.275-1.321l4.681-9.1c.31.09.585.274.788.525a1.678 1.678 0 0 1 .341 1.382l-1.312 6.545 6.405 1.514a.875.875 0 0 1 .56.42.876.876 0 0 1 .105.691v.027Z"></path></svg>';
 
 class IconThumbsUpLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconThumbsUpLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--thumbsUpLarge', '', null, 'IconThumbsUpLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--thumbsUpLarge', '', null, 'IconThumbsUpLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--thumbsUpLarge');
         this.root.append(svg);
     }

package/dist/IconToilet.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--toilet"><g clip-path="url(#prefix__clip0_18_2278)"><path d="M6.425 7.51a1.496 1.496 0 0 0-.954-.875l.14-.114A2.203 2.203 0 1 0 2.514 3.39a2.205 2.205 0 0 0 0 3.097l.14.114a1.496 1.496 0 0 0-.954.875L1 9.601a1.313 1.313 0 0 0 .499 1.47l.35.271v2.783H3.16v-3.439l-.875-.674.691-2.09a.455.455 0 0 1 .377-.14H4.84a.455.455 0 0 1 .376.14l.648 2.1-.875.664v3.439h1.26v-2.783l.35-.27a1.312 1.312 0 0 0 .525-1.47l-.7-2.092ZM3.44 4.316A.875.875 0 1 1 4.684 5.55.875.875 0 0 1 3.44 4.316Zm10.071 3.185a1.566 1.566 0 0 0-1.024-.875l.123-.096a2.188 2.188 0 1 0-3.097 0l.122.096a1.601 1.601 0 0 0-1.041.954l-1.05 4.865h1.242v1.68H10.1v-2.992h-.928l.683-3.203a.569.569 0 0 1 .428-.149h1.558c.245 0 .402.114.402.07l.71 3.282h-.928v2.992h1.312v-1.68h1.243l-1.068-4.944Zm-3.071-3.185a.876.876 0 1 1 1.244 1.235.876.876 0 0 1-1.244-1.235Z"></path></g><defs><clipPath id="prefix__clip0_18_2278"><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--toilet"><g clip-path="url(#prefix__clip0_18_2278)"><path d="M6.425 7.51a1.496 1.496 0 0 0-.954-.875l.14-.114A2.203 2.203 0 1 0 2.514 3.39a2.205 2.205 0 0 0 0 3.097l.14.114a1.496 1.496 0 0 0-.954.875L1 9.601a1.313 1.313 0 0 0 .499 1.47l.35.271v2.783H3.16v-3.439l-.875-.674.691-2.09a.455.455 0 0 1 .377-.14H4.84a.455.455 0 0 1 .376.14l.648 2.1-.875.664v3.439h1.26v-2.783l.35-.27a1.312 1.312 0 0 0 .525-1.47l-.7-2.092ZM3.44 4.316A.875.875 0 1 1 4.684 5.55.875.875 0 0 1 3.44 4.316Zm10.071 3.185a1.566 1.566 0 0 0-1.024-.875l.123-.096a2.188 2.188 0 1 0-3.097 0l.122.096a1.601 1.601 0 0 0-1.041.954l-1.05 4.865h1.242v1.68H10.1v-2.992h-.928l.683-3.203a.569.569 0 0 1 .428-.149h1.558c.245 0 .402.114.402.07l.71 3.282h-.928v2.992h1.312v-1.68h1.243l-1.068-4.944Zm-3.071-3.185a.876.876 0 1 1 1.244 1.235.876.876 0 0 1-1.244-1.235Z"></path></g><defs><clipPath id="prefix__clip0_18_2278"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconToilet extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconToilet extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--toilet', '', null, 'IconToilet');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--toilet', '', null, 'IconToilet');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--toilet');
         this.root.append(svg);
     }

package/dist/IconToiletLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--toiletLarge"><path d="M12.308 19.01a2.135 2.135 0 0 1-.753 2.319l-.752.612V26.5h-1.75v-5.399l1.4-1.128a.43.43 0 0 0 .183-.473l-1.198-3.894a.937.937 0 0 0-.875-.481h-2.6a.937.937 0 0 0-.874.481L3.864 19.5a.429.429 0 0 0 .184.446l1.4 1.129V26.5h-1.75v-4.559l-.753-.612a2.136 2.136 0 0 1-.752-2.319l1.198-3.885a2.625 2.625 0 0 1 2.573-1.75h2.572a2.625 2.625 0 0 1 2.573 1.75l1.199 3.885ZM3.75 9a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0ZM5.5 9A1.75 1.75 0 1 0 9 9a1.75 1.75 0 0 0-3.5 0Zm22.418 6.125a2.713 2.713 0 0 0-2.625-1.803h-2.765a2.721 2.721 0 0 0-2.678 1.882l-1.75 8.338h2.074V26.5h1.75v-4.655H20.26l1.278-6.125a1.024 1.024 0 0 1 .989-.595h2.695c.463 0 .875.236.962.49l1.304 6.23h-1.671V26.5h1.75v-2.905h2.073l-1.723-8.47ZM20.375 9a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0Zm1.75 0a1.75 1.75 0 1 0 3.5 0 1.75 1.75 0 0 0-3.5 0Zm-7 18.375h1.75V4.625h-1.75v22.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--toiletLarge"><path d="M12.308 19.01a2.135 2.135 0 0 1-.753 2.319l-.752.612V26.5h-1.75v-5.399l1.4-1.128a.43.43 0 0 0 .183-.473l-1.198-3.894a.937.937 0 0 0-.875-.481h-2.6a.937.937 0 0 0-.874.481L3.864 19.5a.429.429 0 0 0 .184.446l1.4 1.129V26.5h-1.75v-4.559l-.753-.612a2.136 2.136 0 0 1-.752-2.319l1.198-3.885a2.625 2.625 0 0 1 2.573-1.75h2.572a2.625 2.625 0 0 1 2.573 1.75l1.199 3.885ZM3.75 9a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0ZM5.5 9A1.75 1.75 0 1 0 9 9a1.75 1.75 0 0 0-3.5 0Zm22.418 6.125a2.713 2.713 0 0 0-2.625-1.803h-2.765a2.721 2.721 0 0 0-2.678 1.882l-1.75 8.338h2.074V26.5h1.75v-4.655H20.26l1.278-6.125a1.024 1.024 0 0 1 .989-.595h2.695c.463 0 .875.236.962.49l1.304 6.23h-1.671V26.5h1.75v-2.905h2.073l-1.723-8.47ZM20.375 9a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0Zm1.75 0a1.75 1.75 0 1 0 3.5 0 1.75 1.75 0 0 0-3.5 0Zm-7 18.375h1.75V4.625h-1.75v22.75Z"></path></svg>';
 
 class IconToiletLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconToiletLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--toiletLarge', '', null, 'IconToiletLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--toiletLarge', '', null, 'IconToiletLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--toiletLarge');
         this.root.append(svg);
     }

package/dist/IconTranslateFilled.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--translateFilled"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm-.122 8.793a7.875 7.875 0 0 1-1.374-.875 7.568 7.568 0 0 1-2.126 1.243l-.324-.875a6.352 6.352 0 0 0 1.793-1.006 6.055 6.055 0 0 1-.77-1.007l.753-.463c.194.312.416.605.665.875.175-.205.336-.421.481-.648.194-.317.352-.654.473-1.006H3.993v-.875h2.09v-.56h.876v.56h2.109v.875h-.692a5.11 5.11 0 0 1-.621 1.418c-.181.29-.386.565-.612.822.334.268.695.503 1.076.7l-.341.822Zm3.692 1.33-.07-.288-.184-.482H9.41l-.298.77h-.875l.123-.288.28-.709.21-.516.131-.306.63-1.628.28-.682h.971l1.654 4.094-.945.035Z"></path><path d="m10.021 9.006-.21.543-.114.289h1.287l-.648-1.654-.315.822Z"></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--translateFilled"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm-.122 8.793a7.875 7.875 0 0 1-1.374-.875 7.568 7.568 0 0 1-2.126 1.243l-.324-.875a6.352 6.352 0 0 0 1.793-1.006 6.055 6.055 0 0 1-.77-1.007l.753-.463c.194.312.416.605.665.875.175-.205.336-.421.481-.648.194-.317.352-.654.473-1.006H3.993v-.875h2.09v-.56h.876v.56h2.109v.875h-.692a5.11 5.11 0 0 1-.621 1.418c-.181.29-.386.565-.612.822.334.268.695.503 1.076.7l-.341.822Zm3.692 1.33-.07-.288-.184-.482H9.41l-.298.77h-.875l.123-.288.28-.709.21-.516.131-.306.63-1.628.28-.682h.971l1.654 4.094-.945.035Z"></path><path d="m10.021 9.006-.21.543-.114.289h1.287l-.648-1.654-.315.822Z"></path></svg>';
 
 class IconTranslateFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconTranslateFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--translateFilled', '', null, 'IconTranslateFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--translateFilled', '', null, 'IconTranslateFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--translateFilled');
         this.root.append(svg);
     }

package/dist/IconTranslateFilledLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--translateFilledLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm-.079 15.461a11.906 11.906 0 0 1-2.292-1.461 11.997 11.997 0 0 1-3.5 2.065l-.534-1.383c1.08-.4 2.088-.973 2.984-1.697a10.253 10.253 0 0 1-1.287-1.671l1.208-.814a9.79 9.79 0 0 0 1.094 1.409 8.148 8.148 0 0 0 1.592-2.721h-5.74V11.45h3.5v-.875h1.479v.875h3.5v1.488h-1.172A9.275 9.275 0 0 1 15.72 15.3c-.302.483-.644.94-1.024 1.365.545.443 1.131.832 1.75 1.164l-.525 1.382Zm6.125 2.223-.192-.49-.306-.788h-3.08l-.5 1.278h-1.487l.193-.49.472-1.173.35-.875.21-.516 1.05-2.712v.052l.455-1.129h1.619l2.756 6.825-1.54.018Z"></path><path d="m19.483 17.531-.35.91-.193.482h2.152l-1.076-2.748-.533 1.356Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--translateFilledLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm-.079 15.461a11.906 11.906 0 0 1-2.292-1.461 11.997 11.997 0 0 1-3.5 2.065l-.534-1.383c1.08-.4 2.088-.973 2.984-1.697a10.253 10.253 0 0 1-1.287-1.671l1.208-.814a9.79 9.79 0 0 0 1.094 1.409 8.148 8.148 0 0 0 1.592-2.721h-5.74V11.45h3.5v-.875h1.479v.875h3.5v1.488h-1.172A9.275 9.275 0 0 1 15.72 15.3c-.302.483-.644.94-1.024 1.365.545.443 1.131.832 1.75 1.164l-.525 1.382Zm6.125 2.223-.192-.49-.306-.788h-3.08l-.5 1.278h-1.487l.193-.49.472-1.173.35-.875.21-.516 1.05-2.712v.052l.455-1.129h1.619l2.756 6.825-1.54.018Z"></path><path d="m19.483 17.531-.35.91-.193.482h2.152l-1.076-2.748-.533 1.356Z"></path></svg>';
 
 class IconTranslateFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconTranslateFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--translateFilledLarge', '', null, 'IconTranslateFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--translateFilledLarge', '', null, 'IconTranslateFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--translateFilledLarge');
         this.root.append(svg);
     }

package/dist/IconTrash.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--trash"><path d="M9.864 1.219H6.136L5.49 2.53h5.022L9.864 1.22Z"></path><path d="M1.875 3.844v1.312h.962l.788 8.243a1.531 1.531 0 0 0 1.522 1.382h5.723a1.53 1.53 0 0 0 1.505-1.382l.779-8.243h.971V3.844H1.875Zm9.205 9.406a.228.228 0 0 1-.219.201H5.14a.228.228 0 0 1-.219-.201l-.77-8.094h7.7l-.77 8.094Z"></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--trash"><path d="M9.864 1.219H6.136L5.49 2.53h5.022L9.864 1.22Z"></path><path d="M1.875 3.844v1.312h.962l.788 8.243a1.531 1.531 0 0 0 1.522 1.382h5.723a1.53 1.53 0 0 0 1.505-1.382l.779-8.243h.971V3.844H1.875Zm9.205 9.406a.228.228 0 0 1-.219.201H5.14a.228.228 0 0 1-.219-.201l-.77-8.094h7.7l-.77 8.094Z"></path></svg>';
 
 class IconTrash extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconTrash extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--trash', '', null, 'IconTrash');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--trash', '', null, 'IconTrash');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--trash');
         this.root.append(svg);
     }

package/dist/IconTrashFilled.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--trashFilled"><path d="M9.864 1.219H6.136L5.49 2.53h5.022L9.864 1.22Z"></path><path d="M1.875 3.844v1.312h.962l.788 8.243a1.531 1.531 0 0 0 1.522 1.382h5.723a1.53 1.53 0 0 0 1.505-1.382l.779-8.243h.971V3.844H1.875Z"></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--trashFilled"><path d="M9.864 1.219H6.136L5.49 2.53h5.022L9.864 1.22Z"></path><path d="M1.875 3.844v1.312h.962l.788 8.243a1.531 1.531 0 0 0 1.522 1.382h5.723a1.53 1.53 0 0 0 1.505-1.382l.779-8.243h.971V3.844H1.875Z"></path></svg>';
 
 class IconTrashFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconTrashFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--trashFilled', '', null, 'IconTrashFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--trashFilled', '', null, 'IconTrashFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--trashFilled');
         this.root.append(svg);
     }

package/dist/IconTrashFilledLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--trashFilledLarge"><path d="M19.938 4.625h-7.875l-.876 1.75h9.626l-.875-1.75Z"></path><path d="M3.75 8.125v1.75h2.319l1.601 16.87a2.625 2.625 0 0 0 2.625 2.38h11.428a2.624 2.624 0 0 0 2.625-2.38l1.583-16.87h2.319v-1.75H3.75Zm8.461 6.125h1.75l.63 7.875h-1.75l-.63-7.875Zm6.948 7.875h-1.75l.63-7.875h1.75l-.63 7.875Z"></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--trashFilledLarge"><path d="M19.938 4.625h-7.875l-.876 1.75h9.626l-.875-1.75Z"></path><path d="M3.75 8.125v1.75h2.319l1.601 16.87a2.625 2.625 0 0 0 2.625 2.38h11.428a2.624 2.624 0 0 0 2.625-2.38l1.583-16.87h2.319v-1.75H3.75Zm8.461 6.125h1.75l.63 7.875h-1.75l-.63-7.875Zm6.948 7.875h-1.75l.63-7.875h1.75l-.63 7.875Z"></path></svg>';
 
 class IconTrashFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconTrashFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--trashFilledLarge', '', null, 'IconTrashFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--trashFilledLarge', '', null, 'IconTrashFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--trashFilledLarge');
         this.root.append(svg);
     }

package/dist/IconTrashLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 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--trashLarge"><path d="m18.03 14.25-.621 7.875h1.75l.63-7.875H18.03Z"></path><path d="M19.938 4.625h-7.875l-.876 1.75h9.626l-.875-1.75Z"></path><path d="m14.591 22.125-.621-7.875h-1.759l.63 7.875h1.75Z"></path><path d="M3.75 8.125v1.75h2.319l1.601 16.87a2.625 2.625 0 0 0 2.625 2.38h11.428a2.624 2.624 0 0 0 2.625-2.38l1.583-16.87h2.319v-1.75H3.75Zm18.839 18.454a.876.876 0 0 1-.875.796H10.278a.875.875 0 0 1-.876-.796L7.829 9.875h16.344L22.59 26.579Z"></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--trashLarge"><path d="m18.03 14.25-.621 7.875h1.75l.63-7.875H18.03Z"></path><path d="M19.938 4.625h-7.875l-.876 1.75h9.626l-.875-1.75Z"></path><path d="m14.591 22.125-.621-7.875h-1.759l.63 7.875h1.75Z"></path><path d="M3.75 8.125v1.75h2.319l1.601 16.87a2.625 2.625 0 0 0 2.625 2.38h11.428a2.624 2.624 0 0 0 2.625-2.38l1.583-16.87h2.319v-1.75H3.75Zm18.839 18.454a.876.876 0 0 1-.875.796H10.278a.875.875 0 0 1-.876-.796L7.829 9.875h16.344L22.59 26.579Z"></path></svg>';
 
 class IconTrashLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconTrashLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--trashLarge', '', null, 'IconTrashLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--trashLarge', '', null, 'IconTrashLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--trashLarge');
         this.root.append(svg);
     }