@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/dist/IconVoucher.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--voucher"><path d="M10.214 8A3.938 3.938 0 0 0 8 10.214 3.938 3.938 0 0 0 5.786 8 3.937 3.937 0 0 0 8 5.786 3.937 3.937 0 0 0 10.214 8Zm4.567-3.421v6.842l-1.61 1.61H2.83l-1.61-1.61V4.58l1.61-1.61H13.17l1.61 1.61Zm-1.312.551-.875-.875H3.38l-.875.875v5.74l.875.875h9.24l.875-.875-.026-5.74Z"></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--voucher"><path d="M10.214 8A3.938 3.938 0 0 0 8 10.214 3.938 3.938 0 0 0 5.786 8 3.937 3.937 0 0 0 8 5.786 3.937 3.937 0 0 0 10.214 8Zm4.567-3.421v6.842l-1.61 1.61H2.83l-1.61-1.61V4.58l1.61-1.61H13.17l1.61 1.61Zm-1.312.551-.875-.875H3.38l-.875.875v5.74l.875.875h9.24l.875-.875-.026-5.74Z"></path></svg>';
 
 class IconVoucher extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconVoucher extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--voucher', '', null, 'IconVoucher');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--voucher', '', null, 'IconVoucher');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--voucher');
         this.root.append(svg);
     }

package/dist/IconVoucherFilled.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--voucherFilled"><path fill-rule="evenodd" d="M14.781 4.579v6.842l-1.61 1.61H2.83l-1.61-1.61V4.58l1.61-1.61H13.17l1.61 1.61ZM10.214 8A3.938 3.938 0 0 0 8 10.214 3.937 3.937 0 0 0 5.786 8 3.938 3.938 0 0 0 8 5.786 3.938 3.938 0 0 0 10.214 8Z" 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--voucherFilled"><path fill-rule="evenodd" d="M14.781 4.579v6.842l-1.61 1.61H2.83l-1.61-1.61V4.58l1.61-1.61H13.17l1.61 1.61ZM10.214 8A3.938 3.938 0 0 0 8 10.214 3.937 3.937 0 0 0 5.786 8 3.938 3.938 0 0 0 8 5.786 3.938 3.938 0 0 0 10.214 8Z" clip-rule="evenodd"></path></svg>';
 
 class IconVoucherFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconVoucherFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--voucherFilled', '', null, 'IconVoucherFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--voucherFilled', '', null, 'IconVoucherFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--voucherFilled');
         this.root.append(svg);
     }

package/dist/IconVoucherFilledLarge.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--voucherFilledLarge"><path fill-rule="evenodd" d="M5.641 5.5h20.843l3.141 3.141V23.36L26.484 26.5H5.64L2.5 23.359V8.64L5.641 5.5ZM22.75 9.875h1.75v-3.5h-1.75v3.5Zm-6.396 3.77a6.922 6.922 0 0 0 2.345 1.541.875.875 0 0 1 0 1.628 6.919 6.919 0 0 0-3.885 3.885.875.875 0 0 1-1.628 0 6.92 6.92 0 0 0-3.885-3.885.875.875 0 0 1 0-1.628 6.922 6.922 0 0 0 3.885-3.885.875.875 0 0 1 1.628 0 6.922 6.922 0 0 0 1.54 2.345Zm6.396 8.48h1.75v3.5h-1.75v-3.5Zm1.75-5.25h-1.75v3.5h1.75v-3.5Zm-1.75-5.25h1.75v3.5h-1.75v-3.5Z" clip-rule="evenodd"></path><path d="M11.515 16A8.62 8.62 0 0 1 14 18.485 8.62 8.62 0 0 1 16.485 16 8.62 8.62 0 0 1 14 13.515 8.62 8.62 0 0 1 11.515 16Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--voucherFilledLarge"><path fill-rule="evenodd" d="M5.641 5.5h20.843l3.141 3.141V23.36L26.484 26.5H5.64L2.5 23.359V8.64L5.641 5.5ZM22.75 9.875h1.75v-3.5h-1.75v3.5Zm-6.396 3.77a6.922 6.922 0 0 0 2.345 1.541.875.875 0 0 1 0 1.628 6.919 6.919 0 0 0-3.885 3.885.875.875 0 0 1-1.628 0 6.92 6.92 0 0 0-3.885-3.885.875.875 0 0 1 0-1.628 6.922 6.922 0 0 0 3.885-3.885.875.875 0 0 1 1.628 0 6.922 6.922 0 0 0 1.54 2.345Zm6.396 8.48h1.75v3.5h-1.75v-3.5Zm1.75-5.25h-1.75v3.5h1.75v-3.5Zm-1.75-5.25h1.75v3.5h-1.75v-3.5Z" clip-rule="evenodd"></path><path d="M11.515 16A8.62 8.62 0 0 1 14 18.485 8.62 8.62 0 0 1 16.485 16 8.62 8.62 0 0 1 14 13.515 8.62 8.62 0 0 1 11.515 16Z"></path></svg>';
 
 class IconVoucherFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconVoucherFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--voucherFilledLarge', '', null, 'IconVoucherFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--voucherFilledLarge', '', null, 'IconVoucherFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--voucherFilledLarge');
         this.root.append(svg);
     }

package/dist/IconVoucherLarge.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--voucherLarge"><path d="M17.199 15.186a6.921 6.921 0 0 1-3.885-3.885.875.875 0 0 0-1.628 0 6.921 6.921 0 0 1-3.885 3.885.875.875 0 0 0 0 1.628 6.921 6.921 0 0 1 3.885 3.885.875.875 0 0 0 1.628 0 6.921 6.921 0 0 1 3.885-3.885.875.875 0 0 0 0-1.628ZM12.5 18.485A8.62 8.62 0 0 0 10.015 16a8.62 8.62 0 0 0 2.485-2.485A8.62 8.62 0 0 0 14.985 16a8.62 8.62 0 0 0-2.485 2.485ZM25.984 5.5H5.14L2 8.641V23.36L5.141 26.5h20.843l3.141-3.141V8.64L25.984 5.5Zm1.391 17.141-2.109 2.109H23v-2.625h-1.75v2.625H5.859L3.75 22.641V9.36L5.859 7.25H21.25v2.625H23V7.25h2.266l2.109 2.109V22.64Zm-6.125-5.766H23v3.5h-1.75v-3.5Zm0-5.25H23v3.5h-1.75v-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--voucherLarge"><path d="M17.199 15.186a6.921 6.921 0 0 1-3.885-3.885.875.875 0 0 0-1.628 0 6.921 6.921 0 0 1-3.885 3.885.875.875 0 0 0 0 1.628 6.921 6.921 0 0 1 3.885 3.885.875.875 0 0 0 1.628 0 6.921 6.921 0 0 1 3.885-3.885.875.875 0 0 0 0-1.628ZM12.5 18.485A8.62 8.62 0 0 0 10.015 16a8.62 8.62 0 0 0 2.485-2.485A8.62 8.62 0 0 0 14.985 16a8.62 8.62 0 0 0-2.485 2.485ZM25.984 5.5H5.14L2 8.641V23.36L5.141 26.5h20.843l3.141-3.141V8.64L25.984 5.5Zm1.391 17.141-2.109 2.109H23v-2.625h-1.75v2.625H5.859L3.75 22.641V9.36L5.859 7.25H21.25v2.625H23V7.25h2.266l2.109 2.109V22.64Zm-6.125-5.766H23v3.5h-1.75v-3.5Zm0-5.25H23v3.5h-1.75v-3.5Z"></path></svg>';
 
 class IconVoucherLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconVoucherLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--voucherLarge', '', null, 'IconVoucherLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--voucherLarge', '', null, 'IconVoucherLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--voucherLarge');
         this.root.append(svg);
     }

package/dist/IconWalking.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--walking"><g clip-path="url(#prefix__clip0_751_191)"><path d="M12.646 7.125A4.086 4.086 0 0 1 9.89 4.937l-.14-.376h-.245a2.083 2.083 0 1 0-3.255.184A5.18 5.18 0 0 0 2.934 7.44L2.286 8.7l1.164.595L4.106 8a3.841 3.841 0 0 1 1.645-1.654v2.529a2.757 2.757 0 0 0 1.094 2.179 6.61 6.61 0 0 1-.787.42L3.23 12.777l.56 1.182 2.8-1.322a5.576 5.576 0 0 0 1.365-.875l1.138.77 1.146 2.687 1.207-.516-1.216-2.862a.666.666 0 0 0-.236-.28l-1.12-.717c.172-.25.315-.516.429-.796.133-.328.219-.673.253-1.024l.193-2.03a5.311 5.311 0 0 0 2.546 1.426l.639.184.35-1.269-.639-.21ZM7.79 2.61a.77.77 0 1 1 0 1.54.77.77 0 0 1 0-1.54Zm-.088 7.438a1.461 1.461 0 0 1-.638-1.173V5.909c.177-.013.356-.013.534 0h.97l-.306 2.966a2.625 2.625 0 0 1-.166.665c-.08.19-.18.372-.297.543l-.097-.036Z"></path></g><defs><clipPath id="prefix__clip0_751_191"><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--walking"><g clip-path="url(#prefix__clip0_751_191)"><path d="M12.646 7.125A4.086 4.086 0 0 1 9.89 4.937l-.14-.376h-.245a2.083 2.083 0 1 0-3.255.184A5.18 5.18 0 0 0 2.934 7.44L2.286 8.7l1.164.595L4.106 8a3.841 3.841 0 0 1 1.645-1.654v2.529a2.757 2.757 0 0 0 1.094 2.179 6.61 6.61 0 0 1-.787.42L3.23 12.777l.56 1.182 2.8-1.322a5.576 5.576 0 0 0 1.365-.875l1.138.77 1.146 2.687 1.207-.516-1.216-2.862a.666.666 0 0 0-.236-.28l-1.12-.717c.172-.25.315-.516.429-.796.133-.328.219-.673.253-1.024l.193-2.03a5.311 5.311 0 0 0 2.546 1.426l.639.184.35-1.269-.639-.21ZM7.79 2.61a.77.77 0 1 1 0 1.54.77.77 0 0 1 0-1.54Zm-.088 7.438a1.461 1.461 0 0 1-.638-1.173V5.909c.177-.013.356-.013.534 0h.97l-.306 2.966a2.625 2.625 0 0 1-.166.665c-.08.19-.18.372-.297.543l-.097-.036Z"></path></g><defs><clipPath id="prefix__clip0_751_191"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconWalking extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconWalking extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--walking', '', null, 'IconWalking');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--walking', '', null, 'IconWalking');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--walking');
         this.root.append(svg);
     }

package/dist/IconWalkingLarge.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--walkingLarge"><g clip-path="url(#prefix__clip0_751_188)"><path d="M16.219 9.061a3.404 3.404 0 1 0 0-6.808 3.404 3.404 0 0 0 0 6.808Zm0-5.057a1.654 1.654 0 1 1 0 3.308 1.654 1.654 0 0 1 0-3.308Z"></path><path d="M25.73 15.178a8.9 8.9 0 0 1-6.029-4.848l-.201-.455h-4.095a10.255 10.255 0 0 0-9.214 5.688l-.997 1.872 1.548.814 1.007-1.934a8.54 8.54 0 0 1 4.322-4.051v4.27a5.181 5.181 0 0 0 2.302 4.322l.253.175a9.69 9.69 0 0 1-2.205 1.295l-5.845 2.756.744 1.584 5.819-2.739a11.57 11.57 0 0 0 3.001-1.872l2.739 1.872 2.808 6.502 1.61-.691L20.375 23a.876.876 0 0 0-.306-.376l-2.713-1.846a7.455 7.455 0 0 0 1.628-3.903L19.5 13.2a10.648 10.648 0 0 0 5.828 3.675l.507.122.402-1.706-.507-.114Zm-10.378 4.226a3.43 3.43 0 0 1-1.53-2.87v-4.786a8.602 8.602 0 0 1 1.583-.123h2.511l-.674 5.093a5.785 5.785 0 0 1-1.33 3.114l-.56-.428Z"></path></g><defs><clipPath id="prefix__clip0_751_188"><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--walkingLarge"><g clip-path="url(#prefix__clip0_751_188)"><path d="M16.219 9.061a3.404 3.404 0 1 0 0-6.808 3.404 3.404 0 0 0 0 6.808Zm0-5.057a1.654 1.654 0 1 1 0 3.308 1.654 1.654 0 0 1 0-3.308Z"></path><path d="M25.73 15.178a8.9 8.9 0 0 1-6.029-4.848l-.201-.455h-4.095a10.255 10.255 0 0 0-9.214 5.688l-.997 1.872 1.548.814 1.007-1.934a8.54 8.54 0 0 1 4.322-4.051v4.27a5.181 5.181 0 0 0 2.302 4.322l.253.175a9.69 9.69 0 0 1-2.205 1.295l-5.845 2.756.744 1.584 5.819-2.739a11.57 11.57 0 0 0 3.001-1.872l2.739 1.872 2.808 6.502 1.61-.691L20.375 23a.876.876 0 0 0-.306-.376l-2.713-1.846a7.455 7.455 0 0 0 1.628-3.903L19.5 13.2a10.648 10.648 0 0 0 5.828 3.675l.507.122.402-1.706-.507-.114Zm-10.378 4.226a3.43 3.43 0 0 1-1.53-2.87v-4.786a8.602 8.602 0 0 1 1.583-.123h2.511l-.674 5.093a5.785 5.785 0 0 1-1.33 3.114l-.56-.428Z"></path></g><defs><clipPath id="prefix__clip0_751_188"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
 
 class IconWalkingLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconWalkingLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--walkingLarge', '', null, 'IconWalkingLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--walkingLarge', '', null, 'IconWalkingLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--walkingLarge');
         this.root.append(svg);
     }

package/dist/IconWallet.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--wallet"><g clip-path="url(#prefix__clip0_4814_3596)"><path fill-rule="evenodd" d="M8 2.75a.131.131 0 0 1 .079 0h.087a.201.201 0 0 1 .114.114l.096.227h1.418l-.298-.726a1.549 1.549 0 0 0-.875-.831 1.514 1.514 0 0 0-1.172 0l-3.693 1.54h3.43L8 2.75Zm4.857 8.584H12.2v1.584a.219.219 0 0 1-.218.218h-8.97a.219.219 0 0 1-.218-.218v-7a.219.219 0 0 1 .219-.22h8.969a.219.219 0 0 1 .218.22v1.478h1.313V5.918a1.531 1.531 0 0 0-1.531-1.532h-8.97a1.531 1.531 0 0 0-1.426.989c-.065.17-.1.351-.105.534v7a1.531 1.531 0 0 0 1.532 1.54h8.969a1.53 1.53 0 0 0 1.53-1.531v-1.584h-.655Zm.612-2.625h.901v1.312h-3.036V8.71H13.469Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_4814_3596"><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--wallet"><g clip-path="url(#prefix__clip0_4814_3596)"><path fill-rule="evenodd" d="M8 2.75a.131.131 0 0 1 .079 0h.087a.201.201 0 0 1 .114.114l.096.227h1.418l-.298-.726a1.549 1.549 0 0 0-.875-.831 1.514 1.514 0 0 0-1.172 0l-3.693 1.54h3.43L8 2.75Zm4.857 8.584H12.2v1.584a.219.219 0 0 1-.218.218h-8.97a.219.219 0 0 1-.218-.218v-7a.219.219 0 0 1 .219-.22h8.969a.219.219 0 0 1 .218.22v1.478h1.313V5.918a1.531 1.531 0 0 0-1.531-1.532h-8.97a1.531 1.531 0 0 0-1.426.989c-.065.17-.1.351-.105.534v7a1.531 1.531 0 0 0 1.532 1.54h8.969a1.53 1.53 0 0 0 1.53-1.531v-1.584h-.655Zm.612-2.625h.901v1.312h-3.036V8.71H13.469Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_4814_3596"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconWallet extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconWallet extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--wallet', '', null, 'IconWallet');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--wallet', '', null, 'IconWallet');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--wallet');
         this.root.append(svg);
     }

package/dist/IconWalletFilled.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--walletFilled"><path d="m9.75 3.065-.263-.735a1.531 1.531 0 0 0-1.995-.831L3.73 3.065h6.02Z"></path><path d="M10.397 11.325a.394.394 0 0 1-.394-.394v-3.15c.001-.075.025-.149.07-.21a.385.385 0 0 1 .298-.184h3.115V5.91a1.531 1.531 0 0 0-1.531-1.532h-8.97a1.549 1.549 0 0 0-.664.123 1.496 1.496 0 0 0-.761.875c-.071.169-.107.35-.105.534v7a1.54 1.54 0 0 0 1.53 1.531h8.97a1.54 1.54 0 0 0 1.53-1.531v-1.584h-3.088Z"></path><path d="M11.316 8.7v1.304h3.019V8.7h-3.02Z"></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--walletFilled"><path d="m9.75 3.065-.263-.735a1.531 1.531 0 0 0-1.995-.831L3.73 3.065h6.02Z"></path><path d="M10.397 11.325a.394.394 0 0 1-.394-.394v-3.15c.001-.075.025-.149.07-.21a.385.385 0 0 1 .298-.184h3.115V5.91a1.531 1.531 0 0 0-1.531-1.532h-8.97a1.549 1.549 0 0 0-.664.123 1.496 1.496 0 0 0-.761.875c-.071.169-.107.35-.105.534v7a1.54 1.54 0 0 0 1.53 1.531h8.97a1.54 1.54 0 0 0 1.53-1.531v-1.584h-3.088Z"></path><path d="M11.316 8.7v1.304h3.019V8.7h-3.02Z"></path></svg>';
 
 class IconWalletFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconWalletFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--walletFilled', '', null, 'IconWalletFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--walletFilled', '', null, 'IconWalletFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--walletFilled');
         this.root.append(svg);
     }

package/dist/IconWalletFilledLarge.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--walletFilledLarge"><path d="m21.04 7.005-.787-1.899a2.626 2.626 0 0 0-3.43-1.426L8.808 7.005H21.04Z"></path><path d="M25.625 23.446h-6.562a.718.718 0 0 1-.718-.717v-9.021a.718.718 0 0 1 .718-.71h7.525v-1.67a2.625 2.625 0 0 0-.254-1.112 2.625 2.625 0 0 0-2.459-1.627H5.5c-.558.003-1.1.184-1.549.516a3.176 3.176 0 0 0-.428.411l-.158.21-.07.088c-.086.126-.16.261-.219.402a2.625 2.625 0 0 0-.253 1.112v13.886A2.678 2.678 0 0 0 5.5 27.89h18.375a2.677 2.677 0 0 0 2.678-2.677v-1.75h-.928v-.018Z"></path><path d="M20.095 14.749v6.947h9.03V14.75h-9.03Z"></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--walletFilledLarge"><path d="m21.04 7.005-.787-1.899a2.626 2.626 0 0 0-3.43-1.426L8.808 7.005H21.04Z"></path><path d="M25.625 23.446h-6.562a.718.718 0 0 1-.718-.717v-9.021a.718.718 0 0 1 .718-.71h7.525v-1.67a2.625 2.625 0 0 0-.254-1.112 2.625 2.625 0 0 0-2.459-1.627H5.5c-.558.003-1.1.184-1.549.516a3.176 3.176 0 0 0-.428.411l-.158.21-.07.088c-.086.126-.16.261-.219.402a2.625 2.625 0 0 0-.253 1.112v13.886A2.678 2.678 0 0 0 5.5 27.89h18.375a2.677 2.677 0 0 0 2.678-2.677v-1.75h-.928v-.018Z"></path><path d="M20.095 14.749v6.947h9.03V14.75h-9.03Z"></path></svg>';
 
 class IconWalletFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconWalletFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--walletFilledLarge', '', null, 'IconWalletFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--walletFilledLarge', '', null, 'IconWalletFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--walletFilledLarge');
         this.root.append(svg);
     }

package/dist/IconWalletLarge.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--walletLarge"><path d="M17.496 5.299a.871.871 0 0 1 .332-.07.87.87 0 0 1 .333.07.837.837 0 0 1 .473.472l.507 1.234h1.89l-.787-1.899a2.619 2.619 0 0 0-3.43-1.417L8.807 7.005h4.576l4.113-1.706Z"></path><path d="M25.669 23.446h-.875v1.768a.878.878 0 0 1-.875.875H5.498a.878.878 0 0 1-.874-.875V11.223a.872.872 0 0 1 .499-.788c.017 0 .026-.018.035-.026a.88.88 0 0 1 .34-.07h18.42c.48 0 .875.393.875.875v1.785h1.802v-1.671a2.59 2.59 0 0 0-.254-1.112 2.617 2.617 0 0 0-2.423-1.618H5.498a2.61 2.61 0 0 0-1.574.533 2.56 2.56 0 0 0-.411.403c-.053.061-.105.131-.158.201-.017.026-.044.053-.061.079a2.156 2.156 0 0 0-.219.393 2.652 2.652 0 0 0-.254 1.112v13.886A2.677 2.677 0 0 0 5.5 27.883h18.419a2.677 2.677 0 0 0 2.677-2.678v-1.767h-.927v.008Z"></path><path d="M20.104 14.749v6.947h9.03V14.75h-9.03Zm1.75 1.75h5.53v3.447h-5.53V16.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--walletLarge"><path d="M17.496 5.299a.871.871 0 0 1 .332-.07.87.87 0 0 1 .333.07.837.837 0 0 1 .473.472l.507 1.234h1.89l-.787-1.899a2.619 2.619 0 0 0-3.43-1.417L8.807 7.005h4.576l4.113-1.706Z"></path><path d="M25.669 23.446h-.875v1.768a.878.878 0 0 1-.875.875H5.498a.878.878 0 0 1-.874-.875V11.223a.872.872 0 0 1 .499-.788c.017 0 .026-.018.035-.026a.88.88 0 0 1 .34-.07h18.42c.48 0 .875.393.875.875v1.785h1.802v-1.671a2.59 2.59 0 0 0-.254-1.112 2.617 2.617 0 0 0-2.423-1.618H5.498a2.61 2.61 0 0 0-1.574.533 2.56 2.56 0 0 0-.411.403c-.053.061-.105.131-.158.201-.017.026-.044.053-.061.079a2.156 2.156 0 0 0-.219.393 2.652 2.652 0 0 0-.254 1.112v13.886A2.677 2.677 0 0 0 5.5 27.883h18.419a2.677 2.677 0 0 0 2.677-2.678v-1.767h-.927v.008Z"></path><path d="M20.104 14.749v6.947h9.03V14.75h-9.03Zm1.75 1.75h5.53v3.447h-5.53V16.5Z"></path></svg>';
 
 class IconWalletLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconWalletLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--walletLarge', '', null, 'IconWalletLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--walletLarge', '', null, 'IconWalletLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--walletLarge');
         this.root.append(svg);
     }

package/dist/IconWifi.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--wifi"><g clip-path="url(#prefix__clip0_15_321)"><path d="M11.832 10.231A5.023 5.023 0 0 0 8 8.333a5.023 5.023 0 0 0-3.833 1.898l-1.006-.875A6.326 6.326 0 0 1 8 7.02a6.326 6.326 0 0 1 4.839 2.363l-1.007.848Z"></path><path d="M13.95 8.096A7.788 7.788 0 0 0 8 5.156a7.787 7.787 0 0 0-5.95 2.94l-1.006-.875a9.074 9.074 0 0 1 7-3.412 9.074 9.074 0 0 1 7 3.412l-1.094.875Z"></path><path d="M9.794 12.576a2.292 2.292 0 0 0-3.588 0L5.2 11.701A3.666 3.666 0 0 1 8 10.354a3.665 3.665 0 0 1 2.8 1.373l-1.006.85Z"></path></g><defs><clipPath id="prefix__clip0_15_321"><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--wifi"><g clip-path="url(#prefix__clip0_15_321)"><path d="M11.832 10.231A5.023 5.023 0 0 0 8 8.333a5.023 5.023 0 0 0-3.833 1.898l-1.006-.875A6.326 6.326 0 0 1 8 7.02a6.326 6.326 0 0 1 4.839 2.363l-1.007.848Z"></path><path d="M13.95 8.096A7.788 7.788 0 0 0 8 5.156a7.787 7.787 0 0 0-5.95 2.94l-1.006-.875a9.074 9.074 0 0 1 7-3.412 9.074 9.074 0 0 1 7 3.412l-1.094.875Z"></path><path d="M9.794 12.576a2.292 2.292 0 0 0-3.588 0L5.2 11.701A3.666 3.666 0 0 1 8 10.354a3.665 3.665 0 0 1 2.8 1.373l-1.006.85Z"></path></g><defs><clipPath id="prefix__clip0_15_321"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconWifi extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconWifi extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--wifi', '', null, 'IconWifi');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--wifi', '', null, 'IconWifi');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--wifi');
         this.root.append(svg);
     }

package/dist/IconWifiAlert.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--wifiAlert"><path d="M5.935 9.006a2.03 2.03 0 0 1 .166-.796 6.746 6.746 0 0 0-2.94 2.047l1.006.876A5.6 5.6 0 0 1 6.05 9.645a2.17 2.17 0 0 1-.114-.639Z"></path><path d="M9.899 8.21a1.925 1.925 0 0 1 .052 1.435 5.6 5.6 0 0 1 1.882 1.461l1.006-.875a6.746 6.746 0 0 0-2.94-2.021Z"></path><path d="M6.049 4.946a9.441 9.441 0 0 0-5.005 3.185l1.006.875A8.251 8.251 0 0 1 6.18 6.25l-.131-1.304Z"></path><path d="M9.951 4.946 9.82 6.25a8.251 8.251 0 0 1 4.13 2.721l1.006-.875a9.442 9.442 0 0 0-5.005-3.15Z"></path><path d="m5.2 12.602 1.006.875a2.293 2.293 0 0 1 3.588 0l1.006-.875A3.667 3.667 0 0 0 8 11.23a3.666 3.666 0 0 0-2.8 1.373Z"></path><path d="m8.402 7.256.43-4.375A2.564 2.564 0 0 0 8 2.75a2.625 2.625 0 0 0-.875.14l.429 4.375.848-.009Z"></path><path d="M7.247 9.006a.752.752 0 1 0 1.505 0 .752.752 0 0 0-1.505 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--wifiAlert"><path d="M5.935 9.006a2.03 2.03 0 0 1 .166-.796 6.746 6.746 0 0 0-2.94 2.047l1.006.876A5.6 5.6 0 0 1 6.05 9.645a2.17 2.17 0 0 1-.114-.639Z"></path><path d="M9.899 8.21a1.925 1.925 0 0 1 .052 1.435 5.6 5.6 0 0 1 1.882 1.461l1.006-.875a6.746 6.746 0 0 0-2.94-2.021Z"></path><path d="M6.049 4.946a9.441 9.441 0 0 0-5.005 3.185l1.006.875A8.251 8.251 0 0 1 6.18 6.25l-.131-1.304Z"></path><path d="M9.951 4.946 9.82 6.25a8.251 8.251 0 0 1 4.13 2.721l1.006-.875a9.442 9.442 0 0 0-5.005-3.15Z"></path><path d="m5.2 12.602 1.006.875a2.293 2.293 0 0 1 3.588 0l1.006-.875A3.667 3.667 0 0 0 8 11.23a3.666 3.666 0 0 0-2.8 1.373Z"></path><path d="m8.402 7.256.43-4.375A2.564 2.564 0 0 0 8 2.75a2.625 2.625 0 0 0-.875.14l.429 4.375.848-.009Z"></path><path d="M7.247 9.006a.752.752 0 1 0 1.505 0 .752.752 0 0 0-1.505 0Z"></path></svg>';
 
 class IconWifiAlert extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconWifiAlert extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--wifiAlert', '', null, 'IconWifiAlert');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--wifiAlert', '', null, 'IconWifiAlert');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--wifiAlert');
         this.root.append(svg);
     }

package/dist/IconWifiAlertLarge.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 28 28" class="c-pieIcon c-pieIcon--wifiAlertLarge"><path d="M17.78 16.188A6.291 6.291 0 0 0 14 14.874 6.65 6.65 0 0 0 8.864 17.5l1.356 1.111A4.917 4.917 0 0 1 14 16.625a4.918 4.918 0 0 1 3.78 1.942l.359-.288a3.01 3.01 0 0 1-.42-1.523c.003-.19.024-.381.06-.569Z"></path><path d="M17.447 4.777A15.006 15.006 0 0 0 14 4.375a15.952 15.952 0 0 0-12.381 6.169l1.347 1.111A14.254 14.254 0 0 1 14 6.125a13.23 13.23 0 0 1 3.622.525v-.411l-.122-1.33"></path><path d="m23.809 7.963-.184 2.17c.51.477.988.986 1.435 1.522l1.347-1.111a18.87 18.87 0 0 0-2.598-2.581Z"></path><path d="M14 9.625a11.463 11.463 0 0 0-8.873 4.498l1.348 1.11A9.767 9.767 0 0 1 14 11.376a8.864 8.864 0 0 1 4.191 1.076L18 10.43a10.5 10.5 0 0 0-4-.805Z"></path><path d="M14 23.406a1.531 1.531 0 1 0 0-3.062 1.531 1.531 0 0 0 0 3.062Z"></path><path d="M19.329 6.072a4.585 4.585 0 0 1 2.905 0l-.744 7.64h-1.418l-.743-7.64Zm2.765 10.702a1.312 1.312 0 1 1-2.625 0 1.312 1.312 0 0 1 2.625 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 28 28" class="c-pieIcon c-pieIcon--wifiAlertLarge"><path d="M17.78 16.188A6.291 6.291 0 0 0 14 14.874 6.65 6.65 0 0 0 8.864 17.5l1.356 1.111A4.917 4.917 0 0 1 14 16.625a4.918 4.918 0 0 1 3.78 1.942l.359-.288a3.01 3.01 0 0 1-.42-1.523c.003-.19.024-.381.06-.569Z"></path><path d="M17.447 4.777A15.006 15.006 0 0 0 14 4.375a15.952 15.952 0 0 0-12.381 6.169l1.347 1.111A14.254 14.254 0 0 1 14 6.125a13.23 13.23 0 0 1 3.622.525v-.411l-.122-1.33"></path><path d="m23.809 7.963-.184 2.17c.51.477.988.986 1.435 1.522l1.347-1.111a18.87 18.87 0 0 0-2.598-2.581Z"></path><path d="M14 9.625a11.463 11.463 0 0 0-8.873 4.498l1.348 1.11A9.767 9.767 0 0 1 14 11.376a8.864 8.864 0 0 1 4.191 1.076L18 10.43a10.5 10.5 0 0 0-4-.805Z"></path><path d="M14 23.406a1.531 1.531 0 1 0 0-3.062 1.531 1.531 0 0 0 0 3.062Z"></path><path d="M19.329 6.072a4.585 4.585 0 0 1 2.905 0l-.744 7.64h-1.418l-.743-7.64Zm2.765 10.702a1.312 1.312 0 1 1-2.625 0 1.312 1.312 0 0 1 2.625 0Z"></path></svg>';
 
 class IconWifiAlertLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconWifiAlertLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--wifiAlertLarge', '', null, 'IconWifiAlertLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--wifiAlertLarge', '', null, 'IconWifiAlertLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--wifiAlertLarge');
         this.root.append(svg);
     }

package/dist/IconWifiLarge.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--wifiLarge"><path d="M19.78 20.585a4.916 4.916 0 0 0-3.78-1.96 4.918 4.918 0 0 0-3.78 1.942L10.864 19.5A6.652 6.652 0 0 1 16 16.875a6.65 6.65 0 0 1 5.136 2.625l-1.356 1.085Z"></path><path d="M27.034 13.655A14.254 14.254 0 0 0 16 8.125a14.254 14.254 0 0 0-11.034 5.53L3.62 12.544a15.95 15.95 0 0 1 12.38-6.169 15.952 15.952 0 0 1 12.382 6.169l-1.347 1.111Z"></path><path d="M23.525 17.234A9.767 9.767 0 0 0 16 13.375a9.764 9.764 0 0 0-7.525 3.841l-1.348-1.094A11.463 11.463 0 0 1 16 11.625a11.461 11.461 0 0 1 8.872 4.48l-1.347 1.129Z"></path><path d="M16 25.406a1.531 1.531 0 1 0 0-3.062 1.531 1.531 0 0 0 0 3.062Z"></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--wifiLarge"><path d="M19.78 20.585a4.916 4.916 0 0 0-3.78-1.96 4.918 4.918 0 0 0-3.78 1.942L10.864 19.5A6.652 6.652 0 0 1 16 16.875a6.65 6.65 0 0 1 5.136 2.625l-1.356 1.085Z"></path><path d="M27.034 13.655A14.254 14.254 0 0 0 16 8.125a14.254 14.254 0 0 0-11.034 5.53L3.62 12.544a15.95 15.95 0 0 1 12.38-6.169 15.952 15.952 0 0 1 12.382 6.169l-1.347 1.111Z"></path><path d="M23.525 17.234A9.767 9.767 0 0 0 16 13.375a9.764 9.764 0 0 0-7.525 3.841l-1.348-1.094A11.463 11.463 0 0 1 16 11.625a11.461 11.461 0 0 1 8.872 4.48l-1.347 1.129Z"></path><path d="M16 25.406a1.531 1.531 0 1 0 0-3.062 1.531 1.531 0 0 0 0 3.062Z"></path></svg>';
 
 class IconWifiLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconWifiLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--wifiLarge', '', null, 'IconWifiLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--wifiLarge', '', null, 'IconWifiLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--wifiLarge');
         this.root.append(svg);
     }

package/dist/IconWorld.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--world"><path d="M8 1.28a6.72 6.72 0 1 0 0 13.44A6.72 6.72 0 0 0 8 1.28Zm4.594 3.876c.206.346.377.713.507 1.094l-1.724 1.986V6.154l-1.12-.175a.386.386 0 0 1-.262-.175.543.543 0 0 1-.122-.429.367.367 0 0 1 .385-.245l2.336.026Zm-7-1.995v1.812l-1.488.813-.105.377-.875-.464A5.46 5.46 0 0 1 5.594 3.16Zm.455 5.495h.621l.586.49-.428 1.479a2.423 2.423 0 0 1-1.392-1.453l.613-.516ZM8 13.408A5.408 5.408 0 0 1 2.593 8c-.002-.35.034-.699.105-1.041l1.312.691c.122.227.288.426.49.586l-.446.377v.323c0 .097.114 2.345 3.019 3.194l.63.184 1.04-3.632-1.618-1.338H5.743a.569.569 0 0 1-.604-.368l.087-.306 1.68-.875V2.75h-.183A5.548 5.548 0 0 1 8 2.592a5.399 5.399 0 0 1 3.5 1.252h-1.242A1.636 1.636 0 0 0 8.595 5.12a1.811 1.811 0 0 0 .777 1.916c.197.123.419.204.65.237l.07 2.625 1.504.157L13.4 7.87a.963.963 0 0 1 0 .157A5.407 5.407 0 0 1 8 13.408Z"></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--world"><path d="M8 1.28a6.72 6.72 0 1 0 0 13.44A6.72 6.72 0 0 0 8 1.28Zm4.594 3.876c.206.346.377.713.507 1.094l-1.724 1.986V6.154l-1.12-.175a.386.386 0 0 1-.262-.175.543.543 0 0 1-.122-.429.367.367 0 0 1 .385-.245l2.336.026Zm-7-1.995v1.812l-1.488.813-.105.377-.875-.464A5.46 5.46 0 0 1 5.594 3.16Zm.455 5.495h.621l.586.49-.428 1.479a2.423 2.423 0 0 1-1.392-1.453l.613-.516ZM8 13.408A5.408 5.408 0 0 1 2.593 8c-.002-.35.034-.699.105-1.041l1.312.691c.122.227.288.426.49.586l-.446.377v.323c0 .097.114 2.345 3.019 3.194l.63.184 1.04-3.632-1.618-1.338H5.743a.569.569 0 0 1-.604-.368l.087-.306 1.68-.875V2.75h-.183A5.548 5.548 0 0 1 8 2.592a5.399 5.399 0 0 1 3.5 1.252h-1.242A1.636 1.636 0 0 0 8.595 5.12a1.811 1.811 0 0 0 .777 1.916c.197.123.419.204.65.237l.07 2.625 1.504.157L13.4 7.87a.963.963 0 0 1 0 .157A5.407 5.407 0 0 1 8 13.408Z"></path></svg>';
 
 class IconWorld extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconWorld extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--world', '', null, 'IconWorld');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--world', '', null, 'IconWorld');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--world');
         this.root.append(svg);
     }

package/dist/IconWorldLarge.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--worldLarge"><path d="M16 3.811a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm7.551 6.598.727-.77a10.378 10.378 0 0 1 1.898 3.955l-4.06 4.375-.105-4.892-1.828-.288a1.156 1.156 0 0 1-.805-.499 1.426 1.426 0 0 1-.21-1.111 1.085 1.085 0 0 1 1.146-.805l3.237.035ZM11.88 6.375v3.841L8.842 11.87l-.306 1.103-2.161-1.13a10.5 10.5 0 0 1 5.504-5.468ZM16 26.5A10.5 10.5 0 0 1 5.5 16c.007-.844.112-1.684.315-2.502l2.756 1.452c.304.633.8 1.153 1.418 1.488l-1.182.988v.429c0 .175.21 4.375 5.723 5.985l.875.245 1.864-6.571-2.888-2.389h-2.625a1.557 1.557 0 0 1-1.627-1.076l.271-1.015 3.299-1.75V5.84A10.597 10.597 0 0 1 16 5.561c2.63-.001 5.161.993 7.087 2.783l-.297.315h-2.476a2.835 2.835 0 0 0-2.861 2.178 3.193 3.193 0 0 0 .49 2.486 2.912 2.912 0 0 0 1.977 1.233l.376.062.079 5.048 2.336.254 3.789-4.06v.166A10.5 10.5 0 0 1 16 26.5Zm-3.806-9.625h1.557l1.505 1.26-1.059 3.736c-2.694-1.067-3.394-2.887-3.57-3.692l1.567-1.304Z"></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--worldLarge"><path d="M16 3.811a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm7.551 6.598.727-.77a10.378 10.378 0 0 1 1.898 3.955l-4.06 4.375-.105-4.892-1.828-.288a1.156 1.156 0 0 1-.805-.499 1.426 1.426 0 0 1-.21-1.111 1.085 1.085 0 0 1 1.146-.805l3.237.035ZM11.88 6.375v3.841L8.842 11.87l-.306 1.103-2.161-1.13a10.5 10.5 0 0 1 5.504-5.468ZM16 26.5A10.5 10.5 0 0 1 5.5 16c.007-.844.112-1.684.315-2.502l2.756 1.452c.304.633.8 1.153 1.418 1.488l-1.182.988v.429c0 .175.21 4.375 5.723 5.985l.875.245 1.864-6.571-2.888-2.389h-2.625a1.557 1.557 0 0 1-1.627-1.076l.271-1.015 3.299-1.75V5.84A10.597 10.597 0 0 1 16 5.561c2.63-.001 5.161.993 7.087 2.783l-.297.315h-2.476a2.835 2.835 0 0 0-2.861 2.178 3.193 3.193 0 0 0 .49 2.486 2.912 2.912 0 0 0 1.977 1.233l.376.062.079 5.048 2.336.254 3.789-4.06v.166A10.5 10.5 0 0 1 16 26.5Zm-3.806-9.625h1.557l1.505 1.26-1.059 3.736c-2.694-1.067-3.394-2.887-3.57-3.692l1.567-1.304Z"></path></svg>';
 
 class IconWorldLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconWorldLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--worldLarge', '', null, 'IconWorldLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--worldLarge', '', null, 'IconWorldLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--worldLarge');
         this.root.append(svg);
     }

package/dist/IconWrap.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--wrap"><path d="M14.947 4.693a1.794 1.794 0 0 0-1.154-1.584 1.75 1.75 0 0 0-.98-1.759A1.75 1.75 0 0 0 11 1.604a1.75 1.75 0 0 0-1.181-.525 1.654 1.654 0 0 0-1.636 1.19c-.07.157-.131.317-.184.481L1.263 9.339a.665.665 0 0 0-.184.516.061.061 0 0 0 0 .044c.254 3.202 1.837 5.005 4.462 5.057a.647.647 0 0 0 .438-.175L13.1 8.28c.262-.075.507-.203.718-.376a1.53 1.53 0 0 0 .568-1.269 1.672 1.672 0 0 0-.14-.516 1.75 1.75 0 0 0 .7-1.426Zm-7.183.148v1.077c.052 1.295.087 2.143-.875 3.106-1.216 1.19-2.958.875-3.99.56L7.764 4.84Zm-2.45 8.803c-1.479-.123-2.406-1.068-2.774-2.8.68.227 1.392.348 2.109.359A4.374 4.374 0 0 0 7.808 9.96a3.981 3.981 0 0 0 1.294-2.791 6.248 6.248 0 0 0 2.136 1.059l-5.924 5.416Zm7.796-8.435a.665.665 0 0 0-.56.499.647.647 0 0 0 .28.7c.088.06.262.236.262.332 0 .096 0 .105-.14.193-.332.18-.722.22-1.085.113a4.533 4.533 0 0 1-2.79-1.828 7.21 7.21 0 0 1 .35-2.538c.104-.306.27-.289.332-.297a.551.551 0 0 1 .472.428.675.675 0 0 0 .534.508.647.647 0 0 0 .665-.298s.438-.656.875-.472c.438.184.14.875.14.875a.648.648 0 0 0 .3.778c.088.05.186.08.286.088.446 0 .613.263.621.473.01.21-.2.402-.542.446Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--wrap"><path d="M14.947 4.693a1.794 1.794 0 0 0-1.154-1.584 1.75 1.75 0 0 0-.98-1.759A1.75 1.75 0 0 0 11 1.604a1.75 1.75 0 0 0-1.181-.525 1.654 1.654 0 0 0-1.636 1.19c-.07.157-.131.317-.184.481L1.263 9.339a.665.665 0 0 0-.184.516.061.061 0 0 0 0 .044c.254 3.202 1.837 5.005 4.462 5.057a.647.647 0 0 0 .438-.175L13.1 8.28c.262-.075.507-.203.718-.376a1.53 1.53 0 0 0 .568-1.269 1.672 1.672 0 0 0-.14-.516 1.75 1.75 0 0 0 .7-1.426Zm-7.183.148v1.077c.052 1.295.087 2.143-.875 3.106-1.216 1.19-2.958.875-3.99.56L7.764 4.84Zm-2.45 8.803c-1.479-.123-2.406-1.068-2.774-2.8.68.227 1.392.348 2.109.359A4.374 4.374 0 0 0 7.808 9.96a3.981 3.981 0 0 0 1.294-2.791 6.248 6.248 0 0 0 2.136 1.059l-5.924 5.416Zm7.796-8.435a.665.665 0 0 0-.56.499.647.647 0 0 0 .28.7c.088.06.262.236.262.332 0 .096 0 .105-.14.193-.332.18-.722.22-1.085.113a4.533 4.533 0 0 1-2.79-1.828 7.21 7.21 0 0 1 .35-2.538c.104-.306.27-.289.332-.297a.551.551 0 0 1 .472.428.675.675 0 0 0 .534.508.647.647 0 0 0 .665-.298s.438-.656.875-.472c.438.184.14.875.14.875a.648.648 0 0 0 .3.778c.088.05.186.08.286.088.446 0 .613.263.621.473.01.21-.2.402-.542.446Z"></path></svg>';
 
 class IconWrap extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconWrap extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--wrap', '', null, 'IconWrap');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--wrap', '', null, 'IconWrap');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--wrap');
         this.root.append(svg);
     }

package/dist/IconWrapLarge.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--wrapLarge"><path d="M29.615 9.543a3.133 3.133 0 0 0-2.327-2.88 3.132 3.132 0 0 0-1.663-3.42 3.238 3.238 0 0 0-3.5.7 3.177 3.177 0 0 0-2.345-1.208 2.8 2.8 0 0 0-2.853 2.083c-.113.35-.21.682-.297 1.023l-13.641 13.3a.874.874 0 0 0-.245.692c.463 6.22 3.5 9.703 8.522 9.808a.875.875 0 0 0 .586-.236L26.23 16.28a2.739 2.739 0 0 0 1.295-.604 2.485 2.485 0 0 0 .595-3.395 3.036 3.036 0 0 0 1.496-2.738ZM21.6 11.625c.63 0 1.041.123 1.155.306.114.184.061.823-.499 1.75a9.524 9.524 0 0 1-1.496-.875c.327-.385.607-.778.84-1.181Zm-1.286-1.234c-.252.46-.545.896-.875 1.304a6.404 6.404 0 0 1-1.488-2.17c.919-.612 2.24-.752 2.625-.455.193.14.088.656-.262 1.321Zm-4.13-1.671v3.229c.122 2.73.245 5.556-1.75 7.875a5.715 5.715 0 0 1-4.226 2.266h-.088c-2.231 0-4.261-1.47-5.25-2.319L16.184 8.72Zm-5.25 19.154c-3.868-.228-5.504-3.019-6.125-5.959a9.528 9.528 0 0 0 5.328 1.908h.14a7.395 7.395 0 0 0 5.53-2.88c2.188-2.554 2.267-5.52 2.17-8.233.308.309.633.6.972.875a12.491 12.491 0 0 0 3.298 2.012 9.858 9.858 0 0 0 1.532.517l-12.845 11.76Zm15.487-16.87a.874.874 0 0 0-.7 1.184.874.874 0 0 0 .324.408c.365.235.63.596.744 1.015a.997.997 0 0 1-.429.726c-.341.307-1.225.394-2.468 0 .753-1.347.875-2.467.36-3.325a2.54 2.54 0 0 0-1.908-1.12 2.135 2.135 0 0 0-.692-2.248 3.885 3.885 0 0 0-3.578-.158c.052-.341.113-.682.192-1.015.079-.332.193-.743.324-1.128a1.094 1.094 0 0 1 1.102-.875 1.514 1.514 0 0 1 1.357 1.198.875.875 0 0 0 1.601.272s1.041-1.637 2.258-1.112c1.067.473.516 2.24.507 2.258a.876.876 0 0 0 .788 1.146c1.19.061 1.636.77 1.662 1.365.026.595-.341 1.269-1.444 1.409Z"></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--wrapLarge"><path d="M29.615 9.543a3.133 3.133 0 0 0-2.327-2.88 3.132 3.132 0 0 0-1.663-3.42 3.238 3.238 0 0 0-3.5.7 3.177 3.177 0 0 0-2.345-1.208 2.8 2.8 0 0 0-2.853 2.083c-.113.35-.21.682-.297 1.023l-13.641 13.3a.874.874 0 0 0-.245.692c.463 6.22 3.5 9.703 8.522 9.808a.875.875 0 0 0 .586-.236L26.23 16.28a2.739 2.739 0 0 0 1.295-.604 2.485 2.485 0 0 0 .595-3.395 3.036 3.036 0 0 0 1.496-2.738ZM21.6 11.625c.63 0 1.041.123 1.155.306.114.184.061.823-.499 1.75a9.524 9.524 0 0 1-1.496-.875c.327-.385.607-.778.84-1.181Zm-1.286-1.234c-.252.46-.545.896-.875 1.304a6.404 6.404 0 0 1-1.488-2.17c.919-.612 2.24-.752 2.625-.455.193.14.088.656-.262 1.321Zm-4.13-1.671v3.229c.122 2.73.245 5.556-1.75 7.875a5.715 5.715 0 0 1-4.226 2.266h-.088c-2.231 0-4.261-1.47-5.25-2.319L16.184 8.72Zm-5.25 19.154c-3.868-.228-5.504-3.019-6.125-5.959a9.528 9.528 0 0 0 5.328 1.908h.14a7.395 7.395 0 0 0 5.53-2.88c2.188-2.554 2.267-5.52 2.17-8.233.308.309.633.6.972.875a12.491 12.491 0 0 0 3.298 2.012 9.858 9.858 0 0 0 1.532.517l-12.845 11.76Zm15.487-16.87a.874.874 0 0 0-.7 1.184.874.874 0 0 0 .324.408c.365.235.63.596.744 1.015a.997.997 0 0 1-.429.726c-.341.307-1.225.394-2.468 0 .753-1.347.875-2.467.36-3.325a2.54 2.54 0 0 0-1.908-1.12 2.135 2.135 0 0 0-.692-2.248 3.885 3.885 0 0 0-3.578-.158c.052-.341.113-.682.192-1.015.079-.332.193-.743.324-1.128a1.094 1.094 0 0 1 1.102-.875 1.514 1.514 0 0 1 1.357 1.198.875.875 0 0 0 1.601.272s1.041-1.637 2.258-1.112c1.067.473.516 2.24.507 2.258a.876.876 0 0 0 .788 1.146c1.19.061 1.636.77 1.662 1.365.026.595-.341 1.269-1.444 1.409Z"></path></svg>';
 
 class IconWrapLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconWrapLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--wrapLarge', '', null, 'IconWrapLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--wrapLarge', '', null, 'IconWrapLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--wrapLarge');
         this.root.append(svg);
     }