@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/dist/IconAppUsers.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--appUsers"><path d="m2.426 12.375.49-1.601A1.645 1.645 0 0 1 4.447 9.53H6.25c.319.012.625.126.875.324-.1.19-.182.39-.245.595l-.508 1.925h1.365l.464-1.557A1.662 1.662 0 0 1 9.75 9.53h1.838a1.663 1.663 0 0 1 1.522 1.287l.429 1.557h1.365l-.56-1.925a3.053 3.053 0 0 0-2.083-2.126 2.387 2.387 0 0 0 .499-3.771 2.45 2.45 0 0 0-3.395 0 2.362 2.362 0 0 0-.709 1.697 2.389 2.389 0 0 0 .709 1.698c.097.102.206.193.324.27A2.756 2.756 0 0 0 8 8.876a2.756 2.756 0 0 0-1.689-.612c.118-.079.226-.17.324-.272a2.389 2.389 0 0 0 .709-1.741 2.362 2.362 0 0 0-.709-1.697 2.45 2.45 0 0 0-3.395 0 2.362 2.362 0 0 0-.709 1.697 2.389 2.389 0 0 0 .709 1.698c.145.147.31.274.49.376a3.001 3.001 0 0 0-2.074 2.065l-.604 1.986h1.374Zm7.875-6.895a1.103 1.103 0 0 1 1.78.352 1.076 1.076 0 0 1-.24 1.188 1.085 1.085 0 0 1-1.54 0 1.077 1.077 0 0 1 0-1.54Zm-6.125 0a1.103 1.103 0 0 1 1.78.352 1.076 1.076 0 0 1-.24 1.188 1.085 1.085 0 0 1-1.54 0 1.076 1.076 0 0 1 0-1.54Z"></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--appUsers"><path d="m2.426 12.375.49-1.601A1.645 1.645 0 0 1 4.447 9.53H6.25c.319.012.625.126.875.324-.1.19-.182.39-.245.595l-.508 1.925h1.365l.464-1.557A1.662 1.662 0 0 1 9.75 9.53h1.838a1.663 1.663 0 0 1 1.522 1.287l.429 1.557h1.365l-.56-1.925a3.053 3.053 0 0 0-2.083-2.126 2.387 2.387 0 0 0 .499-3.771 2.45 2.45 0 0 0-3.395 0 2.362 2.362 0 0 0-.709 1.697 2.389 2.389 0 0 0 .709 1.698c.097.102.206.193.324.27A2.756 2.756 0 0 0 8 8.876a2.756 2.756 0 0 0-1.689-.612c.118-.079.226-.17.324-.272a2.389 2.389 0 0 0 .709-1.741 2.362 2.362 0 0 0-.709-1.697 2.45 2.45 0 0 0-3.395 0 2.362 2.362 0 0 0-.709 1.697 2.389 2.389 0 0 0 .709 1.698c.145.147.31.274.49.376a3.001 3.001 0 0 0-2.074 2.065l-.604 1.986h1.374Zm7.875-6.895a1.103 1.103 0 0 1 1.78.352 1.076 1.076 0 0 1-.24 1.188 1.085 1.085 0 0 1-1.54 0 1.077 1.077 0 0 1 0-1.54Zm-6.125 0a1.103 1.103 0 0 1 1.78.352 1.076 1.076 0 0 1-.24 1.188 1.085 1.085 0 0 1-1.54 0 1.076 1.076 0 0 1 0-1.54Z"></path></svg>';
 
 class IconAppUsers extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconAppUsers extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--appUsers', '', null, 'IconAppUsers');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--appUsers', '', null, 'IconAppUsers');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--appUsers');
         this.root.append(svg);
     }

package/dist/IconAppUsersLarge.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--appUsersLarge"><path d="M17.75 18.695a4.463 4.463 0 0 0-2.328-.875 3.5 3.5 0 1 0-4.952 0c.063.06.13.116.201.166a4.506 4.506 0 0 0-2.931 2.835L6.996 23h1.847l.56-1.636a2.774 2.774 0 0 1 2.624-1.864h2.94a2.721 2.721 0 0 1 1.61.516 4.513 4.513 0 0 0-.358.779L15.475 23h1.855l.551-1.645a2.765 2.765 0 0 1 2.625-1.855h2.949a2.765 2.765 0 0 1 2.625 1.855L26.658 23h1.846l-.744-2.205a4.49 4.49 0 0 0-2.931-2.835c.07-.05.138-.106.201-.166a3.5 3.5 0 0 0 0-4.935 3.57 3.57 0 0 0-4.935 0 3.5 3.5 0 0 0 0 4.926 4.524 4.524 0 0 0-2.345.91Zm-3.579-2.135a1.75 1.75 0 1 1-2.49-2.459 1.75 1.75 0 0 1 2.49 2.459Zm7.158-2.459a1.75 1.75 0 0 1 2.975 1.225c0 .462-.182.906-.508 1.234a1.75 1.75 0 0 1-2.467 0 1.75 1.75 0 0 1-.508-1.234c.002-.459.184-.899.508-1.225Z"></path><path d="M5.5 26.5a.875.875 0 0 1-.875-.796V7.189a.875.875 0 0 1 .971-.814H7.53l.665 1.505h5.11l.665-1.505h1.934a.875.875 0 0 1 .971.814v2.686h1.75V7.189a2.626 2.626 0 0 0-2.721-2.564H5.596a2.625 2.625 0 0 0-2.721 2.564v18.497a2.625 2.625 0 0 0 2.721 2.564H16a2.625 2.625 0 0 0 2.468-1.75H5.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--appUsersLarge"><path d="M17.75 18.695a4.463 4.463 0 0 0-2.328-.875 3.5 3.5 0 1 0-4.952 0c.063.06.13.116.201.166a4.506 4.506 0 0 0-2.931 2.835L6.996 23h1.847l.56-1.636a2.774 2.774 0 0 1 2.624-1.864h2.94a2.721 2.721 0 0 1 1.61.516 4.513 4.513 0 0 0-.358.779L15.475 23h1.855l.551-1.645a2.765 2.765 0 0 1 2.625-1.855h2.949a2.765 2.765 0 0 1 2.625 1.855L26.658 23h1.846l-.744-2.205a4.49 4.49 0 0 0-2.931-2.835c.07-.05.138-.106.201-.166a3.5 3.5 0 0 0 0-4.935 3.57 3.57 0 0 0-4.935 0 3.5 3.5 0 0 0 0 4.926 4.524 4.524 0 0 0-2.345.91Zm-3.579-2.135a1.75 1.75 0 1 1-2.49-2.459 1.75 1.75 0 0 1 2.49 2.459Zm7.158-2.459a1.75 1.75 0 0 1 2.975 1.225c0 .462-.182.906-.508 1.234a1.75 1.75 0 0 1-2.467 0 1.75 1.75 0 0 1-.508-1.234c.002-.459.184-.899.508-1.225Z"></path><path d="M5.5 26.5a.875.875 0 0 1-.875-.796V7.189a.875.875 0 0 1 .971-.814H7.53l.665 1.505h5.11l.665-1.505h1.934a.875.875 0 0 1 .971.814v2.686h1.75V7.189a2.626 2.626 0 0 0-2.721-2.564H5.596a2.625 2.625 0 0 0-2.721 2.564v18.497a2.625 2.625 0 0 0 2.721 2.564H16a2.625 2.625 0 0 0 2.468-1.75H5.5Z"></path></svg>';
 
 class IconAppUsersLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconAppUsersLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--appUsersLarge', '', null, 'IconAppUsersLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--appUsersLarge', '', null, 'IconAppUsersLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--appUsersLarge');
         this.root.append(svg);
     }

package/dist/IconArrowDown.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--arrowDown"><path d="M7.25 1v11.65L3.49 8.89 2.43 10l4.69 4.68a1.239 1.239 0 0 0 1.76 0L13.57 10l-1.06-1.11-3.76 3.76V1h-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--arrowDown"><path d="M7.25 1v11.65L3.49 8.89 2.43 10l4.69 4.68a1.239 1.239 0 0 0 1.76 0L13.57 10l-1.06-1.11-3.76 3.76V1h-1.5Z"></path></svg>';
 
 class IconArrowDown extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconArrowDown extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowDown', '', null, 'IconArrowDown');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowDown', '', null, 'IconArrowDown');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--arrowDown');
         this.root.append(svg);
     }

package/dist/IconArrowDownCircle.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--arrowDownCircle"><path d="M7.344 1.577v7.167L5.445 6.845l-.945.928 2.713 2.712a1.084 1.084 0 0 0 1.54 0L11.5 7.773l-.945-.928-1.899 1.899V1.577H7.344Z"></path><path d="M9.969 1.315V2.75a5.46 5.46 0 1 1-3.938 0V1.315a6.781 6.781 0 1 0 3.938 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--arrowDownCircle"><path d="M7.344 1.577v7.167L5.445 6.845l-.945.928 2.713 2.712a1.084 1.084 0 0 0 1.54 0L11.5 7.773l-.945-.928-1.899 1.899V1.577H7.344Z"></path><path d="M9.969 1.315V2.75a5.46 5.46 0 1 1-3.938 0V1.315a6.781 6.781 0 1 0 3.938 0Z"></path></svg>';
 
 class IconArrowDownCircle extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconArrowDownCircle extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowDownCircle', '', null, 'IconArrowDownCircle');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowDownCircle', '', null, 'IconArrowDownCircle');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--arrowDownCircle');
         this.root.append(svg);
     }

package/dist/IconArrowDownCircleFilled.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--arrowDownCircleFilled"><path d="M8.656 1.254v7.49l1.899-1.899.945.927-2.712 2.713a1.084 1.084 0 0 1-1.54 0L4.5 7.772l.945-.927 1.899 1.899v-7.49a6.781 6.781 0 1 0 1.312 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--arrowDownCircleFilled"><path d="M8.656 1.254v7.49l1.899-1.899.945.927-2.712 2.713a1.084 1.084 0 0 1-1.54 0L4.5 7.772l.945-.927 1.899 1.899v-7.49a6.781 6.781 0 1 0 1.312 0Z"></path></svg>';
 
 class IconArrowDownCircleFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconArrowDownCircleFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowDownCircleFilled', '', null, 'IconArrowDownCircleFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowDownCircleFilled', '', null, 'IconArrowDownCircleFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--arrowDownCircleFilled');
         this.root.append(svg);
     }

package/dist/IconArrowDownCircleFilledLarge.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--arrowDownCircleFilledLarge"><path d="M16.875 3.75v15.367l4.165-4.17 1.234 1.235-5.04 5.047a1.749 1.749 0 0 1-2.468 0l-5.04-5.047 1.234-1.235 4.165 4.17V3.75a12.244 12.244 0 0 0-8.239 4.038 12.275 12.275 0 0 0 .608 17.023 12.242 12.242 0 0 0 17.012 0 12.273 12.273 0 0 0 .608-17.023 12.244 12.244 0 0 0-8.239-4.038Z"></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--arrowDownCircleFilledLarge"><path d="M16.875 3.75v15.367l4.165-4.17 1.234 1.235-5.04 5.047a1.749 1.749 0 0 1-2.468 0l-5.04-5.047 1.234-1.235 4.165 4.17V3.75a12.244 12.244 0 0 0-8.239 4.038 12.275 12.275 0 0 0 .608 17.023 12.242 12.242 0 0 0 17.012 0 12.273 12.273 0 0 0 .608-17.023 12.244 12.244 0 0 0-8.239-4.038Z"></path></svg>';
 
 class IconArrowDownCircleFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconArrowDownCircleFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowDownCircleFilledLarge', '', null, 'IconArrowDownCircleFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowDownCircleFilledLarge', '', null, 'IconArrowDownCircleFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--arrowDownCircleFilledLarge');
         this.root.append(svg);
     }

package/dist/IconArrowDownCircleLarge.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--arrowDownCircleLarge"><path d="M18.625 4.873v1.74c2.474.617 4.631 2.084 6.065 4.126a9.864 9.864 0 0 1 1.726 6.966c-.322 2.448-1.557 4.698-3.475 6.329A10.72 10.72 0 0 1 16 26.564c-2.556 0-5.024-.9-6.941-2.53-1.918-1.631-3.153-3.881-3.475-6.329A9.864 9.864 0 0 1 7.31 10.74c1.434-2.042 3.59-3.509 6.065-4.126v-1.74c-2.95.625-5.557 2.28-7.32 4.647A11.521 11.521 0 0 0 3.82 17.7c.326 2.898 1.75 5.579 3.997 7.526C10.066 27.173 12.98 28.25 16 28.25c3.02 0 5.934-1.077 8.182-3.025 2.248-1.947 3.671-4.628 3.997-7.526a11.52 11.52 0 0 0-2.233-8.179c-1.764-2.367-4.37-4.022-7.321-4.647Z"></path><path d="m9.726 16.623 5.04 4.865c.328.315.772.492 1.234.492.462 0 .906-.177 1.234-.492l5.04-4.865-1.234-1.191-4.165 4.02V3.75h-1.75v15.703l-4.165-4.021-1.234 1.191Z"></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--arrowDownCircleLarge"><path d="M18.625 4.873v1.74c2.474.617 4.631 2.084 6.065 4.126a9.864 9.864 0 0 1 1.726 6.966c-.322 2.448-1.557 4.698-3.475 6.329A10.72 10.72 0 0 1 16 26.564c-2.556 0-5.024-.9-6.941-2.53-1.918-1.631-3.153-3.881-3.475-6.329A9.864 9.864 0 0 1 7.31 10.74c1.434-2.042 3.59-3.509 6.065-4.126v-1.74c-2.95.625-5.557 2.28-7.32 4.647A11.521 11.521 0 0 0 3.82 17.7c.326 2.898 1.75 5.579 3.997 7.526C10.066 27.173 12.98 28.25 16 28.25c3.02 0 5.934-1.077 8.182-3.025 2.248-1.947 3.671-4.628 3.997-7.526a11.52 11.52 0 0 0-2.233-8.179c-1.764-2.367-4.37-4.022-7.321-4.647Z"></path><path d="m9.726 16.623 5.04 4.865c.328.315.772.492 1.234.492.462 0 .906-.177 1.234-.492l5.04-4.865-1.234-1.191-4.165 4.02V3.75h-1.75v15.703l-4.165-4.021-1.234 1.191Z"></path></svg>';
 
 class IconArrowDownCircleLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconArrowDownCircleLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowDownCircleLarge', '', null, 'IconArrowDownCircleLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowDownCircleLarge', '', null, 'IconArrowDownCircleLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--arrowDownCircleLarge');
         this.root.append(svg);
     }

package/dist/IconArrowDownLarge.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--arrowDownLarge"><path d="M15.125 3.75v21.875l-7-7-1.242 1.207 7.875 7.875a1.75 1.75 0 0 0 2.476 0l7.875-7.875-1.234-1.207-7 7V3.75h-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--arrowDownLarge"><path d="M15.125 3.75v21.875l-7-7-1.242 1.207 7.875 7.875a1.75 1.75 0 0 0 2.476 0l7.875-7.875-1.234-1.207-7 7V3.75h-1.75Z"></path></svg>';
 
 class IconArrowDownLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconArrowDownLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowDownLarge', '', null, 'IconArrowDownLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowDownLarge', '', null, 'IconArrowDownLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--arrowDownLarge');
         this.root.append(svg);
     }

package/dist/IconArrowInCircle.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--arrowInCircle"><path d="M1.639 8.595h7.166l-1.899 1.907.928.928 2.712-2.713a1.11 1.11 0 0 0 0-1.548L7.834 4.5l-.928.875 1.899 1.907H1.639v1.313Z"></path><path d="M7.851 1.157A6.799 6.799 0 0 0 1.367 5.97H2.75a5.469 5.469 0 1 1 0 3.937H1.376a6.773 6.773 0 1 0 6.475-8.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 16 16" class="c-pieIcon c-pieIcon--arrowInCircle"><path d="M1.639 8.595h7.166l-1.899 1.907.928.928 2.712-2.713a1.11 1.11 0 0 0 0-1.548L7.834 4.5l-.928.875 1.899 1.907H1.639v1.313Z"></path><path d="M7.851 1.157A6.799 6.799 0 0 0 1.367 5.97H2.75a5.469 5.469 0 1 1 0 3.937H1.376a6.773 6.773 0 1 0 6.475-8.75Z"></path></svg>';
 
 class IconArrowInCircle extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconArrowInCircle extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowInCircle', '', null, 'IconArrowInCircle');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowInCircle', '', null, 'IconArrowInCircle');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--arrowInCircle');
         this.root.append(svg);
     }

package/dist/IconArrowInCircleLarge.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--arrowInCircleLarge"><path d="M16 3.75a12.25 12.25 0 0 0-11.961 9.625H5.84a10.5 10.5 0 1 1 0 5.25H4.04A12.25 12.25 0 1 0 16 3.75Z"></path><path d="m19.141 16.875-4.165 4.165 1.234 1.234 5.04-5.04c.085-.083.161-.173.227-.272a1.75 1.75 0 0 0 0-1.925 1.7 1.7 0 0 0-.227-.27l-5.04-5.04-1.234 1.233 4.165 4.165H2.875v1.75h16.266Z"></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--arrowInCircleLarge"><path d="M16 3.75a12.25 12.25 0 0 0-11.961 9.625H5.84a10.5 10.5 0 1 1 0 5.25H4.04A12.25 12.25 0 1 0 16 3.75Z"></path><path d="m19.141 16.875-4.165 4.165 1.234 1.234 5.04-5.04c.085-.083.161-.173.227-.272a1.75 1.75 0 0 0 0-1.925 1.7 1.7 0 0 0-.227-.27l-5.04-5.04-1.234 1.233 4.165 4.165H2.875v1.75h16.266Z"></path></svg>';
 
 class IconArrowInCircleLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconArrowInCircleLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowInCircleLarge', '', null, 'IconArrowInCircleLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowInCircleLarge', '', null, 'IconArrowInCircleLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--arrowInCircleLarge');
         this.root.append(svg);
     }

package/dist/IconArrowLeft.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--arrowLeft"><path d="M15 7.25H3.35l3.76-3.76-1.06-1.06-4.68 4.69a1.24 1.24 0 0 0 0 1.76l4.68 4.69 1.06-1.06-3.76-3.76H15v-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--arrowLeft"><path d="M15 7.25H3.35l3.76-3.76-1.06-1.06-4.68 4.69a1.24 1.24 0 0 0 0 1.76l4.68 4.69 1.06-1.06-3.76-3.76H15v-1.5Z"></path></svg>';
 
 class IconArrowLeft extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconArrowLeft extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowLeft', '', null, 'IconArrowLeft');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowLeft', '', null, 'IconArrowLeft');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--arrowLeft');
         this.root.append(svg);
     }

package/dist/IconArrowLeftLarge.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--arrowLeftLarge"><path d="M28.25 15.125H6.375l7-7-1.207-1.243-7.875 7.875a1.751 1.751 0 0 0 0 2.477l7.875 7.875 1.207-1.234-7-7H28.25v-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--arrowLeftLarge"><path d="M28.25 15.125H6.375l7-7-1.207-1.243-7.875 7.875a1.751 1.751 0 0 0 0 2.477l7.875 7.875 1.207-1.234-7-7H28.25v-1.75Z"></path></svg>';
 
 class IconArrowLeftLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconArrowLeftLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowLeftLarge', '', null, 'IconArrowLeftLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowLeftLarge', '', null, 'IconArrowLeftLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--arrowLeftLarge');
         this.root.append(svg);
     }

package/dist/IconArrowOutCircle.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--arrowOutCircle"><path d="M14.046 7.169 11.334 4.5l-.928.875 1.899 1.899H5.139v1.312h7.166l-1.899 1.908.928.927 2.712-2.712a1.111 1.111 0 0 0 0-1.54Z"></path><path d="M8.149 13.408a5.469 5.469 0 0 1 0-10.938 5.25 5.25 0 0 1 2.87.875h2.056a6.695 6.695 0 0 0-4.926-2.188 6.781 6.781 0 1 0 0 13.563 6.659 6.659 0 0 0 4.926-2.188h-2.056a5.25 5.25 0 0 1-2.87.876Z"></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--arrowOutCircle"><path d="M14.046 7.169 11.334 4.5l-.928.875 1.899 1.899H5.139v1.312h7.166l-1.899 1.908.928.927 2.712-2.712a1.111 1.111 0 0 0 0-1.54Z"></path><path d="M8.149 13.408a5.469 5.469 0 0 1 0-10.938 5.25 5.25 0 0 1 2.87.875h2.056a6.695 6.695 0 0 0-4.926-2.188 6.781 6.781 0 1 0 0 13.563 6.659 6.659 0 0 0 4.926-2.188h-2.056a5.25 5.25 0 0 1-2.87.876Z"></path></svg>';
 
 class IconArrowOutCircle extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconArrowOutCircle extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowOutCircle', '', null, 'IconArrowOutCircle');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowOutCircle', '', null, 'IconArrowOutCircle');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--arrowOutCircle');
         this.root.append(svg);
     }

package/dist/IconArrowOutCircleLarge.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--arrowOutCircleLarge"><path d="M28.512 15.037a1.696 1.696 0 0 0-.227-.27l-5.04-5.04-1.234 1.233 4.165 4.165H9.875v1.75h16.301l-4.165 4.165 1.234 1.234 5.005-5.04a1.75 1.75 0 0 0 .262-2.196Z"></path><path d="M16 26.5a10.5 10.5 0 1 1 6.921-18.375h2.442a12.25 12.25 0 1 0 0 15.75H22.92A10.5 10.5 0 0 1 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--arrowOutCircleLarge"><path d="M28.512 15.037a1.696 1.696 0 0 0-.227-.27l-5.04-5.04-1.234 1.233 4.165 4.165H9.875v1.75h16.301l-4.165 4.165 1.234 1.234 5.005-5.04a1.75 1.75 0 0 0 .262-2.196Z"></path><path d="M16 26.5a10.5 10.5 0 1 1 6.921-18.375h2.442a12.25 12.25 0 1 0 0 15.75H22.92A10.5 10.5 0 0 1 16 26.5Z"></path></svg>';
 
 class IconArrowOutCircleLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconArrowOutCircleLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowOutCircleLarge', '', null, 'IconArrowOutCircleLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowOutCircleLarge', '', null, 'IconArrowOutCircleLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--arrowOutCircleLarge');
         this.root.append(svg);
     }

package/dist/IconArrowRight.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--arrowRight"><path d="M1 8.75h11.65l-3.76 3.76L10 13.57l4.68-4.69a1.239 1.239 0 0 0 0-1.76L10 2.43 8.89 3.49l3.76 3.76H1v1.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--arrowRight"><path d="M1 8.75h11.65l-3.76 3.76L10 13.57l4.68-4.69a1.239 1.239 0 0 0 0-1.76L10 2.43 8.89 3.49l3.76 3.76H1v1.5Z"></path></svg>';
 
 class IconArrowRight extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconArrowRight extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowRight', '', null, 'IconArrowRight');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowRight', '', null, 'IconArrowRight');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--arrowRight');
         this.root.append(svg);
     }

package/dist/IconArrowRightLarge.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--arrowRightLarge"><path d="M3.75 16.875h21.875l-7 7 1.234 1.234 7.875-7.875a1.748 1.748 0 0 0 0-2.477l-7.875-7.875-1.234 1.243 7 7H3.75v1.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--arrowRightLarge"><path d="M3.75 16.875h21.875l-7 7 1.234 1.234 7.875-7.875a1.748 1.748 0 0 0 0-2.477l-7.875-7.875-1.234 1.243 7 7H3.75v1.75Z"></path></svg>';
 
 class IconArrowRightLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconArrowRightLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowRightLarge', '', null, 'IconArrowRightLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowRightLarge', '', null, 'IconArrowRightLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--arrowRightLarge');
         this.root.append(svg);
     }

package/dist/IconArrowUp.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--arrowUp"><path d="M8.656 14.125V3.931l3.29 3.29.928-.927L8.77 2.199a1.085 1.085 0 0 0-1.54 0L3.126 6.294l.928.927 3.29-3.29v10.194h1.312Z"></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--arrowUp"><path d="M8.656 14.125V3.931l3.29 3.29.928-.927L8.77 2.199a1.085 1.085 0 0 0-1.54 0L3.126 6.294l.928.927 3.29-3.29v10.194h1.312Z"></path></svg>';
 
 class IconArrowUp extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconArrowUp extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowUp', '', null, 'IconArrowUp');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowUp', '', null, 'IconArrowUp');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--arrowUp');
         this.root.append(svg);
     }

package/dist/IconArrowUpLarge.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--arrowUpLarge"><path d="M16.875 28.25V6.375l7 7 1.234-1.234-7.875-7.875a1.751 1.751 0 0 0-2.477 0l-7.874 7.875 1.242 1.234 7-7V28.25h1.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--arrowUpLarge"><path d="M16.875 28.25V6.375l7 7 1.234-1.234-7.875-7.875a1.751 1.751 0 0 0-2.477 0l-7.874 7.875 1.242 1.234 7-7V28.25h1.75Z"></path></svg>';
 
 class IconArrowUpLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconArrowUpLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowUpLarge', '', null, 'IconArrowUpLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowUpLarge', '', null, 'IconArrowUpLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--arrowUpLarge');
         this.root.append(svg);
     }

package/dist/IconArrowUpLeft.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--arrowUpLeft"><path d="m12.795 11.867-7.21-7.21h4.655V3.345H4.439a1.094 1.094 0 0 0-1.094 1.094v5.801h1.313V5.585l7.21 7.21.927-.928Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--arrowUpLeft"><path d="m12.795 11.867-7.21-7.21h4.655V3.345H4.439a1.094 1.094 0 0 0-1.094 1.094v5.801h1.313V5.585l7.21 7.21.927-.928Z"></path></svg>';
 
 class IconArrowUpLeft extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconArrowUpLeft extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowUpLeft', '', null, 'IconArrowUpLeft');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowUpLeft', '', null, 'IconArrowUpLeft');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--arrowUpLeft');
         this.root.append(svg);
     }

package/dist/IconArrowUpLeftLarge.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--arrowUpLeftLarge"><path d="M25.284 24.041 9.814 8.571h9.922v-1.75H8.58a1.75 1.75 0 0 0-1.75 1.75v11.165h1.75V9.805l15.47 15.47 1.234-1.234Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--arrowUpLeftLarge"><path d="M25.284 24.041 9.814 8.571h9.922v-1.75H8.58a1.75 1.75 0 0 0-1.75 1.75v11.165h1.75V9.805l15.47 15.47 1.234-1.234Z"></path></svg>';
 
 class IconArrowUpLeftLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconArrowUpLeftLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowUpLeftLarge', '', null, 'IconArrowUpLeftLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--arrowUpLeftLarge', '', null, 'IconArrowUpLeftLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--arrowUpLeftLarge');
         this.root.append(svg);
     }

package/dist/IconAtSymbol.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--atSymbol"><path d="M13.74 4.832a5.348 5.348 0 0 0-1.365-1.855 5.706 5.706 0 0 0-1.951-1.102 7.56 7.56 0 0 0-2.371-.385 6.422 6.422 0 0 0-2.53.49c-.748.309-1.425.77-1.985 1.356a6.011 6.011 0 0 0-1.304 2.091 7.35 7.35 0 0 0-.464 2.695 6.816 6.816 0 0 0 .464 2.564 5.879 5.879 0 0 0 3.255 3.343 6.29 6.29 0 0 0 2.441.481 6.056 6.056 0 0 0 2.625-.595h.096l-.402-1.085-.105.053a4.75 4.75 0 0 1-.998.34 5.859 5.859 0 0 1-1.198.123 4.76 4.76 0 0 1-1.908-.385A4.629 4.629 0 0 1 4.5 11.86a4.97 4.97 0 0 1-1.015-1.645 5.915 5.915 0 0 1-.367-2.118c-.01-.767.11-1.53.358-2.257.222-.63.57-1.208 1.024-1.698A4.375 4.375 0 0 1 6.05 3.074a5.145 5.145 0 0 1 2.004-.377 6.352 6.352 0 0 1 1.88.272 4.375 4.375 0 0 1 1.567.822c.461.394.826.888 1.068 1.444.278.67.412 1.392.393 2.117a4.7 4.7 0 0 1-.148 1.26 3.08 3.08 0 0 1-.438.954c-.15.24-.354.44-.595.586-.186.111-.396.177-.612.193V4.561H9.873V5.62a2.03 2.03 0 0 0-.753-.814 2.573 2.573 0 0 0-1.409-.394 2.887 2.887 0 0 0-1.233.263c-.373.18-.706.433-.98.744-.282.334-.501.717-.648 1.128A4.235 4.235 0 0 0 4.614 8c-.006.5.074.997.236 1.47.142.422.361.814.648 1.155.272.31.605.56.98.735.388.17.809.257 1.233.254.5.01.99-.137 1.4-.42.317-.209.578-.491.762-.823v1.085h1.04c.454.004.903-.094 1.313-.288.397-.2.746-.484 1.024-.832.311-.381.549-.817.7-1.286a5.19 5.19 0 0 0 .245-1.663 6.127 6.127 0 0 0-.455-2.555ZM9.794 8a2.625 2.625 0 0 1-.525 1.75 1.75 1.75 0 0 1-1.339.578 1.75 1.75 0 0 1-1.347-.578A2.625 2.625 0 0 1 6.058 8a2.625 2.625 0 0 1 .525-1.75 1.75 1.75 0 0 1 1.347-.578 1.75 1.75 0 0 1 1.339.578c.379.502.565 1.123.525 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 16 16" class="c-pieIcon c-pieIcon--atSymbol"><path d="M13.74 4.832a5.348 5.348 0 0 0-1.365-1.855 5.706 5.706 0 0 0-1.951-1.102 7.56 7.56 0 0 0-2.371-.385 6.422 6.422 0 0 0-2.53.49c-.748.309-1.425.77-1.985 1.356a6.011 6.011 0 0 0-1.304 2.091 7.35 7.35 0 0 0-.464 2.695 6.816 6.816 0 0 0 .464 2.564 5.879 5.879 0 0 0 3.255 3.343 6.29 6.29 0 0 0 2.441.481 6.056 6.056 0 0 0 2.625-.595h.096l-.402-1.085-.105.053a4.75 4.75 0 0 1-.998.34 5.859 5.859 0 0 1-1.198.123 4.76 4.76 0 0 1-1.908-.385A4.629 4.629 0 0 1 4.5 11.86a4.97 4.97 0 0 1-1.015-1.645 5.915 5.915 0 0 1-.367-2.118c-.01-.767.11-1.53.358-2.257.222-.63.57-1.208 1.024-1.698A4.375 4.375 0 0 1 6.05 3.074a5.145 5.145 0 0 1 2.004-.377 6.352 6.352 0 0 1 1.88.272 4.375 4.375 0 0 1 1.567.822c.461.394.826.888 1.068 1.444.278.67.412 1.392.393 2.117a4.7 4.7 0 0 1-.148 1.26 3.08 3.08 0 0 1-.438.954c-.15.24-.354.44-.595.586-.186.111-.396.177-.612.193V4.561H9.873V5.62a2.03 2.03 0 0 0-.753-.814 2.573 2.573 0 0 0-1.409-.394 2.887 2.887 0 0 0-1.233.263c-.373.18-.706.433-.98.744-.282.334-.501.717-.648 1.128A4.235 4.235 0 0 0 4.614 8c-.006.5.074.997.236 1.47.142.422.361.814.648 1.155.272.31.605.56.98.735.388.17.809.257 1.233.254.5.01.99-.137 1.4-.42.317-.209.578-.491.762-.823v1.085h1.04c.454.004.903-.094 1.313-.288.397-.2.746-.484 1.024-.832.311-.381.549-.817.7-1.286a5.19 5.19 0 0 0 .245-1.663 6.127 6.127 0 0 0-.455-2.555ZM9.794 8a2.625 2.625 0 0 1-.525 1.75 1.75 1.75 0 0 1-1.339.578 1.75 1.75 0 0 1-1.347-.578A2.625 2.625 0 0 1 6.058 8a2.625 2.625 0 0 1 .525-1.75 1.75 1.75 0 0 1 1.347-.578 1.75 1.75 0 0 1 1.339.578c.379.502.565 1.123.525 1.75Z"></path></svg>';
 
 class IconAtSymbol extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconAtSymbol extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--atSymbol', '', null, 'IconAtSymbol');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--atSymbol', '', null, 'IconAtSymbol');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--atSymbol');
         this.root.append(svg);
     }