@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/dist/IconFoodFilled.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--foodFilled"><g clip-path="url(#prefix__clip0_2_2302)"><path d="M6.521 11.832a1.508 1.508 0 0 0-.183-.113h-.193c-.062.029-.12.064-.175.105a4.078 4.078 0 0 1-2.345.7 3.981 3.981 0 0 1-1.969-.481c.07 2.3 1.601 2.738 4.594 2.738 2.992 0 4.506-.437 4.585-2.712a4.042 4.042 0 0 1-1.96.463 4.138 4.138 0 0 1-2.354-.7Z"></path><path d="M3.529 8.595h.192c.062-.029.12-.064.175-.105a4.13 4.13 0 0 1 2.354-.709 4.139 4.139 0 0 1 2.354.7c.058.043.12.08.184.114h.192a.77.77 0 0 0 .175-.105c.446-.3.945-.515 1.47-.63-.473-1.461-2.249-2.485-4.375-2.485S2.33 6.399 1.805 7.851c.55.106 1.074.32 1.54.63.058.043.12.08.184.114Z"></path><path d="M8.875 9.908a1.549 1.549 0 0 1-.971-.307 2.782 2.782 0 0 0-1.654-.507 2.791 2.791 0 0 0-1.654.507 1.54 1.54 0 0 1-.962.306 1.566 1.566 0 0 1-.971-.306A2.774 2.774 0 0 0 1 9.094v1.312c.346-.01.686.098.962.306a2.8 2.8 0 0 0 1.663.508 2.774 2.774 0 0 0 1.654-.508c.28-.209.622-.317.971-.306.349-.01.691.098.971.306a2.8 2.8 0 0 0 1.663.508 2.774 2.774 0 0 0 1.653-.508c.279-.205.617-.313.963-.306V9.094a2.826 2.826 0 0 0-1.662.507 1.54 1.54 0 0 1-.963.306Z"></path><path d="M12.156 2.969V1h-1.312v1.969h-3.15l.131 1.26a5.197 5.197 0 0 1 4.2 3.552h.787v3.938h-.673v.166a4.664 4.664 0 0 1-.403 2.021h.875a1.514 1.514 0 0 0 1.514-1.391L15 2.969h-2.844Z"></path></g><defs><clipPath id="prefix__clip0_2_2302"><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--foodFilled"><g clip-path="url(#prefix__clip0_2_2302)"><path d="M6.521 11.832a1.508 1.508 0 0 0-.183-.113h-.193c-.062.029-.12.064-.175.105a4.078 4.078 0 0 1-2.345.7 3.981 3.981 0 0 1-1.969-.481c.07 2.3 1.601 2.738 4.594 2.738 2.992 0 4.506-.437 4.585-2.712a4.042 4.042 0 0 1-1.96.463 4.138 4.138 0 0 1-2.354-.7Z"></path><path d="M3.529 8.595h.192c.062-.029.12-.064.175-.105a4.13 4.13 0 0 1 2.354-.709 4.139 4.139 0 0 1 2.354.7c.058.043.12.08.184.114h.192a.77.77 0 0 0 .175-.105c.446-.3.945-.515 1.47-.63-.473-1.461-2.249-2.485-4.375-2.485S2.33 6.399 1.805 7.851c.55.106 1.074.32 1.54.63.058.043.12.08.184.114Z"></path><path d="M8.875 9.908a1.549 1.549 0 0 1-.971-.307 2.782 2.782 0 0 0-1.654-.507 2.791 2.791 0 0 0-1.654.507 1.54 1.54 0 0 1-.962.306 1.566 1.566 0 0 1-.971-.306A2.774 2.774 0 0 0 1 9.094v1.312c.346-.01.686.098.962.306a2.8 2.8 0 0 0 1.663.508 2.774 2.774 0 0 0 1.654-.508c.28-.209.622-.317.971-.306.349-.01.691.098.971.306a2.8 2.8 0 0 0 1.663.508 2.774 2.774 0 0 0 1.653-.508c.279-.205.617-.313.963-.306V9.094a2.826 2.826 0 0 0-1.662.507 1.54 1.54 0 0 1-.963.306Z"></path><path d="M12.156 2.969V1h-1.312v1.969h-3.15l.131 1.26a5.197 5.197 0 0 1 4.2 3.552h.787v3.938h-.673v.166a4.664 4.664 0 0 1-.403 2.021h.875a1.514 1.514 0 0 0 1.514-1.391L15 2.969h-2.844Z"></path></g><defs><clipPath id="prefix__clip0_2_2302"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconFoodFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconFoodFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--foodFilled', '', null, 'IconFoodFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--foodFilled', '', null, 'IconFoodFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--foodFilled');
         this.root.append(svg);
     }

package/dist/IconFoodFilledLarge.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--foodFilledLarge"><path d="M28.25 24.986a2.625 2.625 0 0 1-2.625 2.389h-3.36A6.903 6.903 0 0 0 23 24.05V23h.875a.875.875 0 0 0 .875-.875v-3.5a.875.875 0 0 0-.875-.875h-1.041v-.184c-.639-2.878-3.124-5.118-6.51-6.125l-.525-5.066h6.326V3.75h-3.5V2h5.25v4.375H30l-1.75 18.611Zm-21-5.74c.433.015.855-.143 1.172-.437a6.694 6.694 0 0 1 4.078-1.313 6.729 6.729 0 0 1 4.086 1.313 1.75 1.75 0 0 0 2.337 0 7.052 7.052 0 0 1 2.222-1.059v-.044c-.665-3.001-4.27-5.206-8.645-5.206s-7.98 2.223-8.619 5.25c.788.228 1.53.59 2.196 1.067.32.293.74.447 1.173.43Zm10.5 5.25a6.782 6.782 0 0 1-4.086-1.312 1.61 1.61 0 0 0-1.173-.438 1.6 1.6 0 0 0-1.163.438 6.782 6.782 0 0 1-4.087 1.312 6.459 6.459 0 0 1-3.491-.918v.297c0 4.454 2.809 5.25 8.75 5.25s8.75-.788 8.75-5.25v-.332a6.431 6.431 0 0 1-3.5.953Zm-10.5-1.75a5.032 5.032 0 0 0 3.115-1.023 3.334 3.334 0 0 1 2.135-.727 3.343 3.343 0 0 1 2.144.727 5.25 5.25 0 0 0 6.221 0A3.342 3.342 0 0 1 23 20.995v-1.75a5.075 5.075 0 0 0-3.115 1.024 3.5 3.5 0 0 1-4.279 0 5.03 5.03 0 0 0-3.106-1.024 5.022 5.022 0 0 0-3.106 1.024 3.343 3.343 0 0 1-2.144.726 3.335 3.335 0 0 1-2.135-.726A5.022 5.022 0 0 0 2 19.246v1.75c.775-.016 1.53.241 2.135.727a5.023 5.023 0 0 0 3.115 1.023Z"></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--foodFilledLarge"><path d="M28.25 24.986a2.625 2.625 0 0 1-2.625 2.389h-3.36A6.903 6.903 0 0 0 23 24.05V23h.875a.875.875 0 0 0 .875-.875v-3.5a.875.875 0 0 0-.875-.875h-1.041v-.184c-.639-2.878-3.124-5.118-6.51-6.125l-.525-5.066h6.326V3.75h-3.5V2h5.25v4.375H30l-1.75 18.611Zm-21-5.74c.433.015.855-.143 1.172-.437a6.694 6.694 0 0 1 4.078-1.313 6.729 6.729 0 0 1 4.086 1.313 1.75 1.75 0 0 0 2.337 0 7.052 7.052 0 0 1 2.222-1.059v-.044c-.665-3.001-4.27-5.206-8.645-5.206s-7.98 2.223-8.619 5.25c.788.228 1.53.59 2.196 1.067.32.293.74.447 1.173.43Zm10.5 5.25a6.782 6.782 0 0 1-4.086-1.312 1.61 1.61 0 0 0-1.173-.438 1.6 1.6 0 0 0-1.163.438 6.782 6.782 0 0 1-4.087 1.312 6.459 6.459 0 0 1-3.491-.918v.297c0 4.454 2.809 5.25 8.75 5.25s8.75-.788 8.75-5.25v-.332a6.431 6.431 0 0 1-3.5.953Zm-10.5-1.75a5.032 5.032 0 0 0 3.115-1.023 3.334 3.334 0 0 1 2.135-.727 3.343 3.343 0 0 1 2.144.727 5.25 5.25 0 0 0 6.221 0A3.342 3.342 0 0 1 23 20.995v-1.75a5.075 5.075 0 0 0-3.115 1.024 3.5 3.5 0 0 1-4.279 0 5.03 5.03 0 0 0-3.106-1.024 5.022 5.022 0 0 0-3.106 1.024 3.343 3.343 0 0 1-2.144.726 3.335 3.335 0 0 1-2.135-.726A5.022 5.022 0 0 0 2 19.246v1.75c.775-.016 1.53.241 2.135.727a5.023 5.023 0 0 0 3.115 1.023Z"></path></svg>';
 
 class IconFoodFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconFoodFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--foodFilledLarge', '', null, 'IconFoodFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--foodFilledLarge', '', null, 'IconFoodFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--foodFilledLarge');
         this.root.append(svg);
     }

package/dist/IconFoodLarge.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--foodLarge"><path d="M4.135 21.723A3.299 3.299 0 0 0 2 20.995v-1.75a5.023 5.023 0 0 1 3.106 1.024 3.333 3.333 0 0 0 2.144.726 3.343 3.343 0 0 0 2.144-.726 5.023 5.023 0 0 1 3.106-1.024 5.032 5.032 0 0 1 3.115 1.024 3.5 3.5 0 0 0 4.279 0A5.075 5.075 0 0 1 23 19.246v1.75a3.343 3.343 0 0 0-2.144.727 5.25 5.25 0 0 1-6.221 0 3.343 3.343 0 0 0-2.135-.727 3.335 3.335 0 0 0-2.135.727 5.031 5.031 0 0 1-3.115 1.023 5.022 5.022 0 0 1-3.115-1.023ZM23.919 6.374V2h-5.25v1.75h3.5v2.625h-6.23l.761 6.851a11.954 11.954 0 0 0-4.2-.726c-4.375 0-8.024 2.196-8.654 5.25l1.75.35c.447-2.17 3.492-3.85 6.904-3.85s6.457 1.627 6.939 3.789l1.75-.377a5.82 5.82 0 0 0-2.625-3.5l-.674-6.037h10.185l-1.523 16.704a.875.875 0 0 1-.875.796h-4.584c.14-.573.208-1.16.2-1.75h-1.75c0 2.301-.314 3.5-7 3.5-6.684 0-7-1.199-7-3.5h-1.75c0 4.462 2.818 5.25 8.75 5.25 3.807 0 6.327-.332 7.648-1.75h5.495a2.625 2.625 0 0 0 2.625-2.389L30 6.375h-6.081Z"></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--foodLarge"><path d="M4.135 21.723A3.299 3.299 0 0 0 2 20.995v-1.75a5.023 5.023 0 0 1 3.106 1.024 3.333 3.333 0 0 0 2.144.726 3.343 3.343 0 0 0 2.144-.726 5.023 5.023 0 0 1 3.106-1.024 5.032 5.032 0 0 1 3.115 1.024 3.5 3.5 0 0 0 4.279 0A5.075 5.075 0 0 1 23 19.246v1.75a3.343 3.343 0 0 0-2.144.727 5.25 5.25 0 0 1-6.221 0 3.343 3.343 0 0 0-2.135-.727 3.335 3.335 0 0 0-2.135.727 5.031 5.031 0 0 1-3.115 1.023 5.022 5.022 0 0 1-3.115-1.023ZM23.919 6.374V2h-5.25v1.75h3.5v2.625h-6.23l.761 6.851a11.954 11.954 0 0 0-4.2-.726c-4.375 0-8.024 2.196-8.654 5.25l1.75.35c.447-2.17 3.492-3.85 6.904-3.85s6.457 1.627 6.939 3.789l1.75-.377a5.82 5.82 0 0 0-2.625-3.5l-.674-6.037h10.185l-1.523 16.704a.875.875 0 0 1-.875.796h-4.584c.14-.573.208-1.16.2-1.75h-1.75c0 2.301-.314 3.5-7 3.5-6.684 0-7-1.199-7-3.5h-1.75c0 4.462 2.818 5.25 8.75 5.25 3.807 0 6.327-.332 7.648-1.75h5.495a2.625 2.625 0 0 0 2.625-2.389L30 6.375h-6.081Z"></path></svg>';
 
 class IconFoodLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconFoodLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--foodLarge', '', null, 'IconFoodLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--foodLarge', '', null, 'IconFoodLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--foodLarge');
         this.root.append(svg);
     }

package/dist/IconFoodReady.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--foodReady"><path d="M13.941 12.935v-2.923a5.95 5.95 0 0 0-5.25-5.897 1.278 1.278 0 1 0-1.347 0 5.95 5.95 0 0 0-5.25 5.897v2.923h-.656v1.313h13.124v-1.313h-.62Zm-10.57-2.923a4.629 4.629 0 0 1 9.258 0v2.923H3.37v-2.923Z"></path><path d="M7.151 10.152 5.944 8.937 4.98 9.9l2.17 2.17L11.02 8.2l-.963-.953-2.905 2.904Z"></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--foodReady"><path d="M13.941 12.935v-2.923a5.95 5.95 0 0 0-5.25-5.897 1.278 1.278 0 1 0-1.347 0 5.95 5.95 0 0 0-5.25 5.897v2.923h-.656v1.313h13.124v-1.313h-.62Zm-10.57-2.923a4.629 4.629 0 0 1 9.258 0v2.923H3.37v-2.923Z"></path><path d="M7.151 10.152 5.944 8.937 4.98 9.9l2.17 2.17L11.02 8.2l-.963-.953-2.905 2.904Z"></path></svg>';
 
 class IconFoodReady extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconFoodReady extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--foodReady', '', null, 'IconFoodReady');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--foodReady', '', null, 'IconFoodReady');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--foodReady');
         this.root.append(svg);
     }

package/dist/IconFoodReadyLarge.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--foodReadyLarge"><path d="m9.376 13.996 1.374 1.129A7 7 0 0 1 16 12.719v-1.75a8.75 8.75 0 0 0-6.624 3.027Z"></path><path d="M13.874 21.25c.06-.596.186-1.183.376-1.75H5.937a10.054 10.054 0 0 1 18.585-5.329 8.006 8.006 0 0 1 2.564 1.304 11.83 11.83 0 0 0-8.951-7.586c.316-.442.487-.97.49-1.514a2.625 2.625 0 0 0-5.25 0c.003.543.174 1.072.49 1.514A11.83 11.83 0 0 0 4.187 19.5H2.875v5.25H14.25a8.91 8.91 0 0 1-.385-1.75h-9.24v-1.75h9.249ZM16 5.5a.875.875 0 1 1 0 1.75.875.875 0 0 1 0-1.75Z"></path><path d="m21.285 22.764-1.199-1.19-1.233 1.233 2.432 2.433 4.113-4.121-1.234-1.234-2.879 2.879Z"></path><path d="M28.25 19.675a6.877 6.877 0 0 0-1.794-2.511 6.6 6.6 0 0 0-1.846-1.12 6.459 6.459 0 0 0-2.485-.482 6.536 6.536 0 0 0-4.288 1.602 6.766 6.766 0 0 0-1.854 2.625 6.79 6.79 0 0 0-.394 1.75v.551a6.562 6.562 0 1 0 12.661-2.415Zm-6.125 7.262a4.821 4.821 0 0 1-4.813-4.812v-.551a4.77 4.77 0 0 1 .552-1.75c.186-.313.403-.606.647-.875a4.804 4.804 0 0 1 7.158 0c.244.27.46.563.647.875.296.542.483 1.136.552 1.75v.551a4.822 4.822 0 0 1-4.743 4.813Z"></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--foodReadyLarge"><path d="m9.376 13.996 1.374 1.129A7 7 0 0 1 16 12.719v-1.75a8.75 8.75 0 0 0-6.624 3.027Z"></path><path d="M13.874 21.25c.06-.596.186-1.183.376-1.75H5.937a10.054 10.054 0 0 1 18.585-5.329 8.006 8.006 0 0 1 2.564 1.304 11.83 11.83 0 0 0-8.951-7.586c.316-.442.487-.97.49-1.514a2.625 2.625 0 0 0-5.25 0c.003.543.174 1.072.49 1.514A11.83 11.83 0 0 0 4.187 19.5H2.875v5.25H14.25a8.91 8.91 0 0 1-.385-1.75h-9.24v-1.75h9.249ZM16 5.5a.875.875 0 1 1 0 1.75.875.875 0 0 1 0-1.75Z"></path><path d="m21.285 22.764-1.199-1.19-1.233 1.233 2.432 2.433 4.113-4.121-1.234-1.234-2.879 2.879Z"></path><path d="M28.25 19.675a6.877 6.877 0 0 0-1.794-2.511 6.6 6.6 0 0 0-1.846-1.12 6.459 6.459 0 0 0-2.485-.482 6.536 6.536 0 0 0-4.288 1.602 6.766 6.766 0 0 0-1.854 2.625 6.79 6.79 0 0 0-.394 1.75v.551a6.562 6.562 0 1 0 12.661-2.415Zm-6.125 7.262a4.821 4.821 0 0 1-4.813-4.812v-.551a4.77 4.77 0 0 1 .552-1.75c.186-.313.403-.606.647-.875a4.804 4.804 0 0 1 7.158 0c.244.27.46.563.647.875.296.542.483 1.136.552 1.75v.551a4.822 4.822 0 0 1-4.743 4.813Z"></path></svg>';
 
 class IconFoodReadyLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconFoodReadyLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--foodReadyLarge', '', null, 'IconFoodReadyLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--foodReadyLarge', '', null, 'IconFoodReadyLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--foodReadyLarge');
         this.root.append(svg);
     }

package/dist/IconFoundations.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--foundations"><g clip-path="url(#prefix__clip0_7066_3748)"><path d="M10.739 1.945H5.252v5.486h5.487V1.945ZM9.426 6.119H6.565V3.258h2.861v2.86Z"></path><path d="M1.875 14.169h5.486V8.683H1.875v5.486Zm1.313-4.174h2.86v2.861h-2.86V9.995Z"></path><path d="M8.621 8.674v5.486h5.486V8.674H8.622Zm4.174 4.174H9.934V9.986h2.861v2.861Z"></path></g><defs><clipPath id="prefix__clip0_7066_3748"><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--foundations"><g clip-path="url(#prefix__clip0_7066_3748)"><path d="M10.739 1.945H5.252v5.486h5.487V1.945ZM9.426 6.119H6.565V3.258h2.861v2.86Z"></path><path d="M1.875 14.169h5.486V8.683H1.875v5.486Zm1.313-4.174h2.86v2.861h-2.86V9.995Z"></path><path d="M8.621 8.674v5.486h5.486V8.674H8.622Zm4.174 4.174H9.934V9.986h2.861v2.861Z"></path></g><defs><clipPath id="prefix__clip0_7066_3748"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconFoundations extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconFoundations extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--foundations', '', null, 'IconFoundations');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--foundations', '', null, 'IconFoundations');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--foundations');
         this.root.append(svg);
     }

package/dist/IconFoundationsLarge.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--foundationsLarge"><path d="M4.625 27.375h10.509V16.866H4.625v10.509Zm1.75-8.759h7.009v7.009H6.375v-7.009Z"></path><path d="M16.866 16.892v10.51h10.509v-10.51H16.866Zm8.759 8.76h-7.009v-7.01h7.009v7.01Z"></path><path d="M10.75 4.625v10.509h10.509V4.625H10.75Zm1.75 8.759V6.375h7.009v7.009H12.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--foundationsLarge"><path d="M4.625 27.375h10.509V16.866H4.625v10.509Zm1.75-8.759h7.009v7.009H6.375v-7.009Z"></path><path d="M16.866 16.892v10.51h10.509v-10.51H16.866Zm8.759 8.76h-7.009v-7.01h7.009v7.01Z"></path><path d="M10.75 4.625v10.509h10.509V4.625H10.75Zm1.75 8.759V6.375h7.009v7.009H12.5Z"></path></svg>';
 
 class IconFoundationsLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconFoundationsLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--foundationsLarge', '', null, 'IconFoundationsLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--foundationsLarge', '', null, 'IconFoundationsLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--foundationsLarge');
         this.root.append(svg);
     }

package/dist/IconFriedChicken.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--friedChicken"><g clip-path="url(#prefix__clip0_18_757)"><path d="M4.29 4.412a2.625 2.625 0 0 1-.438-1.277 1.444 1.444 0 0 1 .648-1.26c.062.367.183.722.359 1.05.148.245.332.438.577.875.13.231.218.483.263.744.043.299-.006.604-.14.875A1.75 1.75 0 0 1 4.5 6.25c0-.481.105-.875.07-1.155a1.549 1.549 0 0 0-.28-.683Zm2.905-.874v.936a1.391 1.391 0 0 0 .875-.709c.1-.216.14-.455.114-.691A2.004 2.004 0 0 0 8 2.487c-.21-.315-.341-.472-.473-.656A2.844 2.844 0 0 1 7.17 1a1.146 1.146 0 0 0-.552 1.015c.024.372.145.73.35 1.041.109.153.186.325.228.508v-.026Zm7.752 5.425a3.58 3.58 0 0 1-2.327 3.29c-.534.997-1.995 2.152-4.524 1.268-2.721-.936-3.272-.498-3.666.114-.394.613-.805 1.199-1.374 1.199a1.251 1.251 0 0 1-.639-.201 1.225 1.225 0 0 1-.542-1.287 1.4 1.4 0 0 0 0-.525 2.24 2.24 0 0 0-.411-.673 1.286 1.286 0 0 1-.289-1.523A1.067 1.067 0 0 1 2.75 10.1a1.513 1.513 0 0 0 1.321 0c.508-.201.875-.875 1.216-1.636.525-1.059 1.164-2.363 2.625-2.582a4.375 4.375 0 0 1 2.783-1.224 3.5 3.5 0 0 1 2.494 1.172 3.159 3.159 0 0 1 1.758 3.133Zm-1.312 0c0-1.567-.875-1.917-1.015-1.943l-.166-.061-.132-.131a2.24 2.24 0 0 0-1.636-.876 3.229 3.229 0 0 0-2.012.998l-.184.175h-.263c-.813.053-1.216.744-1.75 1.881a4.12 4.12 0 0 1-1.89 2.275 2.8 2.8 0 0 1-2.003.114c.216.265.393.56.525.875.098.245.146.507.14.77l.105-.166c1.032-1.601 2.817-1.374 5.171-.595 2.354.778 2.975-.726 2.975-.779l.114-.297.315-.097a2.337 2.337 0 0 0 1.706-2.143Z"></path></g><defs><clipPath id="prefix__clip0_18_757"><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--friedChicken"><g clip-path="url(#prefix__clip0_18_757)"><path d="M4.29 4.412a2.625 2.625 0 0 1-.438-1.277 1.444 1.444 0 0 1 .648-1.26c.062.367.183.722.359 1.05.148.245.332.438.577.875.13.231.218.483.263.744.043.299-.006.604-.14.875A1.75 1.75 0 0 1 4.5 6.25c0-.481.105-.875.07-1.155a1.549 1.549 0 0 0-.28-.683Zm2.905-.874v.936a1.391 1.391 0 0 0 .875-.709c.1-.216.14-.455.114-.691A2.004 2.004 0 0 0 8 2.487c-.21-.315-.341-.472-.473-.656A2.844 2.844 0 0 1 7.17 1a1.146 1.146 0 0 0-.552 1.015c.024.372.145.73.35 1.041.109.153.186.325.228.508v-.026Zm7.752 5.425a3.58 3.58 0 0 1-2.327 3.29c-.534.997-1.995 2.152-4.524 1.268-2.721-.936-3.272-.498-3.666.114-.394.613-.805 1.199-1.374 1.199a1.251 1.251 0 0 1-.639-.201 1.225 1.225 0 0 1-.542-1.287 1.4 1.4 0 0 0 0-.525 2.24 2.24 0 0 0-.411-.673 1.286 1.286 0 0 1-.289-1.523A1.067 1.067 0 0 1 2.75 10.1a1.513 1.513 0 0 0 1.321 0c.508-.201.875-.875 1.216-1.636.525-1.059 1.164-2.363 2.625-2.582a4.375 4.375 0 0 1 2.783-1.224 3.5 3.5 0 0 1 2.494 1.172 3.159 3.159 0 0 1 1.758 3.133Zm-1.312 0c0-1.567-.875-1.917-1.015-1.943l-.166-.061-.132-.131a2.24 2.24 0 0 0-1.636-.876 3.229 3.229 0 0 0-2.012.998l-.184.175h-.263c-.813.053-1.216.744-1.75 1.881a4.12 4.12 0 0 1-1.89 2.275 2.8 2.8 0 0 1-2.003.114c.216.265.393.56.525.875.098.245.146.507.14.77l.105-.166c1.032-1.601 2.817-1.374 5.171-.595 2.354.778 2.975-.726 2.975-.779l.114-.297.315-.097a2.337 2.337 0 0 0 1.706-2.143Z"></path></g><defs><clipPath id="prefix__clip0_18_757"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconFriedChicken extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconFriedChicken extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--friedChicken', '', null, 'IconFriedChicken');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--friedChicken', '', null, 'IconFriedChicken');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--friedChicken');
         this.root.append(svg);
     }

package/dist/IconFriedChickenLarge.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--friedChickenLarge"><path d="M9.998 6.183a1.995 1.995 0 0 1 .936-1.995 2.808 2.808 0 0 0 .385 1.592c.218.341.612.656 1.058 1.225.26.33.444.712.543 1.12a2.3 2.3 0 0 1 0 .735 2.004 2.004 0 0 1-.236.63 2.818 2.818 0 0 1-1.75 1.242c.203-.569.358-1.154.464-1.75v-.27c0-.08-.053-.123-.07-.193a3.204 3.204 0 0 0-.342-.49 4.295 4.295 0 0 1-.989-1.846Zm5.538.385a.88.88 0 0 1 .07.13V6.9c-.046.501-.128.998-.245 1.487a2.231 2.231 0 0 0 1.54-1.032 1.83 1.83 0 0 0 .21-1.19c-.077-.36-.229-.7-.446-.997-.376-.5-.674-.736-.875-.99a2.537 2.537 0 0 1-.394-1.303 1.698 1.698 0 0 0-.875 1.689c.108.6.37 1.16.761 1.627.094.12.179.245.254.377Zm13.589 10.7a6.58 6.58 0 0 1-4.436 6.126c-.648 1.146-2.975 4.261-8.365 2.406-5.04-1.75-6.607-1.181-7.604.376-.884 1.339-1.47 2.127-2.345 2.127a1.995 1.995 0 0 1-1.032-.342l-.097-.061a2.012 2.012 0 0 1-.744-2.074c.057-.401.027-.81-.087-1.198a4.908 4.908 0 0 0-.875-1.4 2.144 2.144 0 0 1-.473-2.494c.692-1.593 1.925-1.103 2.52-.875a3.289 3.289 0 0 0 2.87 0c1.12-.455 1.83-1.882 2.573-3.387 1.041-2.1 2.214-4.47 4.926-4.82a8.138 8.138 0 0 1 5.25-2.346 6.335 6.335 0 0 1 4.629 2.214c.857.332 3.29 1.689 3.29 5.749Zm-1.75 0c0-3.42-2.161-4.138-2.249-4.164l-.227-.07-.149-.184a4.743 4.743 0 0 0-3.5-1.794 5.32 5.32 0 0 0-2.73.875 7 7 0 0 1 1.418.569l-.875 1.523a5.25 5.25 0 0 0-2.625-.674c-1.75.122-2.625 1.549-3.79 3.876-.874 1.75-1.75 3.5-3.5 4.226a5.021 5.021 0 0 1-4.173 0l-.254-.096v.044c-.114.262-.114.262.228.691a6.897 6.897 0 0 1 1.128 1.846c.219.63.29 1.3.21 1.96v.525c.351-.38.673-.787.963-1.216 1.934-3.01 5.127-2.625 9.625-1.094 4.935 1.706 6.309-1.645 6.37-1.75a2.564 2.564 0 0 0 .052-2.003l1.575-.858c.23.51.352 1.06.36 1.619a4.498 4.498 0 0 0 2.143-3.85Z"></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--friedChickenLarge"><path d="M9.998 6.183a1.995 1.995 0 0 1 .936-1.995 2.808 2.808 0 0 0 .385 1.592c.218.341.612.656 1.058 1.225.26.33.444.712.543 1.12a2.3 2.3 0 0 1 0 .735 2.004 2.004 0 0 1-.236.63 2.818 2.818 0 0 1-1.75 1.242c.203-.569.358-1.154.464-1.75v-.27c0-.08-.053-.123-.07-.193a3.204 3.204 0 0 0-.342-.49 4.295 4.295 0 0 1-.989-1.846Zm5.538.385a.88.88 0 0 1 .07.13V6.9c-.046.501-.128.998-.245 1.487a2.231 2.231 0 0 0 1.54-1.032 1.83 1.83 0 0 0 .21-1.19c-.077-.36-.229-.7-.446-.997-.376-.5-.674-.736-.875-.99a2.537 2.537 0 0 1-.394-1.303 1.698 1.698 0 0 0-.875 1.689c.108.6.37 1.16.761 1.627.094.12.179.245.254.377Zm13.589 10.7a6.58 6.58 0 0 1-4.436 6.126c-.648 1.146-2.975 4.261-8.365 2.406-5.04-1.75-6.607-1.181-7.604.376-.884 1.339-1.47 2.127-2.345 2.127a1.995 1.995 0 0 1-1.032-.342l-.097-.061a2.012 2.012 0 0 1-.744-2.074c.057-.401.027-.81-.087-1.198a4.908 4.908 0 0 0-.875-1.4 2.144 2.144 0 0 1-.473-2.494c.692-1.593 1.925-1.103 2.52-.875a3.289 3.289 0 0 0 2.87 0c1.12-.455 1.83-1.882 2.573-3.387 1.041-2.1 2.214-4.47 4.926-4.82a8.138 8.138 0 0 1 5.25-2.346 6.335 6.335 0 0 1 4.629 2.214c.857.332 3.29 1.689 3.29 5.749Zm-1.75 0c0-3.42-2.161-4.138-2.249-4.164l-.227-.07-.149-.184a4.743 4.743 0 0 0-3.5-1.794 5.32 5.32 0 0 0-2.73.875 7 7 0 0 1 1.418.569l-.875 1.523a5.25 5.25 0 0 0-2.625-.674c-1.75.122-2.625 1.549-3.79 3.876-.874 1.75-1.75 3.5-3.5 4.226a5.021 5.021 0 0 1-4.173 0l-.254-.096v.044c-.114.262-.114.262.228.691a6.897 6.897 0 0 1 1.128 1.846c.219.63.29 1.3.21 1.96v.525c.351-.38.673-.787.963-1.216 1.934-3.01 5.127-2.625 9.625-1.094 4.935 1.706 6.309-1.645 6.37-1.75a2.564 2.564 0 0 0 .052-2.003l1.575-.858c.23.51.352 1.06.36 1.619a4.498 4.498 0 0 0 2.143-3.85Z"></path></svg>';
 
 class IconFriedChickenLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconFriedChickenLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--friedChickenLarge', '', null, 'IconFriedChickenLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--friedChickenLarge', '', null, 'IconFriedChickenLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--friedChickenLarge');
         this.root.append(svg);
     }

package/dist/IconFries.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--fries"><path d="M12.769 5.725a.639.639 0 0 0-.648-.079l.674-2.152L11.5 3.1l-.875 3.036c-.297.07-.586.131-.875.175l.543-5.031-1.313-.149-.604 5.311H7.72L7.195 1.5l-1.313.14.508 4.69c-.306 0-.621-.105-.875-.175L4.5 2.619l-1.269.341.727 2.721h-.106a.647.647 0 0 0-.874.683l.778 6.238a1.531 1.531 0 0 0 1.514 1.34h5.46a1.531 1.531 0 0 0 1.514-1.34l.779-6.238a.63.63 0 0 0-.254-.639Zm-1.82 6.65a.227.227 0 0 1-.219.193H5.27a.227.227 0 0 1-.219-.193L4.412 7.23c2.336.735 4.84.735 7.176 0l-.64 5.145Z"></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--fries"><path d="M12.769 5.725a.639.639 0 0 0-.648-.079l.674-2.152L11.5 3.1l-.875 3.036c-.297.07-.586.131-.875.175l.543-5.031-1.313-.149-.604 5.311H7.72L7.195 1.5l-1.313.14.508 4.69c-.306 0-.621-.105-.875-.175L4.5 2.619l-1.269.341.727 2.721h-.106a.647.647 0 0 0-.874.683l.778 6.238a1.531 1.531 0 0 0 1.514 1.34h5.46a1.531 1.531 0 0 0 1.514-1.34l.779-6.238a.63.63 0 0 0-.254-.639Zm-1.82 6.65a.227.227 0 0 1-.219.193H5.27a.227.227 0 0 1-.219-.193L4.412 7.23c2.336.735 4.84.735 7.176 0l-.64 5.145Z"></path></svg>';
 
 class IconFries extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconFries extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--fries', '', null, 'IconFries');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--fries', '', null, 'IconFries');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--fries');
         this.root.append(svg);
     }

package/dist/IconFriesLarge.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--friesLarge"><path d="M25.826 12.8a.876.876 0 0 0-.875-.105l-.709.271.937-3.141a.874.874 0 0 0-.309-.96.876.876 0 0 0-.313-.151l-3.5-.875.324-2.993a.875.875 0 0 0-.131-.63.876.876 0 0 0-.613-.341l-3.56-.306a.875.875 0 0 0-.946.779l-.07.62a.875.875 0 0 0-.875-.612l-3.561.307a.875.875 0 0 0-.796.953l.131 1.278-3.194.674a.875.875 0 0 0-.691 1.076l1.146 4.497c-.402-.14-.796-.289-1.181-.446a.875.875 0 0 0-1.216.91l1.662 13.247a2.748 2.748 0 0 0 2.721 2.398h11.585a2.748 2.748 0 0 0 2.722-2.398l1.654-13.247a.875.875 0 0 0-.342-.805Zm-4.375-3.045 1.75.446-1.006 3.421c-.595.167-1.199.316-1.803.43l.123-1.165.936-3.132ZM17.75 5.398l1.82.157-.945 8.767c-.613.07-1.234.114-1.855.132l.98-9.056Zm-3.316.778.709 7-.14 1.278c-.342 0-.683 0-1.015-.07l-.902-3.632-.446-4.374 1.794-.202ZM9 9.125l1.75-.376.56 2.205v.166l.779 3.063a22.517 22.517 0 0 1-1.969-.412L9 9.125Zm13.773 17.5a.98.98 0 0 1-.98.875H10.207a.98.98 0 0 1-.98-.875l-1.48-11.786a25.165 25.165 0 0 0 16.503 0l-1.479 11.786Z"></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--friesLarge"><path d="M25.826 12.8a.876.876 0 0 0-.875-.105l-.709.271.937-3.141a.874.874 0 0 0-.309-.96.876.876 0 0 0-.313-.151l-3.5-.875.324-2.993a.875.875 0 0 0-.131-.63.876.876 0 0 0-.613-.341l-3.56-.306a.875.875 0 0 0-.946.779l-.07.62a.875.875 0 0 0-.875-.612l-3.561.307a.875.875 0 0 0-.796.953l.131 1.278-3.194.674a.875.875 0 0 0-.691 1.076l1.146 4.497c-.402-.14-.796-.289-1.181-.446a.875.875 0 0 0-1.216.91l1.662 13.247a2.748 2.748 0 0 0 2.721 2.398h11.585a2.748 2.748 0 0 0 2.722-2.398l1.654-13.247a.875.875 0 0 0-.342-.805Zm-4.375-3.045 1.75.446-1.006 3.421c-.595.167-1.199.316-1.803.43l.123-1.165.936-3.132ZM17.75 5.398l1.82.157-.945 8.767c-.613.07-1.234.114-1.855.132l.98-9.056Zm-3.316.778.709 7-.14 1.278c-.342 0-.683 0-1.015-.07l-.902-3.632-.446-4.374 1.794-.202ZM9 9.125l1.75-.376.56 2.205v.166l.779 3.063a22.517 22.517 0 0 1-1.969-.412L9 9.125Zm13.773 17.5a.98.98 0 0 1-.98.875H10.207a.98.98 0 0 1-.98-.875l-1.48-11.786a25.165 25.165 0 0 0 16.503 0l-1.479 11.786Z"></path></svg>';
 
 class IconFriesLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconFriesLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--friesLarge', '', null, 'IconFriesLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--friesLarge', '', null, 'IconFriesLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--friesLarge');
         this.root.append(svg);
     }

package/dist/IconFullscreenExit.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--fullscreenExit"><path d="M6.031 1.123 4.72 1.86V4.72H1.766L1.109 6.03h4.922V1.123Z"></path><path d="m9.969 1.11 1.312.656v2.953h2.859l.737 1.312H9.97V1.11Z"></path><path d="m14.89 9.969-.656 1.312h-2.953v2.859l-1.312.737V9.97h4.922Z"></path><path d="m1.123 9.969.737 1.312H4.72v2.953l1.312.657V9.969H1.123Z"></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--fullscreenExit"><path d="M6.031 1.123 4.72 1.86V4.72H1.766L1.109 6.03h4.922V1.123Z"></path><path d="m9.969 1.11 1.312.656v2.953h2.859l.737 1.312H9.97V1.11Z"></path><path d="m14.89 9.969-.656 1.312h-2.953v2.859l-1.312.737V9.97h4.922Z"></path><path d="m1.123 9.969.737 1.312H4.72v2.953l1.312.657V9.969H1.123Z"></path></svg>';
 
 class IconFullscreenExit extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconFullscreenExit extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--fullscreenExit', '', null, 'IconFullscreenExit');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--fullscreenExit', '', null, 'IconFullscreenExit');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--fullscreenExit');
         this.root.append(svg);
     }

package/dist/IconFullscreenExitLarge.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--fullscreenExitLarge"><path d="m21.25 4.188-1.75-.875V12.5h9.132l-.986-1.75H21.25V4.187Z"></path><path d="m4.354 21.25-.986-1.75H12.5v9.188l-1.75-.875V21.25H4.354Z"></path><path d="m28.688 19.5-.875 1.75H21.25v6.396l-1.75.986V19.5h9.188Z"></path><path d="m10.75 4.354 1.75-.986V12.5H3.312l.876-1.75h6.562V4.354Z"></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--fullscreenExitLarge"><path d="m21.25 4.188-1.75-.875V12.5h9.132l-.986-1.75H21.25V4.187Z"></path><path d="m4.354 21.25-.986-1.75H12.5v9.188l-1.75-.875V21.25H4.354Z"></path><path d="m28.688 19.5-.875 1.75H21.25v6.396l-1.75.986V19.5h9.188Z"></path><path d="m10.75 4.354 1.75-.986V12.5H3.312l.876-1.75h6.562V4.354Z"></path></svg>';
 
 class IconFullscreenExitLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconFullscreenExitLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--fullscreenExitLarge', '', null, 'IconFullscreenExitLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--fullscreenExitLarge', '', null, 'IconFullscreenExitLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--fullscreenExitLarge');
         this.root.append(svg);
     }

package/dist/IconFullscreenExpand.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--fullscreenExpand"><path d="m5.99 3.406.737-1.312H2.094v4.633l1.312-.738V3.406H5.99Z"></path><path d="M10.01 3.406h2.584V5.99l1.312.738V2.094H9.273l.738 1.312Z"></path><path d="M12.594 10.01v2.584H10.01l-.738 1.312h4.633V9.273l-1.312.738Z"></path><path d="m3.406 10.01-1.312-.737v4.633h4.633l-.738-1.312H3.406V10.01Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--fullscreenExpand"><path d="m5.99 3.406.737-1.312H2.094v4.633l1.312-.738V3.406H5.99Z"></path><path d="M10.01 3.406h2.584V5.99l1.312.738V2.094H9.273l.738 1.312Z"></path><path d="M12.594 10.01v2.584H10.01l-.738 1.312h4.633V9.273l-1.312.738Z"></path><path d="m3.406 10.01-1.312-.737v4.633h4.633l-.738-1.312H3.406V10.01Z"></path></svg>';
 
 class IconFullscreenExpand extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconFullscreenExpand extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--fullscreenExpand', '', null, 'IconFullscreenExpand');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--fullscreenExpand', '', null, 'IconFullscreenExpand');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--fullscreenExpand');
         this.root.append(svg);
     }

package/dist/IconFullscreenExpandLarge.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--fullscreenExpandLarge"><path d="M5.5 5.375h8.583l-.983 1.75H7.25v5.85l-1.75.983V5.375Z"></path><path d="M18.9 7.125h5.85v5.848l1.75.981V5.375h-8.583l.983 1.75Z"></path><path d="M26.5 26.375h-8.58l.982-1.75h5.848v-5.848l1.75-.982v8.58Z"></path><path d="M5.5 26.375v-8.583l1.75.983v5.85h5.848l.981 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--fullscreenExpandLarge"><path d="M5.5 5.375h8.583l-.983 1.75H7.25v5.85l-1.75.983V5.375Z"></path><path d="M18.9 7.125h5.85v5.848l1.75.981V5.375h-8.583l.983 1.75Z"></path><path d="M26.5 26.375h-8.58l.982-1.75h5.848v-5.848l1.75-.982v8.58Z"></path><path d="M5.5 26.375v-8.583l1.75.983v5.85h5.848l.981 1.75H5.5Z"></path></svg>';
 
 class IconFullscreenExpandLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconFullscreenExpandLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--fullscreenExpandLarge', '', null, 'IconFullscreenExpandLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--fullscreenExpandLarge', '', null, 'IconFullscreenExpandLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--fullscreenExpandLarge');
         this.root.append(svg);
     }

package/dist/IconGeolocation.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--geolocation"><path d="M9.452 14.466H8.044l-.534-2.091A5.25 5.25 0 0 0 3.669 8.49L1.534 8V6.547l11.882-3.963-3.964 11.882ZM3.81 7.17h.175a6.598 6.598 0 0 1 4.803 4.847v.175l2.503-7.525L3.809 7.17Z"></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--geolocation"><path d="M9.452 14.466H8.044l-.534-2.091A5.25 5.25 0 0 0 3.669 8.49L1.534 8V6.547l11.882-3.963-3.964 11.882ZM3.81 7.17h.175a6.598 6.598 0 0 1 4.803 4.847v.175l2.503-7.525L3.809 7.17Z"></path></svg>';
 
 class IconGeolocation extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconGeolocation extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--geolocation', '', null, 'IconGeolocation');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--geolocation', '', null, 'IconGeolocation');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--geolocation');
         this.root.append(svg);
     }

package/dist/IconGeolocationCircle.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--geolocationCircle"><path d="M8 1.42a6.58 6.58 0 1 0 0 13.16A6.58 6.58 0 0 0 8 1.42Zm0 11.83a5.25 5.25 0 1 1 0-10.5 5.25 5.25 0 0 1 0 10.5Z"></path><path d="m4.351 8.28 1.33.332a2.345 2.345 0 0 1 1.75 1.75l.333 1.33h1.172l2.293-6.877L4.35 7.064V8.28Zm4.769-1.4-.761 2.284A3.649 3.649 0 0 0 6.836 7.64L9.12 6.88Z"></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--geolocationCircle"><path d="M8 1.42a6.58 6.58 0 1 0 0 13.16A6.58 6.58 0 0 0 8 1.42Zm0 11.83a5.25 5.25 0 1 1 0-10.5 5.25 5.25 0 0 1 0 10.5Z"></path><path d="m4.351 8.28 1.33.332a2.345 2.345 0 0 1 1.75 1.75l.333 1.33h1.172l2.293-6.877L4.35 7.064V8.28Zm4.769-1.4-.761 2.284A3.649 3.649 0 0 0 6.836 7.64L9.12 6.88Z"></path></svg>';
 
 class IconGeolocationCircle extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconGeolocationCircle extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--geolocationCircle', '', null, 'IconGeolocationCircle');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--geolocationCircle', '', null, 'IconGeolocationCircle');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--geolocationCircle');
         this.root.append(svg);
     }

package/dist/IconGeolocationCircleFilled.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--geolocationCircleFilled"><path d="M8.359 9.164 9.12 6.88l-2.284.761c.65.343 1.18.874 1.523 1.523Z"></path><path fill-rule="evenodd" d="M8 1.42a6.58 6.58 0 1 0 0 13.16A6.58 6.58 0 0 0 8 1.42ZM5.68 8.613l-1.33-.333V7.064l6.878-2.249-2.293 6.878H7.764l-.333-1.33a2.345 2.345 0 0 0-1.75-1.75Z" 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--geolocationCircleFilled"><path d="M8.359 9.164 9.12 6.88l-2.284.761c.65.343 1.18.874 1.523 1.523Z"></path><path fill-rule="evenodd" d="M8 1.42a6.58 6.58 0 1 0 0 13.16A6.58 6.58 0 0 0 8 1.42ZM5.68 8.613l-1.33-.333V7.064l6.878-2.249-2.293 6.878H7.764l-.333-1.33a2.345 2.345 0 0 0-1.75-1.75Z" clip-rule="evenodd"></path></svg>';
 
 class IconGeolocationCircleFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconGeolocationCircleFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--geolocationCircleFilled', '', null, 'IconGeolocationCircleFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--geolocationCircleFilled', '', null, 'IconGeolocationCircleFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--geolocationCircleFilled');
         this.root.append(svg);
     }

package/dist/IconGeolocationCircleFilledLarge.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--geolocationCircleFilledLarge"><path d="m16.718 19.185 1.96-5.862-5.863 1.96a6.431 6.431 0 0 1 3.903 3.902Z"></path><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm1.479 18.69h-1.75l-.551-2.205a4.752 4.752 0 0 0-3.448-3.447l-2.205-.552v-1.75l11.917-3.929L17.48 22.44Z"></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--geolocationCircleFilledLarge"><path d="m16.718 19.185 1.96-5.862-5.863 1.96a6.431 6.431 0 0 1 3.903 3.902Z"></path><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm1.479 18.69h-1.75l-.551-2.205a4.752 4.752 0 0 0-3.448-3.447l-2.205-.552v-1.75l11.917-3.929L17.48 22.44Z"></path></svg>';
 
 class IconGeolocationCircleFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconGeolocationCircleFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--geolocationCircleFilledLarge', '', null, 'IconGeolocationCircleFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--geolocationCircleFilledLarge', '', null, 'IconGeolocationCircleFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--geolocationCircleFilledLarge');
         this.root.append(svg);
     }

package/dist/IconGeolocationCircleLarge.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--geolocationCircleLarge"><path d="M17.479 22.44h-1.75l-.551-2.205a4.752 4.752 0 0 0-3.448-3.447l-2.205-.552v-1.75l11.917-3.929L17.48 22.44Zm-4.664-7.158a6.432 6.432 0 0 1 3.903 3.903l1.96-5.862-5.863 1.96ZM16 28.25a12.25 12.25 0 1 1 0-24.5 12.25 12.25 0 0 1 0 24.5ZM16 5.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--geolocationCircleLarge"><path d="M17.479 22.44h-1.75l-.551-2.205a4.752 4.752 0 0 0-3.448-3.447l-2.205-.552v-1.75l11.917-3.929L17.48 22.44Zm-4.664-7.158a6.432 6.432 0 0 1 3.903 3.903l1.96-5.862-5.863 1.96ZM16 28.25a12.25 12.25 0 1 1 0-24.5 12.25 12.25 0 0 1 0 24.5ZM16 5.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21Z"></path></svg>';
 
 class IconGeolocationCircleLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconGeolocationCircleLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--geolocationCircleLarge', '', null, 'IconGeolocationCircleLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--geolocationCircleLarge', '', null, 'IconGeolocationCircleLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--geolocationCircleLarge');
         this.root.append(svg);
     }