@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/dist/IconPlaceholderLarge.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--placeholderLarge"><path fill-rule="evenodd" d="M.166 0h31.668L32 .166v31.668l-.166.166H.166L0 31.834V.166L.166 0Zm31.502 31.668V.33H.33v31.337h31.337ZM6.537 2h18.926A4.537 4.537 0 0 1 30 6.537v18.926A4.537 4.537 0 0 1 25.463 30H6.537A4.537 4.537 0 0 1 2 25.463V6.537A4.537 4.537 0 0 1 6.537 2Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--placeholderLarge"><path fill-rule="evenodd" d="M.166 0h31.668L32 .166v31.668l-.166.166H.166L0 31.834V.166L.166 0Zm31.502 31.668V.33H.33v31.337h31.337ZM6.537 2h18.926A4.537 4.537 0 0 1 30 6.537v18.926A4.537 4.537 0 0 1 25.463 30H6.537A4.537 4.537 0 0 1 2 25.463V6.537A4.537 4.537 0 0 1 6.537 2Z" clip-rule="evenodd"></path></svg>';
 
 class IconPlaceholderLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPlaceholderLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--placeholderLarge', '', null, 'IconPlaceholderLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--placeholderLarge', '', null, 'IconPlaceholderLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--placeholderLarge');
         this.root.append(svg);
     }

package/dist/IconPlane.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--plane"><path d="m10.931 15-1.881-.595a3.316 3.316 0 0 0-2.1 0L5.069 15l-.044-1.505.35-.192a.875.875 0 0 0 .446-.77V10.45l-3.832.77V8.919a1.426 1.426 0 0 1 .761-1.243l3.106-1.75v-2.52a2.188 2.188 0 0 1 4.375 0v2.555l3.107 1.75a1.427 1.427 0 0 1 .726 1.243v2.301l-3.877-.805v2.083a.875.875 0 0 0 .447.77l.341.192L10.931 15ZM8 12.918a4.7 4.7 0 0 1 .928.096 2.196 2.196 0 0 1-.053-.481V8.875l3.832.77v-.7a.113.113 0 0 0-.052-.096L8.875 6.73V3.406a.875.875 0 0 0-1.75 0v3.325l-3.78 2.091a.114.114 0 0 0-.052.097v.7l3.832-.744v3.684c0 .162-.017.323-.052.481A4.7 4.7 0 0 1 8 12.918Z"></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--plane"><path d="m10.931 15-1.881-.595a3.316 3.316 0 0 0-2.1 0L5.069 15l-.044-1.505.35-.192a.875.875 0 0 0 .446-.77V10.45l-3.832.77V8.919a1.426 1.426 0 0 1 .761-1.243l3.106-1.75v-2.52a2.188 2.188 0 0 1 4.375 0v2.555l3.107 1.75a1.427 1.427 0 0 1 .726 1.243v2.301l-3.877-.805v2.083a.875.875 0 0 0 .447.77l.341.192L10.931 15ZM8 12.918a4.7 4.7 0 0 1 .928.096 2.196 2.196 0 0 1-.053-.481V8.875l3.832.77v-.7a.113.113 0 0 0-.052-.096L8.875 6.73V3.406a.875.875 0 0 0-1.75 0v3.325l-3.78 2.091a.114.114 0 0 0-.052.097v.7l3.832-.744v3.684c0 .162-.017.323-.052.481A4.7 4.7 0 0 1 8 12.918Z"></path></svg>';
 
 class IconPlane extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPlane extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--plane', '', null, 'IconPlane');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--plane', '', null, 'IconPlane');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--plane');
         this.root.append(svg);
     }

package/dist/IconPlaneLarge.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--planeLarge"><path d="m20.786 28.582-2.905-.97a6.011 6.011 0 0 0-3.762 0l-2.905.97-.062-2.143.456-.263a1.75 1.75 0 0 0 .874-1.531v-3.894l-7.455 1.313V18.45a2.214 2.214 0 0 1 1.13-1.916l6.343-3.868V7.25a3.5 3.5 0 1 1 7 0v5.416l6.352 3.894a2.17 2.17 0 0 1 1.103 1.89v3.614L19.5 20.75v3.894a1.75 1.75 0 0 0 .875 1.531l.455.263-.044 2.143ZM16 25.555a7.75 7.75 0 0 1 1.951.254 3.5 3.5 0 0 1-.201-1.164v-6.02l7.455 1.321V18.45a.446.446 0 0 0-.227-.385L17.75 13.69V7.25a1.75 1.75 0 0 0-3.5 0v6.405L7.057 18.03a.463.463 0 0 0-.262.402v1.532l7.455-1.339v5.985c0 .396-.069.79-.201 1.164A7.748 7.748 0 0 1 16 25.555Z"></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--planeLarge"><path d="m20.786 28.582-2.905-.97a6.011 6.011 0 0 0-3.762 0l-2.905.97-.062-2.143.456-.263a1.75 1.75 0 0 0 .874-1.531v-3.894l-7.455 1.313V18.45a2.214 2.214 0 0 1 1.13-1.916l6.343-3.868V7.25a3.5 3.5 0 1 1 7 0v5.416l6.352 3.894a2.17 2.17 0 0 1 1.103 1.89v3.614L19.5 20.75v3.894a1.75 1.75 0 0 0 .875 1.531l.455.263-.044 2.143ZM16 25.555a7.75 7.75 0 0 1 1.951.254 3.5 3.5 0 0 1-.201-1.164v-6.02l7.455 1.321V18.45a.446.446 0 0 0-.227-.385L17.75 13.69V7.25a1.75 1.75 0 0 0-3.5 0v6.405L7.057 18.03a.463.463 0 0 0-.262.402v1.532l7.455-1.339v5.985c0 .396-.069.79-.201 1.164A7.748 7.748 0 0 1 16 25.555Z"></path></svg>';
 
 class IconPlaneLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPlaneLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--planeLarge', '', null, 'IconPlaneLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--planeLarge', '', null, 'IconPlaneLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--planeLarge');
         this.root.append(svg);
     }

package/dist/IconPlay.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--play"><path d="M4.596 4.299 11.544 8l-6.948 3.693V4.299ZM4.255 2.75a.962.962 0 0 0-.971.963v8.557a.963.963 0 0 0 1.478.831l7.403-3.946a1.312 1.312 0 0 0 0-2.319L4.762 2.908a.945.945 0 0 0-.507-.158Z"></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--play"><path d="M4.596 4.299 11.544 8l-6.948 3.693V4.299ZM4.255 2.75a.962.962 0 0 0-.971.963v8.557a.963.963 0 0 0 1.478.831l7.403-3.946a1.312 1.312 0 0 0 0-2.319L4.762 2.908a.945.945 0 0 0-.507-.158Z"></path></svg>';
 
 class IconPlay extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPlay extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--play', '', null, 'IconPlay');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--play', '', null, 'IconPlay');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--play');
         this.root.append(svg);
     }

package/dist/IconPlayCircle.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--playCircle"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm0 12.25A5.469 5.469 0 1 1 8 2.53a5.469 5.469 0 0 1 0 10.938Z"></path><path d="M11.141 7.282 6.82 5.305a.77.77 0 0 0-.753.07.779.779 0 0 0-.367.656v3.973a.779.779 0 0 0 .367.656.742.742 0 0 0 .752.053l4.323-1.978a.788.788 0 0 0 0-1.435v-.018Zm-4.13 1.882V6.836L9.557 8 7.011 9.164Z"></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--playCircle"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm0 12.25A5.469 5.469 0 1 1 8 2.53a5.469 5.469 0 0 1 0 10.938Z"></path><path d="M11.141 7.282 6.82 5.305a.77.77 0 0 0-.753.07.779.779 0 0 0-.367.656v3.973a.779.779 0 0 0 .367.656.742.742 0 0 0 .752.053l4.323-1.978a.788.788 0 0 0 0-1.435v-.018Zm-4.13 1.882V6.836L9.557 8 7.011 9.164Z"></path></svg>';
 
 class IconPlayCircle extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPlayCircle extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--playCircle', '', null, 'IconPlayCircle');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--playCircle', '', null, 'IconPlayCircle');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--playCircle');
         this.root.append(svg);
     }

package/dist/IconPlayCircleFilled.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--playCircleFilled"><path d="M7.011 9.164 9.557 8 7.011 6.836v2.328Z"></path><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm3.141 7.498L6.82 10.695a.744.744 0 0 1-.333.079.726.726 0 0 1-.42-.149.78.78 0 0 1-.367-.656V6.014a.779.779 0 0 1 .367-.639.77.77 0 0 1 .753-.053L11.14 7.3a.788.788 0 0 1 0 1.435v-.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 16 16" class="c-pieIcon c-pieIcon--playCircleFilled"><path d="M7.011 9.164 9.557 8 7.011 6.836v2.328Z"></path><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219Zm3.141 7.498L6.82 10.695a.744.744 0 0 1-.333.079.726.726 0 0 1-.42-.149.78.78 0 0 1-.367-.656V6.014a.779.779 0 0 1 .367-.639.77.77 0 0 1 .753-.053L11.14 7.3a.788.788 0 0 1 0 1.435v-.018Z"></path></svg>';
 
 class IconPlayCircleFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPlayCircleFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--playCircleFilled', '', null, 'IconPlayCircleFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--playCircleFilled', '', null, 'IconPlayCircleFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--playCircleFilled');
         this.root.append(svg);
     }

package/dist/IconPlayCircleFilledLarge.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--playCircleFilledLarge"><path d="m20.043 16-6.633 3.456-.026-6.93L20.043 16Z"></path><path fill-rule="evenodd" d="M9.194 5.814a12.25 12.25 0 1 1 13.612 20.372A12.25 12.25 0 0 1 9.194 5.814Zm4.688 15.366 7.56-3.964A1.46 1.46 0 0 0 22.125 16a1.479 1.479 0 0 0-.7-1.234l-7.516-3.928a1.417 1.417 0 0 0-1.462-.088 1.46 1.46 0 0 0-.778 1.321v7.875a1.46 1.46 0 0 0 1.444 1.47c.274 0 .542-.083.77-.236Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--playCircleFilledLarge"><path d="m20.043 16-6.633 3.456-.026-6.93L20.043 16Z"></path><path fill-rule="evenodd" d="M9.194 5.814a12.25 12.25 0 1 1 13.612 20.372A12.25 12.25 0 0 1 9.194 5.814Zm4.688 15.366 7.56-3.964A1.46 1.46 0 0 0 22.125 16a1.479 1.479 0 0 0-.7-1.234l-7.516-3.928a1.417 1.417 0 0 0-1.462-.088 1.46 1.46 0 0 0-.778 1.321v7.875a1.46 1.46 0 0 0 1.444 1.47c.274 0 .542-.083.77-.236Z" clip-rule="evenodd"></path></svg>';
 
 class IconPlayCircleFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPlayCircleFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--playCircleFilledLarge', '', null, 'IconPlayCircleFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--playCircleFilledLarge', '', null, 'IconPlayCircleFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--playCircleFilledLarge');
         this.root.append(svg);
     }

package/dist/IconPlayCircleLarge.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--playCircleLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm0 22.75a10.5 10.5 0 1 1 0-21 10.5 10.5 0 0 1 0 21Z"></path><path d="m21.425 14.766-7.516-3.928a1.417 1.417 0 0 0-1.462-.088 1.46 1.46 0 0 0-.778 1.304v7.875a1.46 1.46 0 0 0 1.444 1.487c.274 0 .542-.083.77-.236l7.56-3.964A1.462 1.462 0 0 0 22.124 16a1.479 1.479 0 0 0-.7-1.234Zm-8.05 4.734v-7l6.659 3.5-6.659 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--playCircleLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm0 22.75a10.5 10.5 0 1 1 0-21 10.5 10.5 0 0 1 0 21Z"></path><path d="m21.425 14.766-7.516-3.928a1.417 1.417 0 0 0-1.462-.088 1.46 1.46 0 0 0-.778 1.304v7.875a1.46 1.46 0 0 0 1.444 1.487c.274 0 .542-.083.77-.236l7.56-3.964A1.462 1.462 0 0 0 22.124 16a1.479 1.479 0 0 0-.7-1.234Zm-8.05 4.734v-7l6.659 3.5-6.659 3.5Z"></path></svg>';
 
 class IconPlayCircleLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPlayCircleLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--playCircleLarge', '', null, 'IconPlayCircleLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--playCircleLarge', '', null, 'IconPlayCircleLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--playCircleLarge');
         this.root.append(svg);
     }

package/dist/IconPlayLarge.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--playLarge"><path d="m8.807 8.361.088.044L23.192 16 8.895 23.595s0 .053-.079.07V8.361h-.009Zm.01-1.75a1.75 1.75 0 0 0-1.75 1.75v15.304a1.75 1.75 0 0 0 2.624 1.47l14.306-7.63a1.75 1.75 0 0 0 0-3.062L9.717 6.865a1.75 1.75 0 0 0-.918-.271l.017.017Z"></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--playLarge"><path d="m8.807 8.361.088.044L23.192 16 8.895 23.595s0 .053-.079.07V8.361h-.009Zm.01-1.75a1.75 1.75 0 0 0-1.75 1.75v15.304a1.75 1.75 0 0 0 2.624 1.47l14.306-7.63a1.75 1.75 0 0 0 0-3.062L9.717 6.865a1.75 1.75 0 0 0-.918-.271l.017.017Z"></path></svg>';
 
 class IconPlayLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPlayLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--playLarge', '', null, 'IconPlayLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--playLarge', '', null, 'IconPlayLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--playLarge');
         this.root.append(svg);
     }

package/dist/IconPlus.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--plus"><path d="M14.125 7.344H8.656V1.875H7.344v5.469H1.875v1.312h5.469v5.469h1.312V8.656h5.469V7.344Z"></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--plus"><path d="M14.125 7.344H8.656V1.875H7.344v5.469H1.875v1.312h5.469v5.469h1.312V8.656h5.469V7.344Z"></path></svg>';
 
 class IconPlus extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPlus extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--plus', '', null, 'IconPlus');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--plus', '', null, 'IconPlus');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--plus');
         this.root.append(svg);
     }

package/dist/IconPlusCircle.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--plusCircle"><path d="M8.656 4.596H7.344v2.748H4.596v1.312h2.748v2.748h1.312V8.656h2.748V7.344H8.656V4.596Z"></path><path d="M12.795 3.205a6.781 6.781 0 1 0 0 9.625 6.79 6.79 0 0 0 0-9.625Zm-.927 8.662a5.469 5.469 0 1 1-7.734-7.735 5.469 5.469 0 0 1 7.734 7.736Z"></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--plusCircle"><path d="M8.656 4.596H7.344v2.748H4.596v1.312h2.748v2.748h1.312V8.656h2.748V7.344H8.656V4.596Z"></path><path d="M12.795 3.205a6.781 6.781 0 1 0 0 9.625 6.79 6.79 0 0 0 0-9.625Zm-.927 8.662a5.469 5.469 0 1 1-7.734-7.735 5.469 5.469 0 0 1 7.734 7.736Z"></path></svg>';
 
 class IconPlusCircle extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPlusCircle extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--plusCircle', '', null, 'IconPlusCircle');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--plusCircle', '', null, 'IconPlusCircle');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--plusCircle');
         this.root.append(svg);
     }

package/dist/IconPlusCircleFilled.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--plusCircleFilled"><path d="M12.795 3.205a6.781 6.781 0 1 0 0 9.625 6.79 6.79 0 0 0 0-9.625Zm-1.391 5.451H8.656v2.748H7.344V8.656H4.596V7.344h2.748V4.596h1.312v2.748h2.748v1.312Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--plusCircleFilled"><path d="M12.795 3.205a6.781 6.781 0 1 0 0 9.625 6.79 6.79 0 0 0 0-9.625Zm-1.391 5.451H8.656v2.748H7.344V8.656H4.596V7.344h2.748V4.596h1.312v2.748h2.748v1.312Z"></path></svg>';
 
 class IconPlusCircleFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPlusCircleFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--plusCircleFilled', '', null, 'IconPlusCircleFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--plusCircleFilled', '', null, 'IconPlusCircleFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--plusCircleFilled');
         this.root.append(svg);
     }

package/dist/IconPlusCircleFilledLarge.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--plusCircleFilledLarge"><path d="M24.663 7.338A12.25 12.25 0 1 0 7.339 24.663 12.25 12.25 0 0 0 24.663 7.338Zm-2.477 9.537h-5.31v5.311h-1.75v-5.311H9.813v-1.75h5.311V9.814h1.75v5.311h5.311v1.75Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--plusCircleFilledLarge"><path d="M24.663 7.338A12.25 12.25 0 1 0 7.339 24.663 12.25 12.25 0 0 0 24.663 7.338Zm-2.477 9.537h-5.31v5.311h-1.75v-5.311H9.813v-1.75h5.311V9.814h1.75v5.311h5.311v1.75Z"></path></svg>';
 
 class IconPlusCircleFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPlusCircleFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--plusCircleFilledLarge', '', null, 'IconPlusCircleFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--plusCircleFilledLarge', '', null, 'IconPlusCircleFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--plusCircleFilledLarge');
         this.root.append(svg);
     }

package/dist/IconPlusCircleLarge.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--plusCircleLarge"><path d="M16.875 9.814h-1.75v5.311H9.814v1.75h5.311v5.311h1.75v-5.311h5.311v-1.75h-5.31V9.814Z"></path><path d="M24.663 7.338A12.25 12.25 0 1 0 7.339 24.663 12.25 12.25 0 0 0 24.663 7.338Zm-1.234 16.09A10.5 10.5 0 1 1 8.605 8.555 10.5 10.5 0 0 1 23.43 23.43Z"></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--plusCircleLarge"><path d="M16.875 9.814h-1.75v5.311H9.814v1.75h5.311v5.311h1.75v-5.311h5.311v-1.75h-5.31V9.814Z"></path><path d="M24.663 7.338A12.25 12.25 0 1 0 7.339 24.663 12.25 12.25 0 0 0 24.663 7.338Zm-1.234 16.09A10.5 10.5 0 1 1 8.605 8.555 10.5 10.5 0 0 1 23.43 23.43Z"></path></svg>';
 
 class IconPlusCircleLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPlusCircleLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--plusCircleLarge', '', null, 'IconPlusCircleLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--plusCircleLarge', '', null, 'IconPlusCircleLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--plusCircleLarge');
         this.root.append(svg);
     }

package/dist/IconPlusLarge.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--plusLarge"><path d="M27.375 16.875v-1.75h-10.5v-10.5h-1.75v10.5h-10.5v1.75h10.5v10.5h1.75v-10.5h10.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--plusLarge"><path d="M27.375 16.875v-1.75h-10.5v-10.5h-1.75v10.5h-10.5v1.75h10.5v10.5h1.75v-10.5h10.5Z"></path></svg>';
 
 class IconPlusLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPlusLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--plusLarge', '', null, 'IconPlusLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--plusLarge', '', null, 'IconPlusLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--plusLarge');
         this.root.append(svg);
     }

package/dist/IconPolicies.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--policies"><path d="M9.75 2.094H2.094V14.78h11.812V6.25A4.156 4.156 0 0 0 9.75 2.094Zm2.756 3.5h-2.1v-2.1a2.826 2.826 0 0 1 2.1 2.1Zm-9.1 7.875V3.406h5.688v3.5h3.5v6.563H3.406ZM8 7.78H5.375V6.47H8V7.78ZM5.375 9.094h5.25v1.312h-5.25V9.094Z"></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--policies"><path d="M9.75 2.094H2.094V14.78h11.812V6.25A4.156 4.156 0 0 0 9.75 2.094Zm2.756 3.5h-2.1v-2.1a2.826 2.826 0 0 1 2.1 2.1Zm-9.1 7.875V3.406h5.688v3.5h3.5v6.563H3.406ZM8 7.78H5.375V6.47H8V7.78ZM5.375 9.094h5.25v1.312h-5.25V9.094Z"></path></svg>';
 
 class IconPolicies extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPolicies extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--policies', '', null, 'IconPolicies');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--policies', '', null, 'IconPolicies');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--policies');
         this.root.append(svg);
     }

package/dist/IconPoliciesLarge.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--policiesLarge"><path d="M18.625 3.75h-14v25.375h22.75V12.5a8.749 8.749 0 0 0-8.75-8.75Zm6.773 7h-5.023V5.728a7.044 7.044 0 0 1 5.023 5.022Zm.227 16.625H6.375V5.5h12.25v7h7v14.875Zm-10.5-14H10.75v-1.75h4.375v1.75Zm-4.375 7h7v1.75h-7v-1.75Zm0-4.375h10.5v1.75h-10.5V16Z"></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--policiesLarge"><path d="M18.625 3.75h-14v25.375h22.75V12.5a8.749 8.749 0 0 0-8.75-8.75Zm6.773 7h-5.023V5.728a7.044 7.044 0 0 1 5.023 5.022Zm.227 16.625H6.375V5.5h12.25v7h7v14.875Zm-10.5-14H10.75v-1.75h4.375v1.75Zm-4.375 7h7v1.75h-7v-1.75Zm0-4.375h10.5v1.75h-10.5V16Z"></path></svg>';
 
 class IconPoliciesLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPoliciesLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--policiesLarge', '', null, 'IconPoliciesLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--policiesLarge', '', null, 'IconPoliciesLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--policiesLarge');
         this.root.append(svg);
     }

package/dist/IconPound.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--pound"><path d="M12.585 11.885c-.315 1.277-1.33 1.803-2.695 1.803H3.625v-1.47h1.12v-3.5h-1.12V7.353h1.12V5.83c0-2.327 1.295-3.727 3.692-3.727A3.911 3.911 0 0 1 11.5 3.328l-1.05 1.067a2.625 2.625 0 0 0-2.012-.822c-1.278 0-2.048.647-2.048 2.187v1.593h3.587v1.365H6.39v3.5h3.5a1.18 1.18 0 0 0 1.277-.823l1.418.49Z"></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--pound"><path d="M12.585 11.885c-.315 1.277-1.33 1.803-2.695 1.803H3.625v-1.47h1.12v-3.5h-1.12V7.353h1.12V5.83c0-2.327 1.295-3.727 3.692-3.727A3.911 3.911 0 0 1 11.5 3.328l-1.05 1.067a2.625 2.625 0 0 0-2.012-.822c-1.278 0-2.048.647-2.048 2.187v1.593h3.587v1.365H6.39v3.5h3.5a1.18 1.18 0 0 0 1.277-.823l1.418.49Z"></path></svg>';
 
 class IconPound extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPound extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pound', '', null, 'IconPound');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pound', '', null, 'IconPound');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pound');
         this.root.append(svg);
     }

package/dist/IconPoundLarge.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--poundLarge"><path d="m19.29 19.281 1.523.517c-.333 1.338-1.4 1.89-2.827 1.89h-6.545v-1.54h1.138v-3.675H11.44v-1.435h1.138v-1.602c0-2.441 1.365-3.911 3.876-3.911a4.121 4.121 0 0 1 3.185 1.286l-1.102 1.12a2.737 2.737 0 0 0-2.083-.875c-1.339 0-2.144.683-2.144 2.302v1.68h3.763v1.434H14.31v3.675h3.631a1.251 1.251 0 0 0 1.348-.866ZM28.25 16a12.25 12.25 0 1 1-24.499 0 12.25 12.25 0 0 1 24.499 0Zm-1.75 0a10.5 10.5 0 1 0-21 0 10.5 10.5 0 0 0 21 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 32 32" class="c-pieIcon c-pieIcon--poundLarge"><path d="m19.29 19.281 1.523.517c-.333 1.338-1.4 1.89-2.827 1.89h-6.545v-1.54h1.138v-3.675H11.44v-1.435h1.138v-1.602c0-2.441 1.365-3.911 3.876-3.911a4.121 4.121 0 0 1 3.185 1.286l-1.102 1.12a2.737 2.737 0 0 0-2.083-.875c-1.339 0-2.144.683-2.144 2.302v1.68h3.763v1.434H14.31v3.675h3.631a1.251 1.251 0 0 0 1.348-.866ZM28.25 16a12.25 12.25 0 1 1-24.499 0 12.25 12.25 0 0 1 24.499 0Zm-1.75 0a10.5 10.5 0 1 0-21 0 10.5 10.5 0 0 0 21 0Z"></path></svg>';
 
 class IconPoundLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPoundLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--poundLarge', '', null, 'IconPoundLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--poundLarge', '', null, 'IconPoundLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--poundLarge');
         this.root.append(svg);
     }

package/dist/IconPrepare.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--prepare"><g clip-path="url(#prefix__clip0_6395_3745)"><path d="M13.574 12.813c.219-.342.341-.744.341-1.182 0-.262-.052-.56-.149-.875a1.414 1.414 0 0 0-.726-.857 1.476 1.476 0 0 0-.542-.149.634.634 0 0 1 .437-.525l-.402-1.251c-.49.157-1.33.726-1.357 1.793a1.593 1.593 0 0 0-.288-.008 4.788 4.788 0 0 0-.15-.587 2.412 2.412 0 0 0-1.26-1.39c.263-.158.517-.298.78-.482.42-.254.778-.814.56-1.418A161.98 161.98 0 0 0 10.1 4.02c1.391-.718 2.188-1.059 2.888-1.365L13.1 2.6l-.62-1.085-.088.035c-.85.368-1.75.77-3.36 1.61-2.888 1.505-5.067 2.774-6.86 3.999l-.044.035C1.315 7.79.99 8.262 1.053 8.744c.078.586.577.91 1.032.971.105.017.455.079 1.024.079h.061A3.94 3.94 0 0 0 4.23 12.69c.044.044.096.079.14.123H1.21l.35 1.312h12.915l.35-1.313h-1.26.009ZM8.98 4.604l.639 1.627s-.026.018-.035.027C8.77 6.8 8 7.212 7.283 7.536a.12.12 0 0 0-.035-.026l-.56-.464A1.657 1.657 0 0 0 5.2 6.722a79.426 79.426 0 0 1 3.78-2.117ZM3.476 8.534c-.472.026-.813 0-.997-.018a4.88 4.88 0 0 1 .376-.306c.473-.324.98-.648 1.514-.98a3.895 3.895 0 0 0-.893 1.304Zm2.87 3.272-.052.709a2.652 2.652 0 0 1-1.111-.718 2.597 2.597 0 0 1-.71-1.916c0-.07.027-.131.036-.201.07-.525.306-1.024.674-1.409.078-.079.148-.166.227-.236a.312.312 0 0 1 .201-.07c.088 0 .175.035.245.087l.027.018.525.429c.218.201.48.341.76.428.01 0 .018.01.027.01l.096.025c.228.07.385.28.385.517a.154.154 0 0 1-.07.131 2.838 2.838 0 0 0-1.26 2.179v.017Zm3.16-.831a2.635 2.635 0 0 1-1.9 1.61l.053-.683c.035-.48.28-.91.682-1.172.412-.271.657-.726.657-1.225 0-.184-.027-.359-.08-.525.263.122.482.35.578.639.167.472.167.962.01 1.365v-.009Zm2.178 1.584a.926.926 0 0 1-.928-.919c0-.088.018-.245.088-.473.009-.043.044-.06.061-.07.018 0 .035-.017.061-.017h.044c.289.105.49.149.665.149.131 0 .289-.026.656-.158.053-.017.088 0 .114 0a.1.1 0 0 1 .061.07c.08.236.088.394.088.482a.919.919 0 0 1-.919.918l.009.018Z"></path></g><defs><clipPath id="prefix__clip0_6395_3745"><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--prepare"><g clip-path="url(#prefix__clip0_6395_3745)"><path d="M13.574 12.813c.219-.342.341-.744.341-1.182 0-.262-.052-.56-.149-.875a1.414 1.414 0 0 0-.726-.857 1.476 1.476 0 0 0-.542-.149.634.634 0 0 1 .437-.525l-.402-1.251c-.49.157-1.33.726-1.357 1.793a1.593 1.593 0 0 0-.288-.008 4.788 4.788 0 0 0-.15-.587 2.412 2.412 0 0 0-1.26-1.39c.263-.158.517-.298.78-.482.42-.254.778-.814.56-1.418A161.98 161.98 0 0 0 10.1 4.02c1.391-.718 2.188-1.059 2.888-1.365L13.1 2.6l-.62-1.085-.088.035c-.85.368-1.75.77-3.36 1.61-2.888 1.505-5.067 2.774-6.86 3.999l-.044.035C1.315 7.79.99 8.262 1.053 8.744c.078.586.577.91 1.032.971.105.017.455.079 1.024.079h.061A3.94 3.94 0 0 0 4.23 12.69c.044.044.096.079.14.123H1.21l.35 1.312h12.915l.35-1.313h-1.26.009ZM8.98 4.604l.639 1.627s-.026.018-.035.027C8.77 6.8 8 7.212 7.283 7.536a.12.12 0 0 0-.035-.026l-.56-.464A1.657 1.657 0 0 0 5.2 6.722a79.426 79.426 0 0 1 3.78-2.117ZM3.476 8.534c-.472.026-.813 0-.997-.018a4.88 4.88 0 0 1 .376-.306c.473-.324.98-.648 1.514-.98a3.895 3.895 0 0 0-.893 1.304Zm2.87 3.272-.052.709a2.652 2.652 0 0 1-1.111-.718 2.597 2.597 0 0 1-.71-1.916c0-.07.027-.131.036-.201.07-.525.306-1.024.674-1.409.078-.079.148-.166.227-.236a.312.312 0 0 1 .201-.07c.088 0 .175.035.245.087l.027.018.525.429c.218.201.48.341.76.428.01 0 .018.01.027.01l.096.025c.228.07.385.28.385.517a.154.154 0 0 1-.07.131 2.838 2.838 0 0 0-1.26 2.179v.017Zm3.16-.831a2.635 2.635 0 0 1-1.9 1.61l.053-.683c.035-.48.28-.91.682-1.172.412-.271.657-.726.657-1.225 0-.184-.027-.359-.08-.525.263.122.482.35.578.639.167.472.167.962.01 1.365v-.009Zm2.178 1.584a.926.926 0 0 1-.928-.919c0-.088.018-.245.088-.473.009-.043.044-.06.061-.07.018 0 .035-.017.061-.017h.044c.289.105.49.149.665.149.131 0 .289-.026.656-.158.053-.017.088 0 .114 0a.1.1 0 0 1 .061.07c.08.236.088.394.088.482a.919.919 0 0 1-.919.918l.009.018Z"></path></g><defs><clipPath id="prefix__clip0_6395_3745"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconPrepare extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPrepare extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--prepare', '', null, 'IconPrepare');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--prepare', '', null, 'IconPrepare');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--prepare');
         this.root.append(svg);
     }

package/dist/IconPrepareLarge.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--prepareLarge"><path d="M23.263 24.552a3.527 3.527 0 0 0 1.12-2.58c0-.42-.079-.902-.245-1.427a2.192 2.192 0 0 0-1.12-1.313 2.268 2.268 0 0 0-1.243-.218c.21-.499.7-.709.832-.753l-.272-.831-.262-.831a3.233 3.233 0 0 0-1.785 1.487 3.885 3.885 0 0 0-2.214-1.968c.56-.324 1.129-.665 1.715-1.05.656-.403 1.207-1.26.875-2.197-.175-.49-.849-2.213-1.286-3.334 2.45-1.26 3.841-1.872 5.084-2.406L23.587 5.6c-1.34.577-2.897 1.269-5.714 2.747-4.909 2.564-8.619 4.726-11.673 6.808l-.07.053c-1.286.944-1.82 1.688-1.724 2.432.132.91.91 1.409 1.61 1.496.202.044.928.158 2.065.131 0 .07-.017.14-.026.21-.105 1.715.534 3.448 1.733 4.743.105.114.219.219.332.324H4.625l.446 1.75H26.93l.446-1.742h-4.112Zm-14.77-7.07c-1.365.088-2.144-.06-2.162-.06l-.087-.018c.14-.158.402-.42.927-.805 2.818-1.925 6.213-3.92 10.64-6.248.447 1.129 1.042 2.66 1.208 3.071a.589.589 0 0 1-.166.175 27.665 27.665 0 0 1-4.095 2.258c-.044-.035-.096-.053-.131-.088l-.963-.796c-.971-.805-2.362-.822-3.307-.035A6.41 6.41 0 0 0 8.5 17.5l-.008-.017Zm4.97 5.417-.105 1.505a4.788 4.788 0 0 1-2.293-1.374c-.883-.945-1.347-2.205-1.269-3.448a4.704 4.704 0 0 1 .84-2.398c.237-.34.517-.655.84-.918a.782.782 0 0 1 .49-.175c.202 0 .412.07.578.21l.332.272.604.498c.35.315.779.551 1.225.691.009 0 .027.01.035.018h.035l.14.052c.49.15.823.595.823 1.112a.52.52 0 0 1-.228.428 4.577 4.577 0 0 0-2.038 3.518l-.01.009Zm5.145-3.649a2.15 2.15 0 0 0-1.111 1.313c-.158.516-.237.988-.237 1.4 0 .498.105.98.289 1.408a4.697 4.697 0 0 1-2.441 1.129l.105-1.479a2.853 2.853 0 0 1 1.269-2.187 2.252 2.252 0 0 0 1.006-1.881c0-.456-.105-.893-.289-1.278a2.144 2.144 0 0 1 1.627 1.383c.01.035.018.06.027.096-.079.026-.158.052-.228.096h-.017Zm2.213 4.532a1.8 1.8 0 0 1-1.04-.332 1.816 1.816 0 0 1-.78-1.488c0-.236.053-.542.158-.883a.489.489 0 0 1 .228-.271.443.443 0 0 1 .218-.053c.053 0 .105 0 .158.026.42.149.717.219.962.228h.079c.158-.026.42-.026 1.041-.254a.457.457 0 0 1 .377.026.497.497 0 0 1 .236.271c.105.35.166.657.166.902 0 1.006-.814 1.82-1.82 1.82l.018.008Z"></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--prepareLarge"><path d="M23.263 24.552a3.527 3.527 0 0 0 1.12-2.58c0-.42-.079-.902-.245-1.427a2.192 2.192 0 0 0-1.12-1.313 2.268 2.268 0 0 0-1.243-.218c.21-.499.7-.709.832-.753l-.272-.831-.262-.831a3.233 3.233 0 0 0-1.785 1.487 3.885 3.885 0 0 0-2.214-1.968c.56-.324 1.129-.665 1.715-1.05.656-.403 1.207-1.26.875-2.197-.175-.49-.849-2.213-1.286-3.334 2.45-1.26 3.841-1.872 5.084-2.406L23.587 5.6c-1.34.577-2.897 1.269-5.714 2.747-4.909 2.564-8.619 4.726-11.673 6.808l-.07.053c-1.286.944-1.82 1.688-1.724 2.432.132.91.91 1.409 1.61 1.496.202.044.928.158 2.065.131 0 .07-.017.14-.026.21-.105 1.715.534 3.448 1.733 4.743.105.114.219.219.332.324H4.625l.446 1.75H26.93l.446-1.742h-4.112Zm-14.77-7.07c-1.365.088-2.144-.06-2.162-.06l-.087-.018c.14-.158.402-.42.927-.805 2.818-1.925 6.213-3.92 10.64-6.248.447 1.129 1.042 2.66 1.208 3.071a.589.589 0 0 1-.166.175 27.665 27.665 0 0 1-4.095 2.258c-.044-.035-.096-.053-.131-.088l-.963-.796c-.971-.805-2.362-.822-3.307-.035A6.41 6.41 0 0 0 8.5 17.5l-.008-.017Zm4.97 5.417-.105 1.505a4.788 4.788 0 0 1-2.293-1.374c-.883-.945-1.347-2.205-1.269-3.448a4.704 4.704 0 0 1 .84-2.398c.237-.34.517-.655.84-.918a.782.782 0 0 1 .49-.175c.202 0 .412.07.578.21l.332.272.604.498c.35.315.779.551 1.225.691.009 0 .027.01.035.018h.035l.14.052c.49.15.823.595.823 1.112a.52.52 0 0 1-.228.428 4.577 4.577 0 0 0-2.038 3.518l-.01.009Zm5.145-3.649a2.15 2.15 0 0 0-1.111 1.313c-.158.516-.237.988-.237 1.4 0 .498.105.98.289 1.408a4.697 4.697 0 0 1-2.441 1.129l.105-1.479a2.853 2.853 0 0 1 1.269-2.187 2.252 2.252 0 0 0 1.006-1.881c0-.456-.105-.893-.289-1.278a2.144 2.144 0 0 1 1.627 1.383c.01.035.018.06.027.096-.079.026-.158.052-.228.096h-.017Zm2.213 4.532a1.8 1.8 0 0 1-1.04-.332 1.816 1.816 0 0 1-.78-1.488c0-.236.053-.542.158-.883a.489.489 0 0 1 .228-.271.443.443 0 0 1 .218-.053c.053 0 .105 0 .158.026.42.149.717.219.962.228h.079c.158-.026.42-.026 1.041-.254a.457.457 0 0 1 .377.026.497.497 0 0 1 .236.271c.105.35.166.657.166.902 0 1.006-.814 1.82-1.82 1.82l.018.008Z"></path></svg>';
 
 class IconPrepareLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPrepareLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--prepareLarge', '', null, 'IconPrepareLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--prepareLarge', '', null, 'IconPrepareLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--prepareLarge');
         this.root.append(svg);
     }