@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/dist/IconPharmacyLarge.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--pharmacyLarge"><path d="M10.829 16.201h1.75v1.951h1.951v1.75H12.58v1.952h-1.75v-1.951H8.878v-1.75h1.95V16.2Z"></path><path fill-rule="evenodd" d="M24.103 12.727c.288.184.56.394.77.665l.008-.008 2.564 3.264-.105 7.796c0 .752-.297 1.479-.849 2.03-.56.56-1.312.875-2.117.875h-4.06a2.97 2.97 0 0 1-2.126-.884c-.026-.017-.044-.044-.061-.07-.018.018-.031.037-.044.057-.013.02-.026.04-.044.057a2.571 2.571 0 0 1-1.864.84H7.233a2.52 2.52 0 0 1-1.864-.823 2.883 2.883 0 0 1-.752-2.161l.848-12.232a2.511 2.511 0 0 1-.997-1.995 2.52 2.52 0 0 1 2.52-2.52h9.423a2.52 2.52 0 0 1 2.52 2.52c0 .813-.393 1.53-.997 1.995l.245 3.508 2.109-2.38c.183-.21.411-.385.647-.534H20.2v-1.75h4.69v1.75h-.787ZM16.166 25.6a.788.788 0 0 0 .587-.271h.009c.21-.22.314-.526.288-.85l-.822-11.75H7.18l-.822 11.76c-.018.323.087.63.289.848a.75.75 0 0 0 .586.263h8.933ZM6.988 10.916h9.424a.771.771 0 0 0 0-1.54H6.988a.771.771 0 0 0 0 1.54Zm15.575 3.098a1.252 1.252 0 0 0-.963.411l-2.529 2.861v.866h6.607v-.9l-2.179-2.774a1.25 1.25 0 0 0-.936-.464Zm1.811 11.594c.332 0 .648-.123.875-.36h.009c.21-.218.332-.498.332-.804l.061-4.541h-6.553v4.523c0 .315.114.604.332.823.236.236.552.359.884.359h4.06Z" 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--pharmacyLarge"><path d="M10.829 16.201h1.75v1.951h1.951v1.75H12.58v1.952h-1.75v-1.951H8.878v-1.75h1.95V16.2Z"></path><path fill-rule="evenodd" d="M24.103 12.727c.288.184.56.394.77.665l.008-.008 2.564 3.264-.105 7.796c0 .752-.297 1.479-.849 2.03-.56.56-1.312.875-2.117.875h-4.06a2.97 2.97 0 0 1-2.126-.884c-.026-.017-.044-.044-.061-.07-.018.018-.031.037-.044.057-.013.02-.026.04-.044.057a2.571 2.571 0 0 1-1.864.84H7.233a2.52 2.52 0 0 1-1.864-.823 2.883 2.883 0 0 1-.752-2.161l.848-12.232a2.511 2.511 0 0 1-.997-1.995 2.52 2.52 0 0 1 2.52-2.52h9.423a2.52 2.52 0 0 1 2.52 2.52c0 .813-.393 1.53-.997 1.995l.245 3.508 2.109-2.38c.183-.21.411-.385.647-.534H20.2v-1.75h4.69v1.75h-.787ZM16.166 25.6a.788.788 0 0 0 .587-.271h.009c.21-.22.314-.526.288-.85l-.822-11.75H7.18l-.822 11.76c-.018.323.087.63.289.848a.75.75 0 0 0 .586.263h8.933ZM6.988 10.916h9.424a.771.771 0 0 0 0-1.54H6.988a.771.771 0 0 0 0 1.54Zm15.575 3.098a1.252 1.252 0 0 0-.963.411l-2.529 2.861v.866h6.607v-.9l-2.179-2.774a1.25 1.25 0 0 0-.936-.464Zm1.811 11.594c.332 0 .648-.123.875-.36h.009c.21-.218.332-.498.332-.804l.061-4.541h-6.553v4.523c0 .315.114.604.332.823.236.236.552.359.884.359h4.06Z" clip-rule="evenodd"></path></svg>';
 
 class IconPharmacyLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPharmacyLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pharmacyLarge', '', null, 'IconPharmacyLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pharmacyLarge', '', null, 'IconPharmacyLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pharmacyLarge');
         this.root.append(svg);
     }

package/dist/IconPhone.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--phone"><path d="M11.412 14.344h-.315a10.64 10.64 0 0 1-3.7-1.208 10.937 10.937 0 0 1-4.56-4.672A11.13 11.13 0 0 1 1.682 4.85a2.625 2.625 0 0 1 1.383-2.695L4.43 1.42l1.942 3.666a1.566 1.566 0 0 1-.428 1.969L4.272 8.341a9.625 9.625 0 0 0 3.255 3.334L8.954 9.75a1.522 1.522 0 0 1 1.994-.429l3.623 2.004-.875 1.645a2.624 2.624 0 0 1-2.284 1.374ZM8.7 12.296a9.396 9.396 0 0 0 2.572.727 1.278 1.278 0 0 0 1.26-.648l.271-.499-2.502-1.391a.228.228 0 0 0-.289.07L8.7 12.296ZM3.887 3.205l-.201.105a1.356 1.356 0 0 0-.709 1.365c.126.843.358 1.666.692 2.45l1.478-1.111a.245.245 0 0 0 .07-.307l-1.33-2.502Z"></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--phone"><path d="M11.412 14.344h-.315a10.64 10.64 0 0 1-3.7-1.208 10.937 10.937 0 0 1-4.56-4.672A11.13 11.13 0 0 1 1.682 4.85a2.625 2.625 0 0 1 1.383-2.695L4.43 1.42l1.942 3.666a1.566 1.566 0 0 1-.428 1.969L4.272 8.341a9.625 9.625 0 0 0 3.255 3.334L8.954 9.75a1.522 1.522 0 0 1 1.994-.429l3.623 2.004-.875 1.645a2.624 2.624 0 0 1-2.284 1.374ZM8.7 12.296a9.396 9.396 0 0 0 2.572.727 1.278 1.278 0 0 0 1.26-.648l.271-.499-2.502-1.391a.228.228 0 0 0-.289.07L8.7 12.296ZM3.887 3.205l-.201.105a1.356 1.356 0 0 0-.709 1.365c.126.843.358 1.666.692 2.45l1.478-1.111a.245.245 0 0 0 .07-.307l-1.33-2.502Z"></path></svg>';
 
 class IconPhone extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPhone extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--phone', '', null, 'IconPhone');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--phone', '', null, 'IconPhone');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--phone');
         this.root.append(svg);
     }

package/dist/IconPhoneFilled.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--phoneFilled"><path d="M11.097 14.344h.315a2.624 2.624 0 0 0 2.284-1.374l.875-1.645-3.623-2.004a1.522 1.522 0 0 0-1.994.429l-1.427 1.925a9.625 9.625 0 0 1-3.255-3.334l1.672-1.286a1.566 1.566 0 0 0 .428-1.969L4.43 1.42l-1.365.735A2.625 2.625 0 0 0 1.682 4.85a11.13 11.13 0 0 0 1.155 3.614 10.937 10.937 0 0 0 4.559 4.672 10.64 10.64 0 0 0 3.701 1.208Z"></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--phoneFilled"><path d="M11.097 14.344h.315a2.624 2.624 0 0 0 2.284-1.374l.875-1.645-3.623-2.004a1.522 1.522 0 0 0-1.994.429l-1.427 1.925a9.625 9.625 0 0 1-3.255-3.334l1.672-1.286a1.566 1.566 0 0 0 .428-1.969L4.43 1.42l-1.365.735A2.625 2.625 0 0 0 1.682 4.85a11.13 11.13 0 0 0 1.155 3.614 10.937 10.937 0 0 0 4.559 4.672 10.64 10.64 0 0 0 3.701 1.208Z"></path></svg>';
 
 class IconPhoneFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPhoneFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--phoneFilled', '', null, 'IconPhoneFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--phoneFilled', '', null, 'IconPhoneFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--phoneFilled');
         this.root.append(svg);
     }

package/dist/IconPhoneFilledLarge.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--phoneFilledLarge"><path d="M18.623 19.302a2.485 2.485 0 0 1 1.752.268l6.431 3.544-1.47 2.738a4.498 4.498 0 0 1-3.902 2.398c-.18.013-.362.013-.543 0a19.34 19.34 0 0 1-6.71-2.223 19.81 19.81 0 0 1-8.287-8.452 20.239 20.239 0 0 1-2.1-6.554 4.568 4.568 0 0 1 2.38-4.646l2.222-1.181 3.43 6.431a2.555 2.555 0 0 1-.717 3.238l-3.334 2.546a17.955 17.955 0 0 0 6.545 6.702l2.818-3.841c.359-.494.888-.839 1.485-.968Z"></path><path d="M16.875 5.5v1.75a7.875 7.875 0 0 1 7.875 7.875h1.75A9.625 9.625 0 0 0 16.875 5.5Z"></path><path d="M16.875 9.875v1.75a3.5 3.5 0 0 1 3.5 3.5h1.75a5.25 5.25 0 0 0-5.25-5.25Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--phoneFilledLarge"><path d="M18.623 19.302a2.485 2.485 0 0 1 1.752.268l6.431 3.544-1.47 2.738a4.498 4.498 0 0 1-3.902 2.398c-.18.013-.362.013-.543 0a19.34 19.34 0 0 1-6.71-2.223 19.81 19.81 0 0 1-8.287-8.452 20.239 20.239 0 0 1-2.1-6.554 4.568 4.568 0 0 1 2.38-4.646l2.222-1.181 3.43 6.431a2.555 2.555 0 0 1-.717 3.238l-3.334 2.546a17.955 17.955 0 0 0 6.545 6.702l2.818-3.841c.359-.494.888-.839 1.485-.968Z"></path><path d="M16.875 5.5v1.75a7.875 7.875 0 0 1 7.875 7.875h1.75A9.625 9.625 0 0 0 16.875 5.5Z"></path><path d="M16.875 9.875v1.75a3.5 3.5 0 0 1 3.5 3.5h1.75a5.25 5.25 0 0 0-5.25-5.25Z"></path></svg>';
 
 class IconPhoneFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPhoneFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--phoneFilledLarge', '', null, 'IconPhoneFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--phoneFilledLarge', '', null, 'IconPhoneFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--phoneFilledLarge');
         this.root.append(svg);
     }

package/dist/IconPhoneLarge.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--phoneLarge"><path d="M20.375 19.57a2.485 2.485 0 0 0-3.237.7l-2.818 3.841a17.955 17.955 0 0 1-6.545-6.702l3.334-2.546a2.555 2.555 0 0 0 .717-3.238l-3.43-6.431-2.222 1.181a4.567 4.567 0 0 0-2.38 4.646 20.239 20.239 0 0 0 2.1 6.554 19.81 19.81 0 0 0 8.286 8.453 19.34 19.34 0 0 0 6.711 2.222c.181.013.362.013.543 0a4.498 4.498 0 0 0 3.902-2.398l1.47-2.738-6.43-3.544ZM5.5 10.75a2.8 2.8 0 0 1 1.496-2.826l.674-.368 2.625 4.918a.788.788 0 0 1-.21.997l-3.089 2.354A18.095 18.095 0 0 1 5.5 10.75Zm18.296 14.28a2.704 2.704 0 0 1-2.677 1.47 17.685 17.685 0 0 1-5.25-1.54l2.625-3.631a.735.735 0 0 1 .971-.219l4.9 2.721-.569 1.199Zm-6.92-17.78V5.5a9.625 9.625 0 0 1 9.624 9.625h-1.75a7.875 7.875 0 0 0-7.875-7.875Zm0 4.375v-1.75a5.25 5.25 0 0 1 5.25 5.25h-1.75a3.5 3.5 0 0 0-3.5-3.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--phoneLarge"><path d="M20.375 19.57a2.485 2.485 0 0 0-3.237.7l-2.818 3.841a17.955 17.955 0 0 1-6.545-6.702l3.334-2.546a2.555 2.555 0 0 0 .717-3.238l-3.43-6.431-2.222 1.181a4.567 4.567 0 0 0-2.38 4.646 20.239 20.239 0 0 0 2.1 6.554 19.81 19.81 0 0 0 8.286 8.453 19.34 19.34 0 0 0 6.711 2.222c.181.013.362.013.543 0a4.498 4.498 0 0 0 3.902-2.398l1.47-2.738-6.43-3.544ZM5.5 10.75a2.8 2.8 0 0 1 1.496-2.826l.674-.368 2.625 4.918a.788.788 0 0 1-.21.997l-3.089 2.354A18.095 18.095 0 0 1 5.5 10.75Zm18.296 14.28a2.704 2.704 0 0 1-2.677 1.47 17.685 17.685 0 0 1-5.25-1.54l2.625-3.631a.735.735 0 0 1 .971-.219l4.9 2.721-.569 1.199Zm-6.92-17.78V5.5a9.625 9.625 0 0 1 9.624 9.625h-1.75a7.875 7.875 0 0 0-7.875-7.875Zm0 4.375v-1.75a5.25 5.25 0 0 1 5.25 5.25h-1.75a3.5 3.5 0 0 0-3.5-3.5Z"></path></svg>';
 
 class IconPhoneLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPhoneLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--phoneLarge', '', null, 'IconPhoneLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--phoneLarge', '', null, 'IconPhoneLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--phoneLarge');
         this.root.append(svg);
     }

package/dist/IconPhoneOff.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--phoneOff"><path d="m8.954 9.75-1.427 1.925a8.694 8.694 0 0 1-1.277-.971L15 1.875h-1.846L5.279 9.75a9.38 9.38 0 0 1-1.006-1.409l1.67-1.286a1.566 1.566 0 0 0 .43-1.969L4.43 1.42l-1.365.735A2.625 2.625 0 0 0 1.683 4.85a11.216 11.216 0 0 0 2.704 5.871L1 14.125h1.846l2.459-2.476a10.702 10.702 0 0 0 2.091 1.47 10.64 10.64 0 0 0 3.702 1.207h.314a2.624 2.624 0 0 0 2.275-1.391l.876-1.645-3.614-1.986a1.522 1.522 0 0 0-1.995.446ZM2.977 4.675a1.356 1.356 0 0 1 .71-1.365l.2-.105 1.33 2.502a.245.245 0 0 1-.07.307L3.67 7.125a10.045 10.045 0 0 1-.692-2.45Zm9.556 7.7a1.278 1.278 0 0 1-1.26.691A9.396 9.396 0 0 1 8.7 12.34l1.313-1.75a.227.227 0 0 1 .288-.07l2.503 1.391-.271.464Z"></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--phoneOff"><path d="m8.954 9.75-1.427 1.925a8.694 8.694 0 0 1-1.277-.971L15 1.875h-1.846L5.279 9.75a9.38 9.38 0 0 1-1.006-1.409l1.67-1.286a1.566 1.566 0 0 0 .43-1.969L4.43 1.42l-1.365.735A2.625 2.625 0 0 0 1.683 4.85a11.216 11.216 0 0 0 2.704 5.871L1 14.125h1.846l2.459-2.476a10.702 10.702 0 0 0 2.091 1.47 10.64 10.64 0 0 0 3.702 1.207h.314a2.624 2.624 0 0 0 2.275-1.391l.876-1.645-3.614-1.986a1.522 1.522 0 0 0-1.995.446ZM2.977 4.675a1.356 1.356 0 0 1 .71-1.365l.2-.105 1.33 2.502a.245.245 0 0 1-.07.307L3.67 7.125a10.045 10.045 0 0 1-.692-2.45Zm9.556 7.7a1.278 1.278 0 0 1-1.26.691A9.396 9.396 0 0 1 8.7 12.34l1.313-1.75a.227.227 0 0 1 .288-.07l2.503 1.391-.271.464Z"></path></svg>';
 
 class IconPhoneOff extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPhoneOff extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--phoneOff', '', null, 'IconPhoneOff');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--phoneOff', '', null, 'IconPhoneOff');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--phoneOff');
         this.root.append(svg);
     }

package/dist/IconPhoneOffLarge.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--phoneOffLarge"><path d="m17.882 19.552-2.81 3.842a17.925 17.925 0 0 1-3-2.231l8.53-8.523c.319.53.49 1.133.5 1.75h1.75a5.25 5.25 0 0 0-.98-3.045l1.872-1.872a7.875 7.875 0 0 1 1.75 4.917h1.75a9.625 9.625 0 0 0-2.24-6.125l3.605-3.64h-2.467l-2.39 2.389a9.625 9.625 0 0 0-6.124-2.231v1.75a7.875 7.875 0 0 1 4.909 1.75l-1.9 1.846a5.25 5.25 0 0 0-3.035-.971v1.75a3.448 3.448 0 0 1 1.75.49l-8.514 8.522a18.26 18.26 0 0 1-2.328-3.229l3.334-2.555a2.546 2.546 0 0 0 .691-3.211l-3.42-6.457-2.223 1.19a4.567 4.567 0 0 0-2.372 4.646 20.195 20.195 0 0 0 2.1 6.571 19.82 19.82 0 0 0 2.993 4.279l-6.221 6.221h2.467l4.979-4.979a19.613 19.613 0 0 0 4.06 2.905 19.25 19.25 0 0 0 6.72 2.197h.534a4.47 4.47 0 0 0 3.902-2.398l1.47-2.739-6.396-3.5a2.485 2.485 0 0 0-3.246.691ZM6.252 10.06a2.818 2.818 0 0 1 1.47-2.861l.675-.36 2.625 4.918a.787.787 0 0 1-.21.989l-3.098 2.38a18.375 18.375 0 0 1-1.461-5.066Zm18.262 14.254a2.677 2.677 0 0 1-2.669 1.443 17.5 17.5 0 0 1-5.25-1.531l2.67-3.64a.735.735 0 0 1 .962-.21l4.908 2.712-.62 1.226Z"></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--phoneOffLarge"><path d="m17.882 19.552-2.81 3.842a17.925 17.925 0 0 1-3-2.231l8.53-8.523c.319.53.49 1.133.5 1.75h1.75a5.25 5.25 0 0 0-.98-3.045l1.872-1.872a7.875 7.875 0 0 1 1.75 4.917h1.75a9.625 9.625 0 0 0-2.24-6.125l3.605-3.64h-2.467l-2.39 2.389a9.625 9.625 0 0 0-6.124-2.231v1.75a7.875 7.875 0 0 1 4.909 1.75l-1.9 1.846a5.25 5.25 0 0 0-3.035-.971v1.75a3.448 3.448 0 0 1 1.75.49l-8.514 8.522a18.26 18.26 0 0 1-2.328-3.229l3.334-2.555a2.546 2.546 0 0 0 .691-3.211l-3.42-6.457-2.223 1.19a4.567 4.567 0 0 0-2.372 4.646 20.195 20.195 0 0 0 2.1 6.571 19.82 19.82 0 0 0 2.993 4.279l-6.221 6.221h2.467l4.979-4.979a19.613 19.613 0 0 0 4.06 2.905 19.25 19.25 0 0 0 6.72 2.197h.534a4.47 4.47 0 0 0 3.902-2.398l1.47-2.739-6.396-3.5a2.485 2.485 0 0 0-3.246.691ZM6.252 10.06a2.818 2.818 0 0 1 1.47-2.861l.675-.36 2.625 4.918a.787.787 0 0 1-.21.989l-3.098 2.38a18.375 18.375 0 0 1-1.461-5.066Zm18.262 14.254a2.677 2.677 0 0 1-2.669 1.443 17.5 17.5 0 0 1-5.25-1.531l2.67-3.64a.735.735 0 0 1 .962-.21l4.908 2.712-.62 1.226Z"></path></svg>';
 
 class IconPhoneOffLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPhoneOffLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--phoneOffLarge', '', null, 'IconPhoneOffLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--phoneOffLarge', '', null, 'IconPhoneOffLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--phoneOffLarge');
         this.root.append(svg);
     }

package/dist/IconPickUp.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--pickUp"><g clip-path="url(#prefix__clip0_4_159)"><path d="M8.875 2.531H15V1.22H8.875a4.375 4.375 0 0 0-3.929 2.625H3.257l-.122.052A2.047 2.047 0 0 0 1.962 5.2a2.205 2.205 0 0 0 .788 2.275l-.796 5.95c-.012.365.12.72.367.989a1.163 1.163 0 0 0 .875.367h8.671a1.162 1.162 0 0 0 .875-.367 1.364 1.364 0 0 0 .36-1.05l-.77-5.793a2.695 2.695 0 0 0 1.478-1.54H15V4.72h-2.266l-.123.507a1.558 1.558 0 0 1-1.864 1.252l-.34-.062-1.13 1.129a.578.578 0 0 1-.805 0 .586.586 0 0 1-.12-.64.551.551 0 0 1 .13-.183l1.618-1.54a.752.752 0 0 0 .184-.875.77.77 0 0 0-.718-.49H6.46a2.888 2.888 0 0 1 2.415-1.286Zm0 6.493a1.873 1.873 0 0 0 1.33-.551l.665-.666h.087l.753 5.662H3.266l.761-5.688h3.098a1.873 1.873 0 0 0 1.75 1.242Zm-.639-3.868-.665.63c-.198.192-.35.425-.446.683h-3.5a.936.936 0 0 1-.359-.875.717.717 0 0 1 .324-.394h4.646v-.044Z"></path></g><defs><clipPath id="prefix__clip0_4_159"><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--pickUp"><g clip-path="url(#prefix__clip0_4_159)"><path d="M8.875 2.531H15V1.22H8.875a4.375 4.375 0 0 0-3.929 2.625H3.257l-.122.052A2.047 2.047 0 0 0 1.962 5.2a2.205 2.205 0 0 0 .788 2.275l-.796 5.95c-.012.365.12.72.367.989a1.163 1.163 0 0 0 .875.367h8.671a1.162 1.162 0 0 0 .875-.367 1.364 1.364 0 0 0 .36-1.05l-.77-5.793a2.695 2.695 0 0 0 1.478-1.54H15V4.72h-2.266l-.123.507a1.558 1.558 0 0 1-1.864 1.252l-.34-.062-1.13 1.129a.578.578 0 0 1-.805 0 .586.586 0 0 1-.12-.64.551.551 0 0 1 .13-.183l1.618-1.54a.752.752 0 0 0 .184-.875.77.77 0 0 0-.718-.49H6.46a2.888 2.888 0 0 1 2.415-1.286Zm0 6.493a1.873 1.873 0 0 0 1.33-.551l.665-.666h.087l.753 5.662H3.266l.761-5.688h3.098a1.873 1.873 0 0 0 1.75 1.242Zm-.639-3.868-.665.63c-.198.192-.35.425-.446.683h-3.5a.936.936 0 0 1-.359-.875.717.717 0 0 1 .324-.394h4.646v-.044Z"></path></g><defs><clipPath id="prefix__clip0_4_159"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconPickUp extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPickUp extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pickUp', '', null, 'IconPickUp');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pickUp', '', null, 'IconPickUp');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pickUp');
         this.root.append(svg);
     }

package/dist/IconPickUpLarge.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--pickUpLarge"><path d="M25.625 2.875h-8.75c-3.859 0-5.959 3.106-6.659 4.375H5.841l-.157.07a3.194 3.194 0 0 0-1.829 2.03 3.5 3.5 0 0 0 1.75 3.902L3.75 26.692a2.45 2.45 0 0 0 .656 1.794 2.046 2.046 0 0 0 1.47.639H21.75a2.046 2.046 0 0 0 1.47-.639 2.483 2.483 0 0 0 .656-1.872L21.95 12.5a4.042 4.042 0 0 0 1.636-1.75h1.164v1.75H30V2.875h-4.375ZM5.544 9.814c.114-.35.359-.64.682-.814H15.8l-1.278 1.225a2.791 2.791 0 0 0-.796 1.4H6.28a1.75 1.75 0 0 1-.735-1.811Zm16.581 16.948a.684.684 0 0 1-.166.508.305.305 0 0 1-.21.105H5.876a.306.306 0 0 1-.21-.105.674.674 0 0 1-.175-.429l1.83-13.466h6.544a2.835 2.835 0 0 0 2.625 1.75 2.861 2.861 0 0 0 2.013-.831l1.155-1.164c.202-.006.403-.023.603-.053l1.864 13.685ZM22.37 9l-.201.595a2.703 2.703 0 0 1-2.783 1.75l-.41-.044-1.75 1.75a1.095 1.095 0 0 1-1.79-.36 1.059 1.059 0 0 1-.075-.427 1.094 1.094 0 0 1 .333-.779l2.625-2.494a1.015 1.015 0 0 0 .332-1.155.962.962 0 0 0-.9-.586h-5.478a5.748 5.748 0 0 1 4.602-2.625h7.875V9h-2.38Zm5.88 1.75H26.5V4.625h1.75v6.125Z"></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--pickUpLarge"><path d="M25.625 2.875h-8.75c-3.859 0-5.959 3.106-6.659 4.375H5.841l-.157.07a3.194 3.194 0 0 0-1.829 2.03 3.5 3.5 0 0 0 1.75 3.902L3.75 26.692a2.45 2.45 0 0 0 .656 1.794 2.046 2.046 0 0 0 1.47.639H21.75a2.046 2.046 0 0 0 1.47-.639 2.483 2.483 0 0 0 .656-1.872L21.95 12.5a4.042 4.042 0 0 0 1.636-1.75h1.164v1.75H30V2.875h-4.375ZM5.544 9.814c.114-.35.359-.64.682-.814H15.8l-1.278 1.225a2.791 2.791 0 0 0-.796 1.4H6.28a1.75 1.75 0 0 1-.735-1.811Zm16.581 16.948a.684.684 0 0 1-.166.508.305.305 0 0 1-.21.105H5.876a.306.306 0 0 1-.21-.105.674.674 0 0 1-.175-.429l1.83-13.466h6.544a2.835 2.835 0 0 0 2.625 1.75 2.861 2.861 0 0 0 2.013-.831l1.155-1.164c.202-.006.403-.023.603-.053l1.864 13.685ZM22.37 9l-.201.595a2.703 2.703 0 0 1-2.783 1.75l-.41-.044-1.75 1.75a1.095 1.095 0 0 1-1.79-.36 1.059 1.059 0 0 1-.075-.427 1.094 1.094 0 0 1 .333-.779l2.625-2.494a1.015 1.015 0 0 0 .332-1.155.962.962 0 0 0-.9-.586h-5.478a5.748 5.748 0 0 1 4.602-2.625h7.875V9h-2.38Zm5.88 1.75H26.5V4.625h1.75v6.125Z"></path></svg>';
 
 class IconPickUpLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPickUpLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pickUpLarge', '', null, 'IconPickUpLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pickUpLarge', '', null, 'IconPickUpLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pickUpLarge');
         this.root.append(svg);
     }

package/dist/IconPie.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--pie"><path d="M8.053 6.906c.105 0 .21-.043.288-.122a.412.412 0 0 0 .123-.289c0-.245-.184-.814-.411-.814-.228 0-.412.595-.412.814 0 .105.044.21.123.289a.412.412 0 0 0 .289.122Z"></path><path d="M5.979 6.346s.096.062.149.079c.043.009.078.018.122.018h.044a.337.337 0 0 0 .157-.053.5.5 0 0 0 .123-.114c.149-.166.411-.735.236-.883a.185.185 0 0 0-.122-.035c-.228 0-.595.245-.727.385a.4.4 0 0 0-.096.14.355.355 0 0 0-.035.166c0 .052.018.114.035.166a.387.387 0 0 0 .105.131h.009Z"></path><path d="M9.566 6.381a.416.416 0 0 0 .158.044h.026s.088 0 .131-.017a.444.444 0 0 0 .14-.08.416.416 0 0 0 .14-.28c0-.052 0-.104-.017-.157a.444.444 0 0 0-.079-.14c-.131-.14-.516-.376-.744-.376-.043 0-.087.009-.113.035-.175.149.078.718.236.884.035.044.079.07.122.096v-.009Z"></path><path d="M14.773 7.388h-.202L13.547 5.41c-.55-.857-1.452-1.4-2.52-1.514-.35-.035-.63-.28-.796-.481-.332-.385-.971-.84-2.17-.84h-.113c-1.2 0-1.847.455-2.17.84-.175.201-.447.446-.85.481-1.014.105-1.907.657-2.493 1.567l-.989 1.925h-.218V8.7h.84l1.04 4.734h9.827L13.976 8.7h.796V7.388Zm-11.21-1.27c.333-.515.876-.848 1.55-.918.62-.061 1.19-.385 1.662-.936.271-.315.788-.385 1.173-.385h.113c.385 0 .902.07 1.173.385.472.542 1.041.866 1.715.936a1.998 1.998 0 0 1 1.461.858l.682 1.32H2.916l.648-1.268v.009Zm8.313 6.003H4.16L3.406 8.7h9.223l-.753 3.421Z"></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--pie"><path d="M8.053 6.906c.105 0 .21-.043.288-.122a.412.412 0 0 0 .123-.289c0-.245-.184-.814-.411-.814-.228 0-.412.595-.412.814 0 .105.044.21.123.289a.412.412 0 0 0 .289.122Z"></path><path d="M5.979 6.346s.096.062.149.079c.043.009.078.018.122.018h.044a.337.337 0 0 0 .157-.053.5.5 0 0 0 .123-.114c.149-.166.411-.735.236-.883a.185.185 0 0 0-.122-.035c-.228 0-.595.245-.727.385a.4.4 0 0 0-.096.14.355.355 0 0 0-.035.166c0 .052.018.114.035.166a.387.387 0 0 0 .105.131h.009Z"></path><path d="M9.566 6.381a.416.416 0 0 0 .158.044h.026s.088 0 .131-.017a.444.444 0 0 0 .14-.08.416.416 0 0 0 .14-.28c0-.052 0-.104-.017-.157a.444.444 0 0 0-.079-.14c-.131-.14-.516-.376-.744-.376-.043 0-.087.009-.113.035-.175.149.078.718.236.884.035.044.079.07.122.096v-.009Z"></path><path d="M14.773 7.388h-.202L13.547 5.41c-.55-.857-1.452-1.4-2.52-1.514-.35-.035-.63-.28-.796-.481-.332-.385-.971-.84-2.17-.84h-.113c-1.2 0-1.847.455-2.17.84-.175.201-.447.446-.85.481-1.014.105-1.907.657-2.493 1.567l-.989 1.925h-.218V8.7h.84l1.04 4.734h9.827L13.976 8.7h.796V7.388Zm-11.21-1.27c.333-.515.876-.848 1.55-.918.62-.061 1.19-.385 1.662-.936.271-.315.788-.385 1.173-.385h.113c.385 0 .902.07 1.173.385.472.542 1.041.866 1.715.936a1.998 1.998 0 0 1 1.461.858l.682 1.32H2.916l.648-1.268v.009Zm8.313 6.003H4.16L3.406 8.7h9.223l-.753 3.421Z"></path></svg>';
 
 class IconPie extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPie extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pie', '', null, 'IconPie');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pie', '', null, 'IconPie');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pie');
         this.root.append(svg);
     }

package/dist/IconPieChart.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--pieChart"><path d="M8.656 8.656H1.22V8A6.79 6.79 0 0 1 8 1.219h.656v7.437ZM2.531 7.344h4.813V2.566a5.495 5.495 0 0 0-4.778 4.778h-.035Zm7.412-5.346V3.38A5.031 5.031 0 0 1 8 13.031a5.075 5.075 0 0 1-4.62-3.054H1.998A6.326 6.326 0 0 0 14.344 8a6.3 6.3 0 0 0-4.367-6.002h-.034Z"></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--pieChart"><path d="M8.656 8.656H1.22V8A6.79 6.79 0 0 1 8 1.219h.656v7.437ZM2.531 7.344h4.813V2.566a5.495 5.495 0 0 0-4.778 4.778h-.035Zm7.412-5.346V3.38A5.031 5.031 0 0 1 8 13.031a5.075 5.075 0 0 1-4.62-3.054H1.998A6.326 6.326 0 0 0 14.344 8a6.3 6.3 0 0 0-4.367-6.002h-.034Z"></path></svg>';
 
 class IconPieChart extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPieChart extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pieChart', '', null, 'IconPieChart');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pieChart', '', null, 'IconPieChart');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pieChart');
         this.root.append(svg);
     }

package/dist/IconPieChartLarge.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--pieChartLarge"><path d="M16.875 2.875H16A13.125 13.125 0 0 0 2.875 16v.875h14v-14Zm-1.75 12.25h-10.5a11.375 11.375 0 0 1 10.5-10.5v10.5Zm.07 11.375-.14 1.75a12.294 12.294 0 0 1-11.016-9.625h1.793a10.552 10.552 0 0 0 9.363 7.875ZM28.25 16a12.294 12.294 0 0 1-11.305 12.25l-.14-1.75a10.5 10.5 0 0 0 1.82-20.668V4.03A12.25 12.25 0 0 1 28.25 16Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--pieChartLarge"><path d="M16.875 2.875H16A13.125 13.125 0 0 0 2.875 16v.875h14v-14Zm-1.75 12.25h-10.5a11.375 11.375 0 0 1 10.5-10.5v10.5Zm.07 11.375-.14 1.75a12.294 12.294 0 0 1-11.016-9.625h1.793a10.552 10.552 0 0 0 9.363 7.875ZM28.25 16a12.294 12.294 0 0 1-11.305 12.25l-.14-1.75a10.5 10.5 0 0 0 1.82-20.668V4.03A12.25 12.25 0 0 1 28.25 16Z"></path></svg>';
 
 class IconPieChartLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPieChartLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pieChartLarge', '', null, 'IconPieChartLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pieChartLarge', '', null, 'IconPieChartLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pieChartLarge');
         this.root.append(svg);
     }

package/dist/IconPieLarge.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--pieLarge"><path d="M16.271 13.375a.895.895 0 0 0 .893-.893c0-.533-.402-1.793-.893-1.793-.49 0-.892 1.295-.892 1.793a.895.895 0 0 0 .893.893Z"></path><path d="M11.73 12.159a.918.918 0 0 0 .586.228h.105a.97.97 0 0 0 .35-.114.911.911 0 0 0 .272-.245c.332-.368.892-1.61.507-1.934-.07-.061-.157-.079-.262-.079-.49 0-1.304.534-1.584.84a1.06 1.06 0 0 0-.21.306.867.867 0 0 0 .018.726c.052.114.13.21.218.298v-.026Z"></path><path d="M19.57 12.229a.904.904 0 0 0 .341.096h.07a.985.985 0 0 0 .28-.044.822.822 0 0 0 .307-.175.97.97 0 0 0 .218-.28.902.902 0 0 0 .097-.341c0-.114 0-.236-.044-.35a.823.823 0 0 0-.175-.306c-.28-.315-1.129-.832-1.628-.832-.096 0-.183.018-.245.07-.376.324.175 1.567.508 1.934a.97.97 0 0 0 .28.219l-.009.009Z"></path><path d="M17.05 18.354h-1.793v3.579h1.793v-3.58Z"></path><path d="m12.588 21.933-.884-3.58h-1.82l.893 3.58h1.81Z"></path><path d="M22.423 18.354h-1.811l-.875 3.579h1.802l.884-3.58Z"></path><path d="M29.186 14.661h-.638l-2.083-4.042a6.052 6.052 0 0 0-4.497-2.748h-.105c-.814-.096-1.435-.639-1.82-1.085-.849-.989-2.17-1.496-3.92-1.496h-.228c-1.75 0-3.071.499-3.92 1.496-.376.446-1.006.989-1.82 1.076h-.105a6.097 6.097 0 0 0-4.497 2.765l-2.065 4.034h-.674v1.75h1.96l2.03 9.214h18.471l2.03-9.214h1.881v-1.75ZM7.05 11.538a4.308 4.308 0 0 1 3.185-1.926h.105c1.102-.122 2.126-.7 2.966-1.688.499-.587 1.374-.884 2.59-.884h.228c1.216 0 2.091.297 2.59.884.84.988 1.872 1.566 2.966 1.671h.105c1.321.14 2.485.857 3.159 1.899l1.627 3.167H5.456l1.602-3.123h-.009Zm16.817 12.337H8.204l-1.645-7.464h18.953l-1.646 7.464Z"></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--pieLarge"><path d="M16.271 13.375a.895.895 0 0 0 .893-.893c0-.533-.402-1.793-.893-1.793-.49 0-.892 1.295-.892 1.793a.895.895 0 0 0 .893.893Z"></path><path d="M11.73 12.159a.918.918 0 0 0 .586.228h.105a.97.97 0 0 0 .35-.114.911.911 0 0 0 .272-.245c.332-.368.892-1.61.507-1.934-.07-.061-.157-.079-.262-.079-.49 0-1.304.534-1.584.84a1.06 1.06 0 0 0-.21.306.867.867 0 0 0 .018.726c.052.114.13.21.218.298v-.026Z"></path><path d="M19.57 12.229a.904.904 0 0 0 .341.096h.07a.985.985 0 0 0 .28-.044.822.822 0 0 0 .307-.175.97.97 0 0 0 .218-.28.902.902 0 0 0 .097-.341c0-.114 0-.236-.044-.35a.823.823 0 0 0-.175-.306c-.28-.315-1.129-.832-1.628-.832-.096 0-.183.018-.245.07-.376.324.175 1.567.508 1.934a.97.97 0 0 0 .28.219l-.009.009Z"></path><path d="M17.05 18.354h-1.793v3.579h1.793v-3.58Z"></path><path d="m12.588 21.933-.884-3.58h-1.82l.893 3.58h1.81Z"></path><path d="M22.423 18.354h-1.811l-.875 3.579h1.802l.884-3.58Z"></path><path d="M29.186 14.661h-.638l-2.083-4.042a6.052 6.052 0 0 0-4.497-2.748h-.105c-.814-.096-1.435-.639-1.82-1.085-.849-.989-2.17-1.496-3.92-1.496h-.228c-1.75 0-3.071.499-3.92 1.496-.376.446-1.006.989-1.82 1.076h-.105a6.097 6.097 0 0 0-4.497 2.765l-2.065 4.034h-.674v1.75h1.96l2.03 9.214h18.471l2.03-9.214h1.881v-1.75ZM7.05 11.538a4.308 4.308 0 0 1 3.185-1.926h.105c1.102-.122 2.126-.7 2.966-1.688.499-.587 1.374-.884 2.59-.884h.228c1.216 0 2.091.297 2.59.884.84.988 1.872 1.566 2.966 1.671h.105c1.321.14 2.485.857 3.159 1.899l1.627 3.167H5.456l1.602-3.123h-.009Zm16.817 12.337H8.204l-1.645-7.464h18.953l-1.646 7.464Z"></path></svg>';
 
 class IconPieLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPieLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pieLarge', '', null, 'IconPieLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pieLarge', '', null, 'IconPieLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pieLarge');
         this.root.append(svg);
     }

package/dist/IconPinAtHome.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--pinAtHome"><path d="m14.694 7.125-.91.875s-.298-.289-.753-.7v1.575H11.72V6.154a27.329 27.329 0 0 0-3.5-2.713.534.534 0 0 0-.403 0 26.933 26.933 0 0 0-3.5 2.704v6.44h8.75v1.313H2.97V7.335c-.455.411-.744.691-.753.7l-.91-.91a42.972 42.972 0 0 1 5.819-4.813 1.75 1.75 0 0 1 1.75-.008 42.882 42.882 0 0 1 5.819 4.821ZM7.124 9.75a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-1.75Zm1.75.875a.875.875 0 1 0 1.751 0 .875.875 0 0 0-1.75 0Zm3.5-.875a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-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--pinAtHome"><path d="m14.694 7.125-.91.875s-.298-.289-.753-.7v1.575H11.72V6.154a27.329 27.329 0 0 0-3.5-2.713.534.534 0 0 0-.403 0 26.933 26.933 0 0 0-3.5 2.704v6.44h8.75v1.313H2.97V7.335c-.455.411-.744.691-.753.7l-.91-.91a42.972 42.972 0 0 1 5.819-4.813 1.75 1.75 0 0 1 1.75-.008 42.882 42.882 0 0 1 5.819 4.821ZM7.124 9.75a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-1.75Zm1.75.875a.875.875 0 1 0 1.751 0 .875.875 0 0 0-1.75 0Zm3.5-.875a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-1.75Z"></path></svg>';
 
 class IconPinAtHome extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPinAtHome extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pinAtHome', '', null, 'IconPinAtHome');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pinAtHome', '', null, 'IconPinAtHome');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pinAtHome');
         this.root.append(svg);
     }

package/dist/IconPinAtHomeFilled.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--pinAtHomeFilled"><path d="M8.875 2.304a1.75 1.75 0 0 0-1.75.008 42.972 42.972 0 0 0-5.819 4.813l.91.875s.298-.289.753-.7v6.571H13.03V7.335c.455.411.744.691.753.7l.875-.945a42.875 42.875 0 0 0-5.784-4.786Zm-3.5 8.321a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75Zm2.625 0a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75Zm2.625 0a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 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--pinAtHomeFilled"><path d="M8.875 2.304a1.75 1.75 0 0 0-1.75.008 42.972 42.972 0 0 0-5.819 4.813l.91.875s.298-.289.753-.7v6.571H13.03V7.335c.455.411.744.691.753.7l.875-.945a42.875 42.875 0 0 0-5.784-4.786Zm-3.5 8.321a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75Zm2.625 0a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75Zm2.625 0a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75Z"></path></svg>';
 
 class IconPinAtHomeFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPinAtHomeFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pinAtHomeFilled', '', null, 'IconPinAtHomeFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pinAtHomeFilled', '', null, 'IconPinAtHomeFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pinAtHomeFilled');
         this.root.append(svg);
     }

package/dist/IconPinAtHomeFilledLarge.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--pinAtHomeFilledLarge"><path d="M17.461 4.109a3.15 3.15 0 0 0-2.94 0C10.146 6.68 3.208 13.375 2.92 13.62l1.207 1.26s.928-.875 2.25-2.083V26.5h19.25V12.797a130.695 130.695 0 0 1 2.248 2.083l1.251-1.26c-.332-.245-7.271-6.939-11.664-9.511ZM9.438 20.375a1.312 1.312 0 1 1 0-2.624 1.312 1.312 0 0 1 0 2.624Zm4.375 0a1.312 1.312 0 1 1 0-2.624 1.312 1.312 0 0 1 0 2.624Zm4.375 0a1.312 1.312 0 1 1 0-2.624 1.312 1.312 0 0 1 0 2.624Zm4.375 0a1.312 1.312 0 1 1 0-2.624 1.312 1.312 0 0 1 0 2.624Z"></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--pinAtHomeFilledLarge"><path d="M17.461 4.109a3.15 3.15 0 0 0-2.94 0C10.146 6.68 3.208 13.375 2.92 13.62l1.207 1.26s.928-.875 2.25-2.083V26.5h19.25V12.797a130.695 130.695 0 0 1 2.248 2.083l1.251-1.26c-.332-.245-7.271-6.939-11.664-9.511ZM9.438 20.375a1.312 1.312 0 1 1 0-2.624 1.312 1.312 0 0 1 0 2.624Zm4.375 0a1.312 1.312 0 1 1 0-2.624 1.312 1.312 0 0 1 0 2.624Zm4.375 0a1.312 1.312 0 1 1 0-2.624 1.312 1.312 0 0 1 0 2.624Zm4.375 0a1.312 1.312 0 1 1 0-2.624 1.312 1.312 0 0 1 0 2.624Z"></path></svg>';
 
 class IconPinAtHomeFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPinAtHomeFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pinAtHomeFilledLarge', '', null, 'IconPinAtHomeFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pinAtHomeFilledLarge', '', null, 'IconPinAtHomeFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pinAtHomeFilledLarge');
         this.root.append(svg);
     }

package/dist/IconPinAtHomeLarge.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--pinAtHomeLarge"><path d="M13.375 18.625a1.313 1.313 0 1 1 0 2.626 1.313 1.313 0 0 1 0-2.626Zm3.063 1.313a1.313 1.313 0 1 0 2.625 0 1.313 1.313 0 0 0-2.625 0Zm4.375 0a1.313 1.313 0 1 0 2.625 0 1.313 1.313 0 0 0-2.625 0Zm5.687-1.313a1.313 1.313 0 1 0 0 2.626 1.313 1.313 0 0 0 0-2.626ZM17.461 4.109a3.15 3.15 0 0 0-2.94 0C10.146 6.68 3.208 13.375 2.92 13.62l1.207 1.26s.928-.875 2.25-2.083V26.5h19.25V23h-1.75v1.75H8.125V11.231a55.837 55.837 0 0 1 7.253-5.582 1.444 1.444 0 0 1 1.216 0 55.79 55.79 0 0 1 7.28 5.582v5.644h1.75v-4.078a130.695 130.695 0 0 1 2.249 2.083l1.251-1.26c-.332-.245-7.271-6.939-11.664-9.511Z"></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--pinAtHomeLarge"><path d="M13.375 18.625a1.313 1.313 0 1 1 0 2.626 1.313 1.313 0 0 1 0-2.626Zm3.063 1.313a1.313 1.313 0 1 0 2.625 0 1.313 1.313 0 0 0-2.625 0Zm4.375 0a1.313 1.313 0 1 0 2.625 0 1.313 1.313 0 0 0-2.625 0Zm5.687-1.313a1.313 1.313 0 1 0 0 2.626 1.313 1.313 0 0 0 0-2.626ZM17.461 4.109a3.15 3.15 0 0 0-2.94 0C10.146 6.68 3.208 13.375 2.92 13.62l1.207 1.26s.928-.875 2.25-2.083V26.5h19.25V23h-1.75v1.75H8.125V11.231a55.837 55.837 0 0 1 7.253-5.582 1.444 1.444 0 0 1 1.216 0 55.79 55.79 0 0 1 7.28 5.582v5.644h1.75v-4.078a130.695 130.695 0 0 1 2.249 2.083l1.251-1.26c-.332-.245-7.271-6.939-11.664-9.511Z"></path></svg>';
 
 class IconPinAtHomeLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPinAtHomeLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pinAtHomeLarge', '', null, 'IconPinAtHomeLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pinAtHomeLarge', '', null, 'IconPinAtHomeLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pinAtHomeLarge');
         this.root.append(svg);
     }

package/dist/IconPizza.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--pizza"><path d="M13.924 4.99C13.1 3.704 10.625.764 5.253 1.087a1.496 1.496 0 0 0-1.41 1.497V15l9.774-8.041a1.496 1.496 0 0 0 .307-1.969Zm-8.75 4.83a1.12 1.12 0 0 0 .875-.324 1.146 1.146 0 0 0 0-1.619 1.164 1.164 0 0 0-.875-.332V4.622a7.114 7.114 0 0 1 5.941 2.704l-5.959 4.856.018-2.362Zm7.63-3.876-.674.551a8.478 8.478 0 0 0-6.974-3.176v-.735a.192.192 0 0 1 .219-.193h.718c4.156 0 6.124 2.293 6.772 3.325a.193.193 0 0 1-.079.228h.018Zm-3.5 1.12a1.006 1.006 0 1 1-.98-1.007A1.006 1.006 0 0 1 9.33 7.064h-.026Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--pizza"><path d="M13.924 4.99C13.1 3.704 10.625.764 5.253 1.087a1.496 1.496 0 0 0-1.41 1.497V15l9.774-8.041a1.496 1.496 0 0 0 .307-1.969Zm-8.75 4.83a1.12 1.12 0 0 0 .875-.324 1.146 1.146 0 0 0 0-1.619 1.164 1.164 0 0 0-.875-.332V4.622a7.114 7.114 0 0 1 5.941 2.704l-5.959 4.856.018-2.362Zm7.63-3.876-.674.551a8.478 8.478 0 0 0-6.974-3.176v-.735a.192.192 0 0 1 .219-.193h.718c4.156 0 6.124 2.293 6.772 3.325a.193.193 0 0 1-.079.228h.018Zm-3.5 1.12a1.006 1.006 0 1 1-.98-1.007A1.006 1.006 0 0 1 9.33 7.064h-.026Z"></path></svg>';
 
 class IconPizza extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPizza extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pizza', '', null, 'IconPizza');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pizza', '', null, 'IconPizza');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pizza');
         this.root.append(svg);
     }

package/dist/IconPizzaLarge.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--pizzaLarge"><path d="M28.53 10.129c-1.698-2.643-6.834-8.707-17.911-8.042a2.625 2.625 0 0 0-2.494 2.66v25.13L27.988 13.63a2.625 2.625 0 0 0 .542-3.5ZM9.875 16.578a1.618 1.618 0 0 1 .67 3.149 1.62 1.62 0 0 1-.67.07v-3.22Zm0 4.97h.131a3.37 3.37 0 0 0 2.418-5.873 3.37 3.37 0 0 0-2.549-.848V7.872c7.997-.184 12.25 3.754 14.289 6.624L9.875 26.185v-4.637Zm17.001-9.275-1.356 1.102c-2.021-2.765-6.764-7.429-15.645-7.254V4.747a.875.875 0 0 1 .875-.875c.525 0 1.05-.043 1.549-.043 9.047-.035 13.326 4.996 14.761 7.245a.875.875 0 0 1-.184 1.199Zm-9.564-1.523a3.062 3.062 0 1 0 0 6.125 3.062 3.062 0 0 0 0-6.125Zm0 4.375a1.313 1.313 0 1 1 0-2.626 1.313 1.313 0 0 1 0 2.626Z"></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--pizzaLarge"><path d="M28.53 10.129c-1.698-2.643-6.834-8.707-17.911-8.042a2.625 2.625 0 0 0-2.494 2.66v25.13L27.988 13.63a2.625 2.625 0 0 0 .542-3.5ZM9.875 16.578a1.618 1.618 0 0 1 .67 3.149 1.62 1.62 0 0 1-.67.07v-3.22Zm0 4.97h.131a3.37 3.37 0 0 0 2.418-5.873 3.37 3.37 0 0 0-2.549-.848V7.872c7.997-.184 12.25 3.754 14.289 6.624L9.875 26.185v-4.637Zm17.001-9.275-1.356 1.102c-2.021-2.765-6.764-7.429-15.645-7.254V4.747a.875.875 0 0 1 .875-.875c.525 0 1.05-.043 1.549-.043 9.047-.035 13.326 4.996 14.761 7.245a.875.875 0 0 1-.184 1.199Zm-9.564-1.523a3.062 3.062 0 1 0 0 6.125 3.062 3.062 0 0 0 0-6.125Zm0 4.375a1.313 1.313 0 1 1 0-2.626 1.313 1.313 0 0 1 0 2.626Z"></path></svg>';
 
 class IconPizzaLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPizzaLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pizzaLarge', '', null, 'IconPizzaLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pizzaLarge', '', null, 'IconPizzaLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pizzaLarge');
         this.root.append(svg);
     }

package/dist/IconPlaceholder.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--placeholder"><path fill-rule="evenodd" d="M.083 0h15.834L16 .083v15.834l-.083.083H.083L0 15.917V.083L.083 0Zm15.75 15.834V.166H.166v15.668h15.669ZM3.27 1h9.463A2.268 2.268 0 0 1 15 3.269v9.463A2.268 2.268 0 0 1 12.732 15H3.269A2.268 2.268 0 0 1 1 12.732V3.269A2.269 2.269 0 0 1 3.269 1Z" 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 16 16" class="c-pieIcon c-pieIcon--placeholder"><path fill-rule="evenodd" d="M.083 0h15.834L16 .083v15.834l-.083.083H.083L0 15.917V.083L.083 0Zm15.75 15.834V.166H.166v15.668h15.669ZM3.27 1h9.463A2.268 2.268 0 0 1 15 3.269v9.463A2.268 2.268 0 0 1 12.732 15H3.269A2.268 2.268 0 0 1 1 12.732V3.269A2.269 2.269 0 0 1 3.269 1Z" clip-rule="evenodd"></path></svg>';
 
 class IconPlaceholder extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPlaceholder extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--placeholder', '', null, 'IconPlaceholder');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--placeholder', '', null, 'IconPlaceholder');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--placeholder');
         this.root.append(svg);
     }