@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/dist/IconAtSymbolLarge.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--atSymbolLarge"><path d="M15.886 27.086a10.577 10.577 0 0 1-4.165-.805 10.14 10.14 0 0 1-3.342-2.248 10.405 10.405 0 0 1-2.205-3.448 11.83 11.83 0 0 1-.796-4.375 12.906 12.906 0 0 1 .796-4.585 10.5 10.5 0 0 1 2.222-3.579 9.8 9.8 0 0 1 3.386-2.31 10.946 10.946 0 0 1 4.305-.822c1.379-.009 2.75.204 4.06.63A9.46 9.46 0 0 1 23.5 7.442a8.97 8.97 0 0 1 2.284 3.142 10.64 10.64 0 0 1 .874 4.375 8.95 8.95 0 0 1-.463 2.791 6.676 6.676 0 0 1-1.181 2.161 5.248 5.248 0 0 1-1.75 1.383 5.04 5.04 0 0 1-2.197.481H19.44v-2.126h-.175c-.3.712-.802 1.32-1.444 1.75a4.007 4.007 0 0 1-2.319.691 4.97 4.97 0 0 1-2.056-.429 4.76 4.76 0 0 1-1.636-1.286 5.855 5.855 0 0 1-1.059-1.881A7.34 7.34 0 0 1 10.321 16a7 7 0 0 1 .429-2.45 5.853 5.853 0 0 1 1.059-1.925 4.926 4.926 0 0 1 1.636-1.242 4.838 4.838 0 0 1 2.056-.438 4.19 4.19 0 0 1 2.336.647 3.44 3.44 0 0 1 1.427 1.75h.175v-2.108h1.916V20.27a2.625 2.625 0 0 0 1.339-.376c.445-.27.822-.638 1.102-1.076.34-.524.588-1.1.735-1.707.183-.732.271-1.485.263-2.24a9.171 9.171 0 0 0-.7-3.745 7.193 7.193 0 0 0-1.899-2.564 7.604 7.604 0 0 0-2.782-1.478c-1.08-.318-2.2-.477-3.326-.473a9.266 9.266 0 0 0-3.543.639 7.779 7.779 0 0 0-2.748 1.925 8.592 8.592 0 0 0-1.75 3.01 11.803 11.803 0 0 0-.63 3.981 10.5 10.5 0 0 0 .648 3.736 8.654 8.654 0 0 0 1.759 2.923A8.173 8.173 0 0 0 12.5 24.75a8.356 8.356 0 0 0 3.386.674 9.705 9.705 0 0 0 2.118-.219 7.877 7.877 0 0 0 1.75-.604l.621 1.488c-.643.3-1.314.538-2.004.709-.813.198-1.648.295-2.485.288Zm0-15.356a3.201 3.201 0 0 0-2.511 1.067A4.733 4.733 0 0 0 12.439 16a4.707 4.707 0 0 0 .936 3.229 3.203 3.203 0 0 0 2.494 1.067 3.149 3.149 0 0 0 2.45-1.067 4.664 4.664 0 0 0 .98-3.229 4.69 4.69 0 0 0-.963-3.22 3.15 3.15 0 0 0-2.45-1.05Z"></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--atSymbolLarge"><path d="M15.886 27.086a10.577 10.577 0 0 1-4.165-.805 10.14 10.14 0 0 1-3.342-2.248 10.405 10.405 0 0 1-2.205-3.448 11.83 11.83 0 0 1-.796-4.375 12.906 12.906 0 0 1 .796-4.585 10.5 10.5 0 0 1 2.222-3.579 9.8 9.8 0 0 1 3.386-2.31 10.946 10.946 0 0 1 4.305-.822c1.379-.009 2.75.204 4.06.63A9.46 9.46 0 0 1 23.5 7.442a8.97 8.97 0 0 1 2.284 3.142 10.64 10.64 0 0 1 .874 4.375 8.95 8.95 0 0 1-.463 2.791 6.676 6.676 0 0 1-1.181 2.161 5.248 5.248 0 0 1-1.75 1.383 5.04 5.04 0 0 1-2.197.481H19.44v-2.126h-.175c-.3.712-.802 1.32-1.444 1.75a4.007 4.007 0 0 1-2.319.691 4.97 4.97 0 0 1-2.056-.429 4.76 4.76 0 0 1-1.636-1.286 5.855 5.855 0 0 1-1.059-1.881A7.34 7.34 0 0 1 10.321 16a7 7 0 0 1 .429-2.45 5.853 5.853 0 0 1 1.059-1.925 4.926 4.926 0 0 1 1.636-1.242 4.838 4.838 0 0 1 2.056-.438 4.19 4.19 0 0 1 2.336.647 3.44 3.44 0 0 1 1.427 1.75h.175v-2.108h1.916V20.27a2.625 2.625 0 0 0 1.339-.376c.445-.27.822-.638 1.102-1.076.34-.524.588-1.1.735-1.707.183-.732.271-1.485.263-2.24a9.171 9.171 0 0 0-.7-3.745 7.193 7.193 0 0 0-1.899-2.564 7.604 7.604 0 0 0-2.782-1.478c-1.08-.318-2.2-.477-3.326-.473a9.266 9.266 0 0 0-3.543.639 7.779 7.779 0 0 0-2.748 1.925 8.592 8.592 0 0 0-1.75 3.01 11.803 11.803 0 0 0-.63 3.981 10.5 10.5 0 0 0 .648 3.736 8.654 8.654 0 0 0 1.759 2.923A8.173 8.173 0 0 0 12.5 24.75a8.356 8.356 0 0 0 3.386.674 9.705 9.705 0 0 0 2.118-.219 7.877 7.877 0 0 0 1.75-.604l.621 1.488c-.643.3-1.314.538-2.004.709-.813.198-1.648.295-2.485.288Zm0-15.356a3.201 3.201 0 0 0-2.511 1.067A4.733 4.733 0 0 0 12.439 16a4.707 4.707 0 0 0 .936 3.229 3.203 3.203 0 0 0 2.494 1.067 3.149 3.149 0 0 0 2.45-1.067 4.664 4.664 0 0 0 .98-3.229 4.69 4.69 0 0 0-.963-3.22 3.15 3.15 0 0 0-2.45-1.05Z"></path></svg>';
 
 class IconAtSymbolLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconAtSymbolLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--atSymbolLarge', '', null, 'IconAtSymbolLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--atSymbolLarge', '', null, 'IconAtSymbolLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--atSymbolLarge');
         this.root.append(svg);
     }

package/dist/IconAtom.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--atom"><path d="M12.375 8c.499-.64.94-1.322 1.321-2.039 1.041-2.047.586-3.141 0-3.701C12.62 1.131 10.625 1.621 8 3.625c-.637-.51-1.32-.961-2.039-1.347C3.914 1.236 2.82 1.69 2.26 2.26s-1.024 1.654 0 3.701A14 14 0 0 0 3.625 8a14 14 0 0 0-1.321 2.039c-1.042 2.047-.587 3.141 0 3.701a2.047 2.047 0 0 0 1.513.604c1.12 0 2.555-.665 4.227-1.951.637.504 1.32.95 2.038 1.33a4.839 4.839 0 0 0 2.17.62 2.038 2.038 0 0 0 1.532-.603c.568-.56 1.023-1.654 0-3.701-.409-.72-.88-1.402-1.41-2.039Zm.411-4.812c.49.48.044 1.575-.262 2.178-.298.555-.64 1.085-1.024 1.584-.376-.42-.77-.875-1.208-1.277-.437-.403-.875-.875-1.286-1.208 1.811-1.312 3.264-1.82 3.806-1.277h-.026Zm-9.625 9.624c-.49-.48 0-1.574.263-2.178.314-.557.674-1.087 1.076-1.584.376.42.77.875 1.207 1.277.438.403.875.832 1.287 1.208-1.812 1.313-3.264 1.82-3.807 1.277h-.026Zm9.625 0c-.481.49-1.575.044-2.179-.262A17.34 17.34 0 0 1 6.6 9.4c-.473-.472-.875-.936-1.295-1.4A23.37 23.37 0 0 1 6.6 6.6c.233-.24.47-.467.709-.682l-.875-.963c-.254.228-.5.464-.744.718A17.66 17.66 0 0 0 4.482 6.95 11.524 11.524 0 0 1 3.45 5.375c-.306-.604-.753-1.697-.263-2.179.49-.481 1.575 0 2.18.263C6.858 4.3 8.216 5.359 9.4 6.6c.472.473.875.936 1.295 1.4-.394.464-.823.928-1.295 1.4-.245.254-.499.49-.744.726l.875.963c.263-.245.525-.499.779-.761.437-.43.831-.875 1.207-1.278.387.496.732 1.023 1.033 1.575.306.613.752 1.75.262 2.188h-.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--atom"><path d="M12.375 8c.499-.64.94-1.322 1.321-2.039 1.041-2.047.586-3.141 0-3.701C12.62 1.131 10.625 1.621 8 3.625c-.637-.51-1.32-.961-2.039-1.347C3.914 1.236 2.82 1.69 2.26 2.26s-1.024 1.654 0 3.701A14 14 0 0 0 3.625 8a14 14 0 0 0-1.321 2.039c-1.042 2.047-.587 3.141 0 3.701a2.047 2.047 0 0 0 1.513.604c1.12 0 2.555-.665 4.227-1.951.637.504 1.32.95 2.038 1.33a4.839 4.839 0 0 0 2.17.62 2.038 2.038 0 0 0 1.532-.603c.568-.56 1.023-1.654 0-3.701-.409-.72-.88-1.402-1.41-2.039Zm.411-4.812c.49.48.044 1.575-.262 2.178-.298.555-.64 1.085-1.024 1.584-.376-.42-.77-.875-1.208-1.277-.437-.403-.875-.875-1.286-1.208 1.811-1.312 3.264-1.82 3.806-1.277h-.026Zm-9.625 9.624c-.49-.48 0-1.574.263-2.178.314-.557.674-1.087 1.076-1.584.376.42.77.875 1.207 1.277.438.403.875.832 1.287 1.208-1.812 1.313-3.264 1.82-3.807 1.277h-.026Zm9.625 0c-.481.49-1.575.044-2.179-.262A17.34 17.34 0 0 1 6.6 9.4c-.473-.472-.875-.936-1.295-1.4A23.37 23.37 0 0 1 6.6 6.6c.233-.24.47-.467.709-.682l-.875-.963c-.254.228-.5.464-.744.718A17.66 17.66 0 0 0 4.482 6.95 11.524 11.524 0 0 1 3.45 5.375c-.306-.604-.753-1.697-.263-2.179.49-.481 1.575 0 2.18.263C6.858 4.3 8.216 5.359 9.4 6.6c.472.473.875.936 1.295 1.4-.394.464-.823.928-1.295 1.4-.245.254-.499.49-.744.726l.875.963c.263-.245.525-.499.779-.761.437-.43.831-.875 1.207-1.278.387.496.732 1.023 1.033 1.575.306.613.752 1.75.262 2.188h-.026Z"></path></svg>';
 
 class IconAtom extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconAtom extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--atom', '', null, 'IconAtom');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--atom', '', null, 'IconAtom');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--atom');
         this.root.append(svg);
     }

package/dist/IconAtomLarge.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--atomLarge"><path d="M25.861 11.826c1.75-3.5 1.032-5.294.096-6.221-1.899-1.908-5.425-.98-9.957 2.52-4.445-3.5-8.041-4.463-9.958-2.538-1.916 1.925-.953 5.522 2.538 9.975-3.5 4.454-4.463 8.042-2.538 9.958a3.36 3.36 0 0 0 2.494.98c1.934 0 4.48-1.199 7.455-3.5 2.94 2.31 5.504 3.5 7.464 3.5a3.385 3.385 0 0 0 2.502-.98c1.925-1.916.954-5.504-2.537-9.958a23.279 23.279 0 0 0 2.441-3.736ZM24.75 6.84c1.146 1.146.148 3.928-2.442 7.332-.743-.796-1.522-1.671-2.388-2.546a43.566 43.566 0 0 0-2.529-2.363c3.439-2.598 6.221-3.535 7.359-2.423ZM7.25 24.286c-1.12-1.146-.123-3.911 2.467-7.332a50.58 50.58 0 0 0 2.363 2.528c.866.867 1.75 1.654 2.528 2.363-3.438 2.616-6.22 3.552-7.358 2.441Zm17.447 0c-1.584 1.584-6.273-.875-11.375-6.037-.875-.92-1.75-1.812-2.476-2.687.735-.875 1.566-1.75 2.476-2.686.42-.42.875-.822 1.26-1.216l-1.207-1.278c-.438.403-.875.823-1.304 1.26-.875.875-1.645 1.75-2.362 2.53-2.582-3.422-3.58-6.187-2.46-7.333a1.75 1.75 0 0 1 1.34-.464c2.16 0 5.993 2.406 10.097 6.501.875.919 1.75 1.811 2.476 2.686-.735.875-1.566 1.75-2.476 2.687-.446.446-.875.875-1.339 1.277l1.19 1.286c.464-.428.928-.875 1.383-1.33a43.538 43.538 0 0 0 2.353-2.537c2.6 3.43 3.597 6.195 2.477 7.341h-.053ZM16 17.505a1.943 1.943 0 1 1 1.942-1.943A1.935 1.935 0 0 1 16 17.505Z"></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--atomLarge"><path d="M25.861 11.826c1.75-3.5 1.032-5.294.096-6.221-1.899-1.908-5.425-.98-9.957 2.52-4.445-3.5-8.041-4.463-9.958-2.538-1.916 1.925-.953 5.522 2.538 9.975-3.5 4.454-4.463 8.042-2.538 9.958a3.36 3.36 0 0 0 2.494.98c1.934 0 4.48-1.199 7.455-3.5 2.94 2.31 5.504 3.5 7.464 3.5a3.385 3.385 0 0 0 2.502-.98c1.925-1.916.954-5.504-2.537-9.958a23.279 23.279 0 0 0 2.441-3.736ZM24.75 6.84c1.146 1.146.148 3.928-2.442 7.332-.743-.796-1.522-1.671-2.388-2.546a43.566 43.566 0 0 0-2.529-2.363c3.439-2.598 6.221-3.535 7.359-2.423ZM7.25 24.286c-1.12-1.146-.123-3.911 2.467-7.332a50.58 50.58 0 0 0 2.363 2.528c.866.867 1.75 1.654 2.528 2.363-3.438 2.616-6.22 3.552-7.358 2.441Zm17.447 0c-1.584 1.584-6.273-.875-11.375-6.037-.875-.92-1.75-1.812-2.476-2.687.735-.875 1.566-1.75 2.476-2.686.42-.42.875-.822 1.26-1.216l-1.207-1.278c-.438.403-.875.823-1.304 1.26-.875.875-1.645 1.75-2.362 2.53-2.582-3.422-3.58-6.187-2.46-7.333a1.75 1.75 0 0 1 1.34-.464c2.16 0 5.993 2.406 10.097 6.501.875.919 1.75 1.811 2.476 2.686-.735.875-1.566 1.75-2.476 2.687-.446.446-.875.875-1.339 1.277l1.19 1.286c.464-.428.928-.875 1.383-1.33a43.538 43.538 0 0 0 2.353-2.537c2.6 3.43 3.597 6.195 2.477 7.341h-.053ZM16 17.505a1.943 1.943 0 1 1 1.942-1.943A1.935 1.935 0 0 1 16 17.505Z"></path></svg>';
 
 class IconAtomLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconAtomLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--atomLarge', '', null, 'IconAtomLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--atomLarge', '', null, 'IconAtomLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--atomLarge');
         this.root.append(svg);
     }

package/dist/IconBackpack.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--backpack"><path d="M13.25 8V5.436a1.601 1.601 0 0 0-1.592-1.592h-.578l-.875-2.625H5.777l-.875 2.625h-.56A1.601 1.601 0 0 0 2.75 5.436V8a.875.875 0 0 0-.875.875v3.5a.875.875 0 0 0 .875.875.937.937 0 0 0 .271-.053 1.576 1.576 0 0 0 1.322.71h7.315a1.575 1.575 0 0 0 1.32-.71c.088.031.18.049.272.053a.875.875 0 0 0 .875-.875v-3.5A.875.875 0 0 0 13.25 8ZM6.723 2.531h2.554l.42 1.313H6.303l.42-1.313Zm5.25 9.783a.28.28 0 0 1-.28.28h-7.35a.28.28 0 0 1-.28-.28V5.436a.28.28 0 0 1 .28-.28h7.315a.28.28 0 0 1 .28.28l.034 6.878Z"></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--backpack"><path d="M13.25 8V5.436a1.601 1.601 0 0 0-1.592-1.592h-.578l-.875-2.625H5.777l-.875 2.625h-.56A1.601 1.601 0 0 0 2.75 5.436V8a.875.875 0 0 0-.875.875v3.5a.875.875 0 0 0 .875.875.937.937 0 0 0 .271-.053 1.576 1.576 0 0 0 1.322.71h7.315a1.575 1.575 0 0 0 1.32-.71c.088.031.18.049.272.053a.875.875 0 0 0 .875-.875v-3.5A.875.875 0 0 0 13.25 8ZM6.723 2.531h2.554l.42 1.313H6.303l.42-1.313Zm5.25 9.783a.28.28 0 0 1-.28.28h-7.35a.28.28 0 0 1-.28-.28V5.436a.28.28 0 0 1 .28-.28h7.315a.28.28 0 0 1 .28.28l.034 6.878Z"></path></svg>';
 
 class IconBackpack extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconBackpack extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--backpack', '', null, 'IconBackpack');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--backpack', '', null, 'IconBackpack');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--backpack');
         this.root.append(svg);
     }

package/dist/IconBackpackLarge.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--backpackLarge"><path d="M23.875 7.25h-3.106l-1.374-3.5h-6.79l-1.374 3.5H8.125A2.625 2.625 0 0 0 5.5 9.875v15.75a2.625 2.625 0 0 0 2.625 2.625h15.75a2.625 2.625 0 0 0 2.625-2.625V9.875a2.625 2.625 0 0 0-2.625-2.625ZM13.795 5.5h4.375l.682 1.75h-5.74l.683-1.75ZM24.75 25.625a.875.875 0 0 1-.875.875H8.125a.875.875 0 0 1-.875-.875V9.875A.875.875 0 0 1 8.125 9h15.75a.875.875 0 0 1 .875.875v15.75ZM9.875 10.75h12.25v1.75H12.5c.153.873.111 1.77-.123 2.625a1.27 1.27 0 0 1-2.415-.787 5.33 5.33 0 0 1 1.094-1.838H9.875v-1.75Zm9.363 7a31.01 31.01 0 0 0-.158-1.348.875.875 0 0 0-.744-.743h-.218a.875.875 0 0 0-.7.21l-.105.114a4.55 4.55 0 0 0-.744-.64 1.085 1.085 0 0 0-1.138 0 11.18 11.18 0 0 0-3.5 3.614.874.874 0 0 0 0 .805.875.875 0 0 0 .63.49h.166c.08 1.418.158 2.416.237 2.905a.876.876 0 0 0 .875.735h4.375a.875.875 0 0 0 .875-.726c.079-.498.157-1.505.236-2.913h.158a.874.874 0 0 0 .586-1.313 10.2 10.2 0 0 0-.831-1.19Zm-1.672 2.144v.114a75.165 75.165 0 0 1-.14 2.126h-2.843a51.947 51.947 0 0 1-.14-2.127v-.13a1.417 1.417 0 0 0-.43-.876 9.619 9.619 0 0 1 1.943-1.925c.201.193.464.473.7.744l.683.796a.875.875 0 0 0 .604.306l.052.07c-.238.238-.39.55-.429.884v.018Z"></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--backpackLarge"><path d="M23.875 7.25h-3.106l-1.374-3.5h-6.79l-1.374 3.5H8.125A2.625 2.625 0 0 0 5.5 9.875v15.75a2.625 2.625 0 0 0 2.625 2.625h15.75a2.625 2.625 0 0 0 2.625-2.625V9.875a2.625 2.625 0 0 0-2.625-2.625ZM13.795 5.5h4.375l.682 1.75h-5.74l.683-1.75ZM24.75 25.625a.875.875 0 0 1-.875.875H8.125a.875.875 0 0 1-.875-.875V9.875A.875.875 0 0 1 8.125 9h15.75a.875.875 0 0 1 .875.875v15.75ZM9.875 10.75h12.25v1.75H12.5c.153.873.111 1.77-.123 2.625a1.27 1.27 0 0 1-2.415-.787 5.33 5.33 0 0 1 1.094-1.838H9.875v-1.75Zm9.363 7a31.01 31.01 0 0 0-.158-1.348.875.875 0 0 0-.744-.743h-.218a.875.875 0 0 0-.7.21l-.105.114a4.55 4.55 0 0 0-.744-.64 1.085 1.085 0 0 0-1.138 0 11.18 11.18 0 0 0-3.5 3.614.874.874 0 0 0 0 .805.875.875 0 0 0 .63.49h.166c.08 1.418.158 2.416.237 2.905a.876.876 0 0 0 .875.735h4.375a.875.875 0 0 0 .875-.726c.079-.498.157-1.505.236-2.913h.158a.874.874 0 0 0 .586-1.313 10.2 10.2 0 0 0-.831-1.19Zm-1.672 2.144v.114a75.165 75.165 0 0 1-.14 2.126h-2.843a51.947 51.947 0 0 1-.14-2.127v-.13a1.417 1.417 0 0 0-.43-.876 9.619 9.619 0 0 1 1.943-1.925c.201.193.464.473.7.744l.683.796a.875.875 0 0 0 .604.306l.052.07c-.238.238-.39.55-.429.884v.018Z"></path></svg>';
 
 class IconBackpackLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconBackpackLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--backpackLarge', '', null, 'IconBackpackLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--backpackLarge', '', null, 'IconBackpackLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--backpackLarge');
         this.root.append(svg);
     }

package/dist/IconBag.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--bag"><path d="M12.996 4.719h-2.371V2.53L9.313 1.22H6.688L5.375 2.53V4.72H3.004l-.429 8.452a1.523 1.523 0 0 0 1.531 1.61h7.788a1.522 1.522 0 0 0 1.531-1.61l-.429-8.452ZM6.688 2.53h2.625V4.72H6.688V2.53ZM12.05 13.4a.219.219 0 0 1-.157.07H4.106a.228.228 0 0 1-.218-.219l.358-7.21h7.508l.359 7.21a.22.22 0 0 1-.062.149Z"></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--bag"><path d="M12.996 4.719h-2.371V2.53L9.313 1.22H6.688L5.375 2.53V4.72H3.004l-.429 8.452a1.523 1.523 0 0 0 1.531 1.61h7.788a1.522 1.522 0 0 0 1.531-1.61l-.429-8.452ZM6.688 2.53h2.625V4.72H6.688V2.53ZM12.05 13.4a.219.219 0 0 1-.157.07H4.106a.228.228 0 0 1-.218-.219l.358-7.21h7.508l.359 7.21a.22.22 0 0 1-.062.149Z"></path></svg>';
 
 class IconBag extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconBag extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bag', '', null, 'IconBag');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bag', '', null, 'IconBag');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--bag');
         this.root.append(svg);
     }

package/dist/IconBagFilled.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--bagFilled"><path d="M12.996 4.719h-2.371V2.53L9.313 1.22H6.688L5.375 2.53V4.72H3.004l-.429 8.452a1.523 1.523 0 0 0 1.531 1.61h7.788a1.522 1.522 0 0 0 1.531-1.61l-.429-8.452ZM6.688 2.53h2.625V4.72H6.688V2.53Z"></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--bagFilled"><path d="M12.996 4.719h-2.371V2.53L9.313 1.22H6.688L5.375 2.53V4.72H3.004l-.429 8.452a1.523 1.523 0 0 0 1.531 1.61h7.788a1.522 1.522 0 0 0 1.531-1.61l-.429-8.452ZM6.688 2.53h2.625V4.72H6.688V2.53Z"></path></svg>';
 
 class IconBagFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconBagFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bagFilled', '', null, 'IconBagFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bagFilled', '', null, 'IconBagFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--bagFilled');
         this.root.append(svg);
     }

package/dist/IconBagFilledLarge.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--bagFilledLarge"><path d="M25.625 8.125h-5.25v-3.5l-1.75-1.75h-5.25l-1.75 1.75v3.5h-5.25l-.788 18.253a2.625 2.625 0 0 0 1.584 2.535c.326.14.678.212 1.033.212h15.592a2.626 2.626 0 0 0 1.899-.814 2.624 2.624 0 0 0 .718-1.933l-.788-18.253Zm-7 7.875v-3.5h1.75V16l-1.75 1.75h-5.25L11.625 16v-3.5h1.75V16h5.25Zm-5.25-11.375h5.25v3.5h-5.25v-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--bagFilledLarge"><path d="M25.625 8.125h-5.25v-3.5l-1.75-1.75h-5.25l-1.75 1.75v3.5h-5.25l-.788 18.253a2.625 2.625 0 0 0 1.584 2.535c.326.14.678.212 1.033.212h15.592a2.626 2.626 0 0 0 1.899-.814 2.624 2.624 0 0 0 .718-1.933l-.788-18.253Zm-7 7.875v-3.5h1.75V16l-1.75 1.75h-5.25L11.625 16v-3.5h1.75V16h5.25Zm-5.25-11.375h5.25v3.5h-5.25v-3.5Z"></path></svg>';
 
 class IconBagFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconBagFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bagFilledLarge', '', null, 'IconBagFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bagFilledLarge', '', null, 'IconBagFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--bagFilledLarge');
         this.root.append(svg);
     }

package/dist/IconBagLarge.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--bagLarge"><path d="M13.375 17.75h5.25l1.75-1.75v-3.5h-1.75V16h-5.25v-3.5h-1.75V16l1.75 1.75Z"></path><path d="M25.625 8.125h-5.25v-3.5l-1.75-1.75h-5.25l-1.75 1.75v3.5h-5.25l-.788 18.253a2.625 2.625 0 0 0 1.584 2.535c.326.14.678.212 1.033.212h15.592a2.626 2.626 0 0 0 1.899-.814 2.624 2.624 0 0 0 .718-1.933l-.788-18.253Zm-12.25-3.5h5.25v3.5h-5.25v-3.5Zm11.051 22.479a.873.873 0 0 1-.63.271H8.204a.876.876 0 0 1-.875-.875l.796-16.625h15.75l.761 16.625a.874.874 0 0 1-.21.604Z"></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--bagLarge"><path d="M13.375 17.75h5.25l1.75-1.75v-3.5h-1.75V16h-5.25v-3.5h-1.75V16l1.75 1.75Z"></path><path d="M25.625 8.125h-5.25v-3.5l-1.75-1.75h-5.25l-1.75 1.75v3.5h-5.25l-.788 18.253a2.625 2.625 0 0 0 1.584 2.535c.326.14.678.212 1.033.212h15.592a2.626 2.626 0 0 0 1.899-.814 2.624 2.624 0 0 0 .718-1.933l-.788-18.253Zm-12.25-3.5h5.25v3.5h-5.25v-3.5Zm11.051 22.479a.873.873 0 0 1-.63.271H8.204a.876.876 0 0 1-.875-.875l.796-16.625h15.75l.761 16.625a.874.874 0 0 1-.21.604Z"></path></svg>';
 
 class IconBagLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconBagLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bagLarge', '', null, 'IconBagLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bagLarge', '', null, 'IconBagLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--bagLarge');
         this.root.append(svg);
     }

package/dist/IconBallotBox.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--ballotBox"><path d="M3.625 6.469V7.78h8.75V6.47h-1.094V3.625a2.406 2.406 0 0 0-2.406-2.406H4.719v5.25H3.625ZM6.031 2.53h2.844a1.094 1.094 0 0 1 1.094 1.094v2.844H6.03V2.53Zm8.75 1.313v8.312H1.22V3.844h2.406v1.312H2.531v5.688H13.47V5.156h-1.094V3.844h2.406Z"></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--ballotBox"><path d="M3.625 6.469V7.78h8.75V6.47h-1.094V3.625a2.406 2.406 0 0 0-2.406-2.406H4.719v5.25H3.625ZM6.031 2.53h2.844a1.094 1.094 0 0 1 1.094 1.094v2.844H6.03V2.53Zm8.75 1.313v8.312H1.22V3.844h2.406v1.312H2.531v5.688H13.47V5.156h-1.094V3.844h2.406Z"></path></svg>';
 
 class IconBallotBox extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconBallotBox extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--ballotBox', '', null, 'IconBallotBox');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--ballotBox', '', null, 'IconBallotBox');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--ballotBox');
         this.root.append(svg);
     }

package/dist/IconBallotBoxLarge.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--ballotBoxLarge"><path d="m17.855 7.53 1.286 1.19L16 12.115a1.189 1.189 0 0 1-1.35.286 1.217 1.217 0 0 1-.4-.277l-1.26-1.374 1.304-1.164.831.893 2.73-2.949Zm-7.98 6.72V3.75h7.875a4.375 4.375 0 0 1 4.375 4.375v6.125h1.75V16H8.125v-1.75h1.75Zm1.75 0h8.75V8.125A2.625 2.625 0 0 0 17.75 5.5h-6.125v8.75ZM28.25 9v18.375H3.75V9h4.375v1.75H5.5v8.75h21v-8.75h-2.625V9h4.375ZM26.5 25.625V21.25h-21v4.375h21Z"></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--ballotBoxLarge"><path d="m17.855 7.53 1.286 1.19L16 12.115a1.189 1.189 0 0 1-1.35.286 1.217 1.217 0 0 1-.4-.277l-1.26-1.374 1.304-1.164.831.893 2.73-2.949Zm-7.98 6.72V3.75h7.875a4.375 4.375 0 0 1 4.375 4.375v6.125h1.75V16H8.125v-1.75h1.75Zm1.75 0h8.75V8.125A2.625 2.625 0 0 0 17.75 5.5h-6.125v8.75ZM28.25 9v18.375H3.75V9h4.375v1.75H5.5v8.75h21v-8.75h-2.625V9h4.375ZM26.5 25.625V21.25h-21v4.375h21Z"></path></svg>';
 
 class IconBallotBoxLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconBallotBoxLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--ballotBoxLarge', '', null, 'IconBallotBoxLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--ballotBoxLarge', '', null, 'IconBallotBoxLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--ballotBoxLarge');
         this.root.append(svg);
     }

package/dist/IconBarcode.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--barcode"><path d="M3.188 12.375H1.875V2.75h1.313v9.625Zm10.5-9.625h-1.313v9.625h1.313V2.75Zm-2.626 0H9.75v7.875h1.313V2.75Zm-2.624 0H7.125v7.875h1.313V2.75Zm-2.626 0H4.5v7.875h1.313V2.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--barcode"><path d="M3.188 12.375H1.875V2.75h1.313v9.625Zm10.5-9.625h-1.313v9.625h1.313V2.75Zm-2.626 0H9.75v7.875h1.313V2.75Zm-2.624 0H7.125v7.875h1.313V2.75Zm-2.626 0H4.5v7.875h1.313V2.75Z"></path></svg>';
 
 class IconBarcode extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconBarcode extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--barcode', '', null, 'IconBarcode');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--barcode', '', null, 'IconBarcode');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--barcode');
         this.root.append(svg);
     }

package/dist/IconBarcodeLarge.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--barcodeLarge"><path d="M8.125 8.125v15.75h-1.75V8.125h1.75Zm15.75 0v15.75h1.75V8.125h-1.75ZM19.5 21.25h1.75V8.125H19.5V21.25Zm-4.375 0h1.75V8.125h-1.75V21.25Zm-4.375 0h1.75V8.125h-1.75V21.25Zm17.5-16.625H23v1.75h4.375v4.375h1.75V5.5a.875.875 0 0 0-.875-.875ZM2.875 5.5v5.25h1.75V6.375H9v-1.75H3.75a.875.875 0 0 0-.875.875Zm1.75 15.75h-1.75v5.25a.875.875 0 0 0 .875.875H9v-1.75H4.625V21.25Zm22.75 4.375H23v1.75h5.25a.875.875 0 0 0 .875-.875v-5.25h-1.75v4.375Z"></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--barcodeLarge"><path d="M8.125 8.125v15.75h-1.75V8.125h1.75Zm15.75 0v15.75h1.75V8.125h-1.75ZM19.5 21.25h1.75V8.125H19.5V21.25Zm-4.375 0h1.75V8.125h-1.75V21.25Zm-4.375 0h1.75V8.125h-1.75V21.25Zm17.5-16.625H23v1.75h4.375v4.375h1.75V5.5a.875.875 0 0 0-.875-.875ZM2.875 5.5v5.25h1.75V6.375H9v-1.75H3.75a.875.875 0 0 0-.875.875Zm1.75 15.75h-1.75v5.25a.875.875 0 0 0 .875.875H9v-1.75H4.625V21.25Zm22.75 4.375H23v1.75h5.25a.875.875 0 0 0 .875-.875v-5.25h-1.75v4.375Z"></path></svg>';
 
 class IconBarcodeLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconBarcodeLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--barcodeLarge', '', null, 'IconBarcodeLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--barcodeLarge', '', null, 'IconBarcodeLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--barcodeLarge');
         this.root.append(svg);
     }

package/dist/IconBasket.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--basket"><path d="M6.031 11.5 5.594 8h1.312l.438 3.5H6.03ZM9.094 8l-.438 3.5H9.97l.437-3.5H9.094ZM15 5.594v1.312h-.752l-.945 5.714a1.522 1.522 0 0 1-1.506 1.286H4.202a1.522 1.522 0 0 1-1.505-1.286l-.945-5.714H1V5.594h3.876L5.918 2.75h1.39L6.25 5.594h3.5L8.691 2.75h1.391l1.042 2.844H15Zm-2.082 1.312H3.082l.874 5.504a.219.219 0 0 0 .21.184h7.595a.219.219 0 0 0 .21-.184l.946-5.504Z"></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--basket"><path d="M6.031 11.5 5.594 8h1.312l.438 3.5H6.03ZM9.094 8l-.438 3.5H9.97l.437-3.5H9.094ZM15 5.594v1.312h-.752l-.945 5.714a1.522 1.522 0 0 1-1.506 1.286H4.202a1.522 1.522 0 0 1-1.505-1.286l-.945-5.714H1V5.594h3.876L5.918 2.75h1.39L6.25 5.594h3.5L8.691 2.75h1.391l1.042 2.844H15Zm-2.082 1.312H3.082l.874 5.504a.219.219 0 0 0 .21.184h7.595a.219.219 0 0 0 .21-.184l.946-5.504Z"></path></svg>';
 
 class IconBasket extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconBasket extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--basket', '', null, 'IconBasket');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--basket', '', null, 'IconBasket');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--basket');
         this.root.append(svg);
     }

package/dist/IconBasketLarge.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--basketLarge"><path d="M16.875 15.125h-1.75v7h1.75v-7Z"></path><path d="m12.518 22.125-.858-7H9.875l.875 7h1.768Z"></path><path d="m21.88 9.875-1.75-5.25h-1.846l1.75 5.25h-8.068l1.75-5.25H11.87l-1.75 5.25H2v1.75h1.873L5.84 25.126a2.625 2.625 0 0 0 2.625 2.249H23.56a2.625 2.625 0 0 0 2.625-2.249l1.943-13.501H30v-1.75h-8.12Zm2.546 14.997a.875.875 0 0 1-.875.753H8.44a.875.875 0 0 1-.875-.753L5.64 11.625h20.72l-1.934 13.247Z"></path><path d="m20.358 15.125-.85 7h1.76l.857-7h-1.767Z"></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--basketLarge"><path d="M16.875 15.125h-1.75v7h1.75v-7Z"></path><path d="m12.518 22.125-.858-7H9.875l.875 7h1.768Z"></path><path d="m21.88 9.875-1.75-5.25h-1.846l1.75 5.25h-8.068l1.75-5.25H11.87l-1.75 5.25H2v1.75h1.873L5.84 25.126a2.625 2.625 0 0 0 2.625 2.249H23.56a2.625 2.625 0 0 0 2.625-2.249l1.943-13.501H30v-1.75h-8.12Zm2.546 14.997a.875.875 0 0 1-.875.753H8.44a.875.875 0 0 1-.875-.753L5.64 11.625h20.72l-1.934 13.247Z"></path><path d="m20.358 15.125-.85 7h1.76l.857-7h-1.767Z"></path></svg>';
 
 class IconBasketLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconBasketLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--basketLarge', '', null, 'IconBasketLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--basketLarge', '', null, 'IconBasketLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--basketLarge');
         this.root.append(svg);
     }

package/dist/IconBattery.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--battery"><path d="M14.781 6.25h-.875v-.875a1.54 1.54 0 0 0-1.531-1.531H2.75a1.54 1.54 0 0 0-1.531 1.531v5.25a1.54 1.54 0 0 0 1.531 1.531h9.625a1.54 1.54 0 0 0 1.531-1.531V9.75h.875v-3.5Zm-2.187 4.375a.219.219 0 0 1-.219.219H2.75a.219.219 0 0 1-.219-.219v-5.25a.219.219 0 0 1 .219-.219h9.625a.219.219 0 0 1 .219.219v5.25ZM3.844 6.25h1.312v3.5H3.844v-3.5Zm2.625 0H7.78v3.5H6.47v-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 16 16" class="c-pieIcon c-pieIcon--battery"><path d="M14.781 6.25h-.875v-.875a1.54 1.54 0 0 0-1.531-1.531H2.75a1.54 1.54 0 0 0-1.531 1.531v5.25a1.54 1.54 0 0 0 1.531 1.531h9.625a1.54 1.54 0 0 0 1.531-1.531V9.75h.875v-3.5Zm-2.187 4.375a.219.219 0 0 1-.219.219H2.75a.219.219 0 0 1-.219-.219v-5.25a.219.219 0 0 1 .219-.219h9.625a.219.219 0 0 1 .219.219v5.25ZM3.844 6.25h1.312v3.5H3.844v-3.5Zm2.625 0H7.78v3.5H6.47v-3.5Z"></path></svg>';
 
 class IconBattery extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconBattery extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--battery', '', null, 'IconBattery');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--battery', '', null, 'IconBattery');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--battery');
         this.root.append(svg);
     }

package/dist/IconBatteryLarge.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--batteryLarge"><path d="M27.375 12.5V9.875A2.625 2.625 0 0 0 24.75 7.25H5.5a2.625 2.625 0 0 0-2.625 2.625v12.25A2.625 2.625 0 0 0 5.5 24.75h19.25a2.625 2.625 0 0 0 2.625-2.625V19.5h1.75v-7h-1.75Zm-1.75 9.625a.875.875 0 0 1-.875.875H5.5a.875.875 0 0 1-.875-.875V9.875A.875.875 0 0 1 5.5 9h19.25a.875.875 0 0 1 .875.875v12.25ZM8.125 12.5h1.75v7h-1.75v-7Zm4.375 0h1.75v7H12.5v-7Zm4.375 0h1.75v7h-1.75v-7Z"></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--batteryLarge"><path d="M27.375 12.5V9.875A2.625 2.625 0 0 0 24.75 7.25H5.5a2.625 2.625 0 0 0-2.625 2.625v12.25A2.625 2.625 0 0 0 5.5 24.75h19.25a2.625 2.625 0 0 0 2.625-2.625V19.5h1.75v-7h-1.75Zm-1.75 9.625a.875.875 0 0 1-.875.875H5.5a.875.875 0 0 1-.875-.875V9.875A.875.875 0 0 1 5.5 9h19.25a.875.875 0 0 1 .875.875v12.25ZM8.125 12.5h1.75v7h-1.75v-7Zm4.375 0h1.75v7H12.5v-7Zm4.375 0h1.75v7h-1.75v-7Z"></path></svg>';
 
 class IconBatteryLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconBatteryLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--batteryLarge', '', null, 'IconBatteryLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--batteryLarge', '', null, 'IconBatteryLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--batteryLarge');
         this.root.append(svg);
     }

package/dist/IconBike.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--bike"><path d="M12.139 7.405 11 4.159a.218.218 0 0 1 0-.158.246.246 0 0 1 .158-.122l1.216-.447v-1.4l-1.627.613a1.514 1.514 0 0 0-.998 1.934l.359 1.015H9.75a2.433 2.433 0 0 0-1.925.962l-1.207 1.61-1.06-2.135h.692V4.72h-3.5V6.03h1.339l.726 1.461a2.87 2.87 0 0 0-.735-.105 2.826 2.826 0 1 0 2.826 2.818v-.201l1.969-2.66a1.111 1.111 0 0 1 .875-.438h.831l.254.718a2.844 2.844 0 1 0 1.313-.219h-.01ZM4.08 11.719a1.514 1.514 0 1 1 1.514-1.514 1.505 1.505 0 0 1-1.514 1.514Zm7.875 0a1.514 1.514 0 1 1 1.4-.933 1.505 1.505 0 0 1-1.4.933Z"></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--bike"><path d="M12.139 7.405 11 4.159a.218.218 0 0 1 0-.158.246.246 0 0 1 .158-.122l1.216-.447v-1.4l-1.627.613a1.514 1.514 0 0 0-.998 1.934l.359 1.015H9.75a2.433 2.433 0 0 0-1.925.962l-1.207 1.61-1.06-2.135h.692V4.72h-3.5V6.03h1.339l.726 1.461a2.87 2.87 0 0 0-.735-.105 2.826 2.826 0 1 0 2.826 2.818v-.201l1.969-2.66a1.111 1.111 0 0 1 .875-.438h.831l.254.718a2.844 2.844 0 1 0 1.313-.219h-.01ZM4.08 11.719a1.514 1.514 0 1 1 1.514-1.514 1.505 1.505 0 0 1-1.514 1.514Zm7.875 0a1.514 1.514 0 1 1 1.4-.933 1.505 1.505 0 0 1-1.4.933Z"></path></svg>';
 
 class IconBike extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconBike extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bike', '', null, 'IconBike');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bike', '', null, 'IconBike');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--bike');
         this.root.append(svg);
     }

package/dist/IconBikeFilled.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--bikeFilled"><path d="M12.138 7.405 11.01 4.159c0-.114 0-.228.167-.28l1.198-.447v-1.4l-1.627.613a1.523 1.523 0 0 0-.998 1.934l.36 1.015h-.36a2.433 2.433 0 0 0-1.925.962l-1.207 1.61-1.059-2.135h.691V4.72h-3.5V6.03h1.348l.717 1.461a2.87 2.87 0 0 0-.735-.105 2.826 2.826 0 1 0 2.827 2.818v-.201l1.968-2.66a1.111 1.111 0 0 1 .875-.438h.832l.253.718a2.844 2.844 0 1 0 1.313-.219h-.009Z"></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--bikeFilled"><path d="M12.138 7.405 11.01 4.159c0-.114 0-.228.167-.28l1.198-.447v-1.4l-1.627.613a1.523 1.523 0 0 0-.998 1.934l.36 1.015h-.36a2.433 2.433 0 0 0-1.925.962l-1.207 1.61-1.059-2.135h.691V4.72h-3.5V6.03h1.348l.717 1.461a2.87 2.87 0 0 0-.735-.105 2.826 2.826 0 1 0 2.827 2.818v-.201l1.968-2.66a1.111 1.111 0 0 1 .875-.438h.832l.253.718a2.844 2.844 0 1 0 1.313-.219h-.009Z"></path></svg>';
 
 class IconBikeFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconBikeFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bikeFilled', '', null, 'IconBikeFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bikeFilled', '', null, 'IconBikeFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--bikeFilled');
         this.root.append(svg);
     }

package/dist/IconBikeFilledLarge.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--bikeFilledLarge"><g clip-path="url(#prefix__clip0_1380_970)"><path d="M21.661 8.125a.875.875 0 0 1 .534-1.068l.875-.306v-1.89l-1.444.534a2.625 2.625 0 0 0-1.61 3.185l.359 1.295h-.201a3.5 3.5 0 0 0-3.002 1.697L14.47 16l-1.566-5.25h1.347V9H8.449L9 10.75h2.039l1.54 5.162a5.687 5.687 0 1 0 1.671 4.025 4.77 4.77 0 0 0 0-.498c-.49.449-1.097.752-1.75.875-.188.03-.378.048-.569.052L9 20.323l-.586-1.75h3.5c.112-.006.223-.02.332-.044a1.75 1.75 0 0 0 .971-.56 1.7 1.7 0 0 0 .193-.245l.236-.385c.182.366.325.75.429 1.146.086.312.145.631.175.954a3.29 3.29 0 0 0 .674-.797l3.701-6.142a1.75 1.75 0 0 1 1.505-.875h.709l.927 3.246a5.68 5.68 0 0 1 1.672-.542L21.66 8.125Z"></path><path d="M24.347 14.25a5.94 5.94 0 0 0-.875.079l.49 1.75c.088.288 1.252 4.331 1.252 4.331h-1.838l-1.094-3.78-.498-1.75a5.67 5.67 0 1 0 2.563-.63Z"></path><path d="M7.285 10.75 6.699 9h-4.41l.586 1.75h4.41Z"></path><path d="M5.229 13.375h2.93l-.585-1.75h-2.94l.595 1.75Z"></path></g><defs><clipPath id="prefix__clip0_1380_970"><rect width="28" height="28" transform="translate(2 2)"></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 32 32" class="c-pieIcon c-pieIcon--bikeFilledLarge"><g clip-path="url(#prefix__clip0_1380_970)"><path d="M21.661 8.125a.875.875 0 0 1 .534-1.068l.875-.306v-1.89l-1.444.534a2.625 2.625 0 0 0-1.61 3.185l.359 1.295h-.201a3.5 3.5 0 0 0-3.002 1.697L14.47 16l-1.566-5.25h1.347V9H8.449L9 10.75h2.039l1.54 5.162a5.687 5.687 0 1 0 1.671 4.025 4.77 4.77 0 0 0 0-.498c-.49.449-1.097.752-1.75.875-.188.03-.378.048-.569.052L9 20.323l-.586-1.75h3.5c.112-.006.223-.02.332-.044a1.75 1.75 0 0 0 .971-.56 1.7 1.7 0 0 0 .193-.245l.236-.385c.182.366.325.75.429 1.146.086.312.145.631.175.954a3.29 3.29 0 0 0 .674-.797l3.701-6.142a1.75 1.75 0 0 1 1.505-.875h.709l.927 3.246a5.68 5.68 0 0 1 1.672-.542L21.66 8.125Z"></path><path d="M24.347 14.25a5.94 5.94 0 0 0-.875.079l.49 1.75c.088.288 1.252 4.331 1.252 4.331h-1.838l-1.094-3.78-.498-1.75a5.67 5.67 0 1 0 2.563-.63Z"></path><path d="M7.285 10.75 6.699 9h-4.41l.586 1.75h4.41Z"></path><path d="M5.229 13.375h2.93l-.585-1.75h-2.94l.595 1.75Z"></path></g><defs><clipPath id="prefix__clip0_1380_970"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
 
 class IconBikeFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconBikeFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bikeFilledLarge', '', null, 'IconBikeFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bikeFilledLarge', '', null, 'IconBikeFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--bikeFilledLarge');
         this.root.append(svg);
     }