@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/dist/IconSocialYoutubeStatic.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--youtubeStatic"><path fill="red" d="M13.95 4.985a1.567 1.567 0 0 0-1.093-1.118c-.964-.264-4.831-.264-4.831-.264s-3.867 0-4.831.264a1.567 1.567 0 0 0-1.093 1.118c-.259.987-.259 3.045-.259 3.045s0 2.058.259 3.045c.142.544.56.973 1.093 1.119.964.264 4.83.264 4.83.264s3.867 0 4.832-.264a1.567 1.567 0 0 0 1.093-1.119c.258-.986.258-3.045.258-3.045s0-2.058-.258-3.045Z"></path><path fill="#fff" d="M6.761 9.899 9.993 8.03 6.761 6.161V9.9Z"></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--youtubeStatic"><path fill="red" d="M13.95 4.985a1.567 1.567 0 0 0-1.093-1.118c-.964-.264-4.831-.264-4.831-.264s-3.867 0-4.831.264a1.567 1.567 0 0 0-1.093 1.118c-.259.987-.259 3.045-.259 3.045s0 2.058.259 3.045c.142.544.56.973 1.093 1.119.964.264 4.83.264 4.83.264s3.867 0 4.832-.264a1.567 1.567 0 0 0 1.093-1.119c.258-.986.258-3.045.258-3.045s0-2.058-.258-3.045Z"></path><path fill="#fff" d="M6.761 9.899 9.993 8.03 6.761 6.161V9.9Z"></path></svg>';
 
 class IconSocialYoutubeStatic extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialYoutubeStatic extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--youtubeStatic', '', null, 'IconSocialYoutubeStatic');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--youtubeStatic', '', null, 'IconSocialYoutubeStatic');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--youtubeStatic');
         this.root.append(svg);
     }

package/dist/IconSocialYoutubeStaticLarge.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--youtubeStaticLarge"><path fill="red" d="M27.9 9.97a3.134 3.134 0 0 0-2.186-2.236c-1.928-.529-9.662-.529-9.662-.529s-7.733 0-9.662.529A3.133 3.133 0 0 0 4.204 9.97c-.517 1.973-.517 6.09-.517 6.09s0 4.116.517 6.09a3.134 3.134 0 0 0 2.186 2.236c1.929.529 9.662.529 9.662.529s7.734 0 9.662-.529a3.134 3.134 0 0 0 2.187-2.237c.516-1.973.516-6.09.516-6.09s0-4.116-.516-6.09Z"></path><path fill="#fff" d="m13.523 19.798 6.464-3.738-6.464-3.737v7.475Z"></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--youtubeStaticLarge"><path fill="red" d="M27.9 9.97a3.134 3.134 0 0 0-2.186-2.236c-1.928-.529-9.662-.529-9.662-.529s-7.733 0-9.662.529A3.133 3.133 0 0 0 4.204 9.97c-.517 1.973-.517 6.09-.517 6.09s0 4.116.517 6.09a3.134 3.134 0 0 0 2.186 2.236c1.929.529 9.662.529 9.662.529s7.734 0 9.662-.529a3.134 3.134 0 0 0 2.187-2.237c.516-1.973.516-6.09.516-6.09s0-4.116-.516-6.09Z"></path><path fill="#fff" d="m13.523 19.798 6.464-3.738-6.464-3.737v7.475Z"></path></svg>';
 
 class IconSocialYoutubeStaticLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialYoutubeStaticLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--youtubeStaticLarge', '', null, 'IconSocialYoutubeStaticLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--youtubeStaticLarge', '', null, 'IconSocialYoutubeStaticLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--youtubeStaticLarge');
         this.root.append(svg);
     }

package/dist/IconSort.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--sort"><path d="M9.75 11.719h-3.5v1.312h3.5V11.72Z"></path><path d="M12.375 7.344h-8.75v1.312h8.75V7.344Z"></path><path d="M15 2.969H1V4.28h14V2.97Z"></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--sort"><path d="M9.75 11.719h-3.5v1.312h3.5V11.72Z"></path><path d="M12.375 7.344h-8.75v1.312h8.75V7.344Z"></path><path d="M15 2.969H1V4.28h14V2.97Z"></path></svg>';
 
 class IconSort extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSort extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sort', '', null, 'IconSort');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sort', '', null, 'IconSort');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sort');
         this.root.append(svg);
     }

package/dist/IconSortAscending.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--sortAscending"><path d="M1 7.344h6.816l-.551 1.312H1V7.344Zm8.286-3.5H1v1.312h7.735l.551-1.312ZM1 12.156h4.786l.56-1.312H1v1.312Zm12.994-2.502L12.156 11.5V6.25h-1.312v5.25L9.006 9.654l-.927.971 2.625 2.625a1.075 1.075 0 0 0 1.54 0l2.625-2.625-.875-.971Z"></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--sortAscending"><path d="M1 7.344h6.816l-.551 1.312H1V7.344Zm8.286-3.5H1v1.312h7.735l.551-1.312ZM1 12.156h4.786l.56-1.312H1v1.312Zm12.994-2.502L12.156 11.5V6.25h-1.312v5.25L9.006 9.654l-.927.971 2.625 2.625a1.075 1.075 0 0 0 1.54 0l2.625-2.625-.875-.971Z"></path></svg>';
 
 class IconSortAscending extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSortAscending extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sortAscending', '', null, 'IconSortAscending');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sortAscending', '', null, 'IconSortAscending');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sortAscending');
         this.root.append(svg);
     }

package/dist/IconSortAscendingLarge.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--sortAscendingLarge"><path d="M18.03 10.75H2V9h16.765l-.735 1.75ZM2 23h10.867l.735-1.75H2V23Zm0-6.125h13.449l.735-1.75H2v1.75Zm25.891 3.141-4.016 4.078V12.5h-1.75v11.524l-4.016-4.008-1.234 1.234 4.926 4.935a1.75 1.75 0 0 0 2.398 0l4.926-4.935-1.234-1.234Z"></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--sortAscendingLarge"><path d="M18.03 10.75H2V9h16.765l-.735 1.75ZM2 23h10.867l.735-1.75H2V23Zm0-6.125h13.449l.735-1.75H2v1.75Zm25.891 3.141-4.016 4.078V12.5h-1.75v11.524l-4.016-4.008-1.234 1.234 4.926 4.935a1.75 1.75 0 0 0 2.398 0l4.926-4.935-1.234-1.234Z"></path></svg>';
 
 class IconSortAscendingLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSortAscendingLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sortAscendingLarge', '', null, 'IconSortAscendingLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sortAscendingLarge', '', null, 'IconSortAscendingLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sortAscendingLarge');
         this.root.append(svg);
     }

package/dist/IconSortDescending.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--sortDescending"><path d="M1 9.23h6.817l-.551-1.312H1V9.23Zm8.287 3.5H1v-1.312h7.736l.551 1.312ZM1 4.418h4.787l.56 1.312H1V4.418ZM13.995 6.92l-1.838-1.846v5.25h-1.312v-5.25L9.007 6.92l-.928-.97 2.626-2.626a1.077 1.077 0 0 1 1.54 0L14.87 5.95l-.875.971Z"></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--sortDescending"><path d="M1 9.23h6.817l-.551-1.312H1V9.23Zm8.287 3.5H1v-1.312h7.736l.551 1.312ZM1 4.418h4.787l.56 1.312H1V4.418ZM13.995 6.92l-1.838-1.846v5.25h-1.312v-5.25L9.007 6.92l-.928-.97 2.626-2.626a1.077 1.077 0 0 1 1.54 0L14.87 5.95l-.875.971Z"></path></svg>';
 
 class IconSortDescending extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSortDescending extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sortDescending', '', null, 'IconSortDescending');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sortDescending', '', null, 'IconSortDescending');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sortDescending');
         this.root.append(svg);
     }

package/dist/IconSortDescendingLarge.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--sortDescendingLarge"><path d="M18.033 22.91H2v1.75h16.768l-.735-1.75ZM2 10.66h10.87l.735 1.75H2v-1.75Zm0 6.125h13.451l.735 1.75H2v-1.75Zm25.896-3.141-4.017-4.078V21.16h-1.75V9.636l-4.017 4.008-1.234-1.234 4.927-4.935a1.75 1.75 0 0 1 2.398 0l4.927 4.935-1.234 1.234Z"></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--sortDescendingLarge"><path d="M18.033 22.91H2v1.75h16.768l-.735-1.75ZM2 10.66h10.87l.735 1.75H2v-1.75Zm0 6.125h13.451l.735 1.75H2v-1.75Zm25.896-3.141-4.017-4.078V21.16h-1.75V9.636l-4.017 4.008-1.234-1.234 4.927-4.935a1.75 1.75 0 0 1 2.398 0l4.927 4.935-1.234 1.234Z"></path></svg>';
 
 class IconSortDescendingLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSortDescendingLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sortDescendingLarge', '', null, 'IconSortDescendingLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sortDescendingLarge', '', null, 'IconSortDescendingLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sortDescendingLarge');
         this.root.append(svg);
     }

package/dist/IconSortLarge.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--sortLarge"><path d="M18.625 20.125h-5.25v1.75h5.25v-1.75Z"></path><path d="M5.5 6.375v1.75h22.75v-1.75H5.5Z"></path><path d="M5.5 6.375H3.75v1.75H5.5v-1.75Z"></path><path d="M23 13.25H9V15h14v-1.75Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--sortLarge"><path d="M18.625 20.125h-5.25v1.75h5.25v-1.75Z"></path><path d="M5.5 6.375v1.75h22.75v-1.75H5.5Z"></path><path d="M5.5 6.375H3.75v1.75H5.5v-1.75Z"></path><path d="M23 13.25H9V15h14v-1.75Z"></path></svg>';
 
 class IconSortLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSortLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sortLarge', '', null, 'IconSortLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sortLarge', '', null, 'IconSortLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sortLarge');
         this.root.append(svg);
     }

package/dist/IconSoundOff.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--soundOff"><path d="M11.281 4.736v-3.5H9.75l-.166.167A21.623 21.623 0 0 1 7.598 3.1 23.625 23.625 0 0 1 5.19 4.719H2.75A1.54 1.54 0 0 0 1.219 6.25v3.5a1.54 1.54 0 0 0 1.531 1.531h2.441c.837.487 1.64 1.028 2.407 1.619a22.864 22.864 0 0 1 1.986 1.697l.192.184h1.505v-3.5L9.97 12.594v.586c-.508-.464-1.033-.875-1.566-1.313a26.789 26.789 0 0 0-2.372-1.6V5.75c.82-.49 1.61-1.024 2.372-1.601.533-.411 1.058-.875 1.566-1.312v.586l1.312 1.312ZM4.72 9.97H2.75a.219.219 0 0 1-.219-.219v-3.5a.219.219 0 0 1 .219-.219h1.969V9.97Z"></path><path d="M14.633 6.058 12.69 8l1.943 1.943-.928.927-1.943-1.942L9.82 10.87l-.928-.927L10.835 8 8.892 6.058l.928-.928 1.942 1.943 1.943-1.943.928.928Z"></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--soundOff"><path d="M11.281 4.736v-3.5H9.75l-.166.167A21.623 21.623 0 0 1 7.598 3.1 23.625 23.625 0 0 1 5.19 4.719H2.75A1.54 1.54 0 0 0 1.219 6.25v3.5a1.54 1.54 0 0 0 1.531 1.531h2.441c.837.487 1.64 1.028 2.407 1.619a22.864 22.864 0 0 1 1.986 1.697l.192.184h1.505v-3.5L9.97 12.594v.586c-.508-.464-1.033-.875-1.566-1.313a26.789 26.789 0 0 0-2.372-1.6V5.75c.82-.49 1.61-1.024 2.372-1.601.533-.411 1.058-.875 1.566-1.312v.586l1.312 1.312ZM4.72 9.97H2.75a.219.219 0 0 1-.219-.219v-3.5a.219.219 0 0 1 .219-.219h1.969V9.97Z"></path><path d="M14.633 6.058 12.69 8l1.943 1.943-.928.927-1.943-1.942L9.82 10.87l-.928-.927L10.835 8 8.892 6.058l.928-.928 1.942 1.943 1.943-1.943.928.928Z"></path></svg>';
 
 class IconSoundOff extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSoundOff extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--soundOff', '', null, 'IconSoundOff');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--soundOff', '', null, 'IconSoundOff');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--soundOff');
         this.root.append(svg);
     }

package/dist/IconSoundOffLarge.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--soundOffLarge"><path d="M20.375 22.79v3.658a48.52 48.52 0 0 0-3.841-3.264 48.651 48.651 0 0 0-4.909-3.308v-7.752c1.703-1 3.343-2.105 4.909-3.308a48.518 48.518 0 0 0 3.841-3.264v3.754l.508.517 1.242 1.233V3.75h-2.398l-.227.245a48.276 48.276 0 0 1-4.008 3.439 49.96 49.96 0 0 1-4.987 3.316H7.25a2.625 2.625 0 0 0-2.625 2.625v5.25A2.625 2.625 0 0 0 7.25 21.25h3.255a48.311 48.311 0 0 1 8.995 6.755l.254.245h2.371v-7.21l-1.75 1.75Zm-10.5-3.29H7.25a.875.875 0 0 1-.875-.875v-5.25a.875.875 0 0 1 .875-.875h2.625v7Z"></path><path d="M28.399 12.246 24.645 16l3.754 3.754-1.234 1.242-3.762-3.762-3.754 3.762-1.234-1.242L22.169 16l-3.754-3.754 1.234-1.242 3.753 3.762 3.763-3.762 1.234 1.242Z"></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--soundOffLarge"><path d="M20.375 22.79v3.658a48.52 48.52 0 0 0-3.841-3.264 48.651 48.651 0 0 0-4.909-3.308v-7.752c1.703-1 3.343-2.105 4.909-3.308a48.518 48.518 0 0 0 3.841-3.264v3.754l.508.517 1.242 1.233V3.75h-2.398l-.227.245a48.276 48.276 0 0 1-4.008 3.439 49.96 49.96 0 0 1-4.987 3.316H7.25a2.625 2.625 0 0 0-2.625 2.625v5.25A2.625 2.625 0 0 0 7.25 21.25h3.255a48.311 48.311 0 0 1 8.995 6.755l.254.245h2.371v-7.21l-1.75 1.75Zm-10.5-3.29H7.25a.875.875 0 0 1-.875-.875v-5.25a.875.875 0 0 1 .875-.875h2.625v7Z"></path><path d="M28.399 12.246 24.645 16l3.754 3.754-1.234 1.242-3.762-3.762-3.754 3.762-1.234-1.242L22.169 16l-3.754-3.754 1.234-1.242 3.753 3.762 3.763-3.762 1.234 1.242Z"></path></svg>';
 
 class IconSoundOffLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSoundOffLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--soundOffLarge', '', null, 'IconSoundOffLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--soundOffLarge', '', null, 'IconSoundOffLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--soundOffLarge');
         this.root.append(svg);
     }

package/dist/IconSoundOn.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--soundOn"><path d="m11.5 1.219-.193.183A21.624 21.624 0 0 1 9.348 3.1a23.625 23.625 0 0 1-2.406 1.619H4.5A1.54 1.54 0 0 0 2.969 6.25v3.5A1.54 1.54 0 0 0 4.5 11.281h2.441c.837.487 1.64 1.028 2.407 1.619a22.87 22.87 0 0 1 1.986 1.697l.192.184h1.505V1.22H11.5ZM4.281 9.75v-3.5a.219.219 0 0 1 .219-.219h1.969V9.97H4.5a.219.219 0 0 1-.219-.219Zm7.438 3.412c-.508-.463-1.033-.875-1.566-1.312a26.812 26.812 0 0 0-2.372-1.601V5.75c.82-.49 1.61-1.024 2.372-1.601.533-.411 1.058-.875 1.566-1.313v10.325Z"></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--soundOn"><path d="m11.5 1.219-.193.183A21.624 21.624 0 0 1 9.348 3.1a23.625 23.625 0 0 1-2.406 1.619H4.5A1.54 1.54 0 0 0 2.969 6.25v3.5A1.54 1.54 0 0 0 4.5 11.281h2.441c.837.487 1.64 1.028 2.407 1.619a22.87 22.87 0 0 1 1.986 1.697l.192.184h1.505V1.22H11.5ZM4.281 9.75v-3.5a.219.219 0 0 1 .219-.219h1.969V9.97H4.5a.219.219 0 0 1-.219-.219Zm7.438 3.412c-.508-.463-1.033-.875-1.566-1.312a26.812 26.812 0 0 0-2.372-1.601V5.75c.82-.49 1.61-1.024 2.372-1.601.533-.411 1.058-.875 1.566-1.313v10.325Z"></path></svg>';
 
 class IconSoundOn extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSoundOn extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--soundOn', '', null, 'IconSoundOn');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--soundOn', '', null, 'IconSoundOn');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--soundOn');
         this.root.append(svg);
     }

package/dist/IconSoundOnFilled.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--soundOnFilled"><path d="m11.5 1.219-.193.183A21.624 21.624 0 0 1 9.348 3.1a23.625 23.625 0 0 1-2.406 1.619H4.5A1.54 1.54 0 0 0 2.969 6.25v3.5A1.54 1.54 0 0 0 4.5 11.281h2.441c.837.487 1.64 1.028 2.407 1.619a22.87 22.87 0 0 1 1.986 1.697l.192.184h1.505V1.22H11.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--soundOnFilled"><path d="m11.5 1.219-.193.183A21.624 21.624 0 0 1 9.348 3.1a23.625 23.625 0 0 1-2.406 1.619H4.5A1.54 1.54 0 0 0 2.969 6.25v3.5A1.54 1.54 0 0 0 4.5 11.281h2.441c.837.487 1.64 1.028 2.407 1.619a22.87 22.87 0 0 1 1.986 1.697l.192.184h1.505V1.22H11.5Z"></path></svg>';
 
 class IconSoundOnFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSoundOnFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--soundOnFilled', '', null, 'IconSoundOnFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--soundOnFilled', '', null, 'IconSoundOnFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--soundOnFilled');
         this.root.append(svg);
     }

package/dist/IconSoundOnFilledLarge.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--soundOnFilledLarge"><path d="M21.688 3.75h-2.39l-.253.245a49.875 49.875 0 0 1-4.016 3.439 48.477 48.477 0 0 1-4.961 3.316H6.813a2.625 2.625 0 0 0-2.625 2.625v5.25a2.625 2.625 0 0 0 2.625 2.625h3.255a47.09 47.09 0 0 1 4.96 3.316 48.293 48.293 0 0 1 4.008 3.439l.254.245h2.398V3.75Z"></path><path d="M23.438 10.129v1.864a4.375 4.375 0 0 1 0 8.014v1.864a6.125 6.125 0 0 0 0-11.742Z"></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--soundOnFilledLarge"><path d="M21.688 3.75h-2.39l-.253.245a49.875 49.875 0 0 1-4.016 3.439 48.477 48.477 0 0 1-4.961 3.316H6.813a2.625 2.625 0 0 0-2.625 2.625v5.25a2.625 2.625 0 0 0 2.625 2.625h3.255a47.09 47.09 0 0 1 4.96 3.316 48.293 48.293 0 0 1 4.008 3.439l.254.245h2.398V3.75Z"></path><path d="M23.438 10.129v1.864a4.375 4.375 0 0 1 0 8.014v1.864a6.125 6.125 0 0 0 0-11.742Z"></path></svg>';
 
 class IconSoundOnFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSoundOnFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--soundOnFilledLarge', '', null, 'IconSoundOnFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--soundOnFilledLarge', '', null, 'IconSoundOnFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--soundOnFilledLarge');
         this.root.append(svg);
     }

package/dist/IconSoundOnLarge.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--soundOnLarge"><path d="M18.625 3.995a48.276 48.276 0 0 1-4.008 3.439A49.96 49.96 0 0 1 9.63 10.75H6.375a2.625 2.625 0 0 0-2.625 2.625v5.25a2.625 2.625 0 0 0 2.625 2.625H9.63a48.311 48.311 0 0 1 8.995 6.755l.254.245h2.371V3.75h-2.398l-.227.245ZM5.5 18.625v-5.25a.875.875 0 0 1 .875-.875H9v7H6.375a.875.875 0 0 1-.875-.875Zm14 7.823a48.503 48.503 0 0 0-3.841-3.264 48.638 48.638 0 0 0-4.909-3.308v-7.752c1.703-1 3.343-2.105 4.909-3.308A48.502 48.502 0 0 0 19.5 5.552v20.896ZM27.375 16A6.125 6.125 0 0 1 23 21.871v-1.863a4.375 4.375 0 0 0 0-8.015v-1.864A6.125 6.125 0 0 1 27.375 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--soundOnLarge"><path d="M18.625 3.995a48.276 48.276 0 0 1-4.008 3.439A49.96 49.96 0 0 1 9.63 10.75H6.375a2.625 2.625 0 0 0-2.625 2.625v5.25a2.625 2.625 0 0 0 2.625 2.625H9.63a48.311 48.311 0 0 1 8.995 6.755l.254.245h2.371V3.75h-2.398l-.227.245ZM5.5 18.625v-5.25a.875.875 0 0 1 .875-.875H9v7H6.375a.875.875 0 0 1-.875-.875Zm14 7.823a48.503 48.503 0 0 0-3.841-3.264 48.638 48.638 0 0 0-4.909-3.308v-7.752c1.703-1 3.343-2.105 4.909-3.308A48.502 48.502 0 0 0 19.5 5.552v20.896ZM27.375 16A6.125 6.125 0 0 1 23 21.871v-1.863a4.375 4.375 0 0 0 0-8.015v-1.864A6.125 6.125 0 0 1 27.375 16Z"></path></svg>';
 
 class IconSoundOnLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSoundOnLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--soundOnLarge', '', null, 'IconSoundOnLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--soundOnLarge', '', null, 'IconSoundOnLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--soundOnLarge');
         this.root.append(svg);
     }

package/dist/IconSpicy.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--spicy"><path d="M4.106 13.758a3.036 3.036 0 0 1-2.625-1.138l-.429-.682.762-.29c2.275-.874 3.5-3.22 4.506-5.25a12.959 12.959 0 0 1 1.96-3.15 3.5 3.5 0 0 1 5.075 0 3.71 3.71 0 0 1 0 5.146c-1.855 1.82-5.154 4.287-7.201 4.987a6.38 6.38 0 0 1-2.048.377Zm-.761-1.383c.8.175 1.632.102 2.389-.21 1.75-.612 5.005-2.992 6.676-4.707a2.389 2.389 0 0 0 0-3.317 2.275 2.275 0 0 0-3.194 0 12.25 12.25 0 0 0-1.75 2.835c-.918 1.838-2.091 4.104-4.121 5.399Z"></path><path d="m13.145 3.783-1.085-.736A3.789 3.789 0 0 1 15 1.22V2.53a2.538 2.538 0 0 0-1.855 1.252Z"></path><path d="M13.136 6.74a3.631 3.631 0 0 1-3.631-3.631 1.75 1.75 0 0 1 0-.403l1.277.298-.638-.149.639.14v.114A2.319 2.319 0 0 0 13.1 5.428c.146.014.292.014.438 0l.297 1.277a3.325 3.325 0 0 1-.7.035Z"></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--spicy"><path d="M4.106 13.758a3.036 3.036 0 0 1-2.625-1.138l-.429-.682.762-.29c2.275-.874 3.5-3.22 4.506-5.25a12.959 12.959 0 0 1 1.96-3.15 3.5 3.5 0 0 1 5.075 0 3.71 3.71 0 0 1 0 5.146c-1.855 1.82-5.154 4.287-7.201 4.987a6.38 6.38 0 0 1-2.048.377Zm-.761-1.383c.8.175 1.632.102 2.389-.21 1.75-.612 5.005-2.992 6.676-4.707a2.389 2.389 0 0 0 0-3.317 2.275 2.275 0 0 0-3.194 0 12.25 12.25 0 0 0-1.75 2.835c-.918 1.838-2.091 4.104-4.121 5.399Z"></path><path d="m13.145 3.783-1.085-.736A3.789 3.789 0 0 1 15 1.22V2.53a2.538 2.538 0 0 0-1.855 1.252Z"></path><path d="M13.136 6.74a3.631 3.631 0 0 1-3.631-3.631 1.75 1.75 0 0 1 0-.403l1.277.298-.638-.149.639.14v.114A2.319 2.319 0 0 0 13.1 5.428c.146.014.292.014.438 0l.297 1.277a3.325 3.325 0 0 1-.7.035Z"></path></svg>';
 
 class IconSpicy extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSpicy extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--spicy', '', null, 'IconSpicy');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--spicy', '', null, 'IconSpicy');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--spicy');
         this.root.append(svg);
     }

package/dist/IconSpicyLarge.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--spicyLarge"><path d="M8.37 26.106c-3.168 0-4.375-1.829-4.48-1.934l-.586-.875 1.006-.385c4.279-1.662 6.44-6.037 8.4-9.843a23.407 23.407 0 0 1 3.5-5.67 6.126 6.126 0 0 1 8.794 0 6.44 6.44 0 0 1 0 8.942c-3.29 3.378-9.302 7.875-12.994 9.091a11.28 11.28 0 0 1-3.64.674Zm-2.118-2.231c.875.446 2.512.779 5.198-.131 3.404-1.164 9.222-5.495 12.311-8.663a4.672 4.672 0 0 0 0-6.492 4.376 4.376 0 0 0-6.282 0 22.226 22.226 0 0 0-3.212 5.25c-1.872 3.745-3.98 7.918-8.015 10.036Z"></path><path d="m22.921 11.109-1.592-.718c2.87-6.44 6.755-6.51 6.921-6.51v1.75c-.105 0-2.957.167-5.329 5.478Z"></path><path d="M25.056 12.806a6.011 6.011 0 0 1-6.002-6.002 2.77 2.77 0 0 1 .052-.63l1.706.385a2.003 2.003 0 0 0 0 .245 4.261 4.261 0 0 0 4.253 4.252c.277.004.553-.025.822-.087l.386 1.706a5.25 5.25 0 0 1-1.217.131Z"></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--spicyLarge"><path d="M8.37 26.106c-3.168 0-4.375-1.829-4.48-1.934l-.586-.875 1.006-.385c4.279-1.662 6.44-6.037 8.4-9.843a23.407 23.407 0 0 1 3.5-5.67 6.126 6.126 0 0 1 8.794 0 6.44 6.44 0 0 1 0 8.942c-3.29 3.378-9.302 7.875-12.994 9.091a11.28 11.28 0 0 1-3.64.674Zm-2.118-2.231c.875.446 2.512.779 5.198-.131 3.404-1.164 9.222-5.495 12.311-8.663a4.672 4.672 0 0 0 0-6.492 4.376 4.376 0 0 0-6.282 0 22.226 22.226 0 0 0-3.212 5.25c-1.872 3.745-3.98 7.918-8.015 10.036Z"></path><path d="m22.921 11.109-1.592-.718c2.87-6.44 6.755-6.51 6.921-6.51v1.75c-.105 0-2.957.167-5.329 5.478Z"></path><path d="M25.056 12.806a6.011 6.011 0 0 1-6.002-6.002 2.77 2.77 0 0 1 .052-.63l1.706.385a2.003 2.003 0 0 0 0 .245 4.261 4.261 0 0 0 4.253 4.252c.277.004.553-.025.822-.087l.386 1.706a5.25 5.25 0 0 1-1.217.131Z"></path></svg>';
 
 class IconSpicyLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSpicyLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--spicyLarge', '', null, 'IconSpicyLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--spicyLarge', '', null, 'IconSpicyLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--spicyLarge');
         this.root.append(svg);
     }

package/dist/IconSponsoredFilled.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--sponsoredFilled"><path d="M12.375 2.094h-8.75a1.54 1.54 0 0 0-1.531 1.531v8.75a1.54 1.54 0 0 0 1.531 1.531h8.75a1.54 1.54 0 0 0 1.531-1.531v-8.75a1.54 1.54 0 0 0-1.531-1.531ZM10.564 9.75H9.25V7.668L7.59 9.338a.525.525 0 0 0 0 .876l-.937.875a1.828 1.828 0 0 1 0-2.678L8.316 6.74H6.25V5.427h3.22a1.094 1.094 0 0 1 1.094 1.094V9.75Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--sponsoredFilled"><path d="M12.375 2.094h-8.75a1.54 1.54 0 0 0-1.531 1.531v8.75a1.54 1.54 0 0 0 1.531 1.531h8.75a1.54 1.54 0 0 0 1.531-1.531v-8.75a1.54 1.54 0 0 0-1.531-1.531ZM10.564 9.75H9.25V7.668L7.59 9.338a.525.525 0 0 0 0 .876l-.937.875a1.828 1.828 0 0 1 0-2.678L8.316 6.74H6.25V5.427h3.22a1.094 1.094 0 0 1 1.094 1.094V9.75Z"></path></svg>';
 
 class IconSponsoredFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSponsoredFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sponsoredFilled', '', null, 'IconSponsoredFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sponsoredFilled', '', null, 'IconSponsoredFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sponsoredFilled');
         this.root.append(svg);
     }

package/dist/IconSponsoredFilledLarge.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--sponsoredFilledLarge"><path d="M24.75 4.625H7.25A2.625 2.625 0 0 0 4.625 7.25v17.5a2.625 2.625 0 0 0 2.625 2.625h17.5a2.625 2.625 0 0 0 2.625-2.625V7.25a2.625 2.625 0 0 0-2.625-2.625Zm-4.375 14h-1.75v-4.944l-3.754 3.754a2.255 2.255 0 0 0 0 3.194L13.63 21.87a4.026 4.026 0 0 1 0-5.67L17.33 12.5H12.5v-1.75h6.563a1.313 1.313 0 0 1 1.312 1.313v6.562Z"></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--sponsoredFilledLarge"><path d="M24.75 4.625H7.25A2.625 2.625 0 0 0 4.625 7.25v17.5a2.625 2.625 0 0 0 2.625 2.625h17.5a2.625 2.625 0 0 0 2.625-2.625V7.25a2.625 2.625 0 0 0-2.625-2.625Zm-4.375 14h-1.75v-4.944l-3.754 3.754a2.255 2.255 0 0 0 0 3.194L13.63 21.87a4.026 4.026 0 0 1 0-5.67L17.33 12.5H12.5v-1.75h6.563a1.313 1.313 0 0 1 1.312 1.313v6.562Z"></path></svg>';
 
 class IconSponsoredFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSponsoredFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sponsoredFilledLarge', '', null, 'IconSponsoredFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sponsoredFilledLarge', '', null, 'IconSponsoredFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sponsoredFilledLarge');
         this.root.append(svg);
     }

package/dist/IconStampcard.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--stampcard"><path d="M13.941 10.039c-.043.061-.183.254-.218.332a3.248 3.248 0 0 0-.105.473c-.097.569-.22 1.338-.832 1.951-.603.604-1.4.735-1.925.822-.157.027-.393.062-.49.105-.07.027-.27.176-.376.245-.437.324-1.111.806-1.995.806-.884 0-1.549-.482-1.986-.806a4.093 4.093 0 0 0-.376-.253c-.088-.035-.315-.07-.473-.105-.542-.088-1.339-.219-1.942-.832-.604-.603-.735-1.373-.823-1.933-.035-.201-.061-.403-.105-.49-.026-.07-.166-.254-.245-.368-.324-.446-.814-1.12-.814-2.004 0-.883.482-1.548.805-1.986.07-.096.22-.306.254-.376.035-.096.079-.324.105-.481v-.062c.096-.524.245-1.294.831-1.88.587-.587 1.374-.736 1.934-.823.166-.026.394-.062.49-.105.07-.026.271-.175.376-.245.473-.341 1.112-.805 1.995-.805.884 0 1.55.481 1.987.805.122.087.306.227.376.253.087.035.315.08.481.105.569.097 1.339.22 1.943.832.603.612.735 1.374.822 1.933.026.158.061.394.105.49.026.07.166.254.245.368.35.481.814 1.12.814 2.004 0 .883-.481 1.548-.805 1.986l-.053.044ZM3.695 5.419a3.263 3.263 0 0 1-.175.726 3.414 3.414 0 0 1-.411.656c-.263.368-.543.753-.543 1.199 0 .446.28.831.552 1.207.157.22.315.438.402.648.096.227.14.49.184.77.079.455.149.919.455 1.216.306.298.779.385 1.207.455.28.044.552.088.78.184.2.088.393.219.655.402.368.272.753.543 1.2.543.445 0 .83-.28 1.207-.551.2-.149.428-.315.647-.403.236-.096.525-.149.788-.184.42-.07.9-.148 1.198-.446.307-.306.377-.761.455-1.207.044-.271.088-.552.184-.779.079-.201.219-.402.368-.604l.035-.052c.27-.377.55-.753.55-1.199 0-.446-.28-.831-.542-1.199-.157-.219-.315-.437-.402-.656-.096-.236-.149-.534-.184-.787-.07-.438-.149-.902-.446-1.2-.298-.306-.761-.376-1.208-.454-.27-.044-.55-.088-.787-.193-.21-.087-.438-.245-.648-.402-.376-.272-.76-.551-1.207-.551-.446 0-.831.28-1.199.55-.201.15-.429.316-.647.403-.237.096-.508.14-.78.184-.445.07-.91.149-1.207.455-.297.306-.376.779-.446 1.199V5.4l-.035.018Z"></path><path d="M5.9 7.772c-.577 0-1.05-.472-1.05-1.05v-.07a1.044 1.044 0 0 1 .98-1.12 1.044 1.044 0 0 1 1.12.98v.15a1.044 1.044 0 0 1-.98 1.12H5.9v-.01Zm4.2.447c-.577 0-1.05.472-1.05 1.05v.07a1.044 1.044 0 0 0 .98 1.12 1.045 1.045 0 0 0 1.12-.98V9.33a1.044 1.044 0 0 0-.98-1.12h-.07v.009Zm-.962-2.923L5.48 10.695h1.383l3.657-5.399H9.138Z"></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--stampcard"><path d="M13.941 10.039c-.043.061-.183.254-.218.332a3.248 3.248 0 0 0-.105.473c-.097.569-.22 1.338-.832 1.951-.603.604-1.4.735-1.925.822-.157.027-.393.062-.49.105-.07.027-.27.176-.376.245-.437.324-1.111.806-1.995.806-.884 0-1.549-.482-1.986-.806a4.093 4.093 0 0 0-.376-.253c-.088-.035-.315-.07-.473-.105-.542-.088-1.339-.219-1.942-.832-.604-.603-.735-1.373-.823-1.933-.035-.201-.061-.403-.105-.49-.026-.07-.166-.254-.245-.368-.324-.446-.814-1.12-.814-2.004 0-.883.482-1.548.805-1.986.07-.096.22-.306.254-.376.035-.096.079-.324.105-.481v-.062c.096-.524.245-1.294.831-1.88.587-.587 1.374-.736 1.934-.823.166-.026.394-.062.49-.105.07-.026.271-.175.376-.245.473-.341 1.112-.805 1.995-.805.884 0 1.55.481 1.987.805.122.087.306.227.376.253.087.035.315.08.481.105.569.097 1.339.22 1.943.832.603.612.735 1.374.822 1.933.026.158.061.394.105.49.026.07.166.254.245.368.35.481.814 1.12.814 2.004 0 .883-.481 1.548-.805 1.986l-.053.044ZM3.695 5.419a3.263 3.263 0 0 1-.175.726 3.414 3.414 0 0 1-.411.656c-.263.368-.543.753-.543 1.199 0 .446.28.831.552 1.207.157.22.315.438.402.648.096.227.14.49.184.77.079.455.149.919.455 1.216.306.298.779.385 1.207.455.28.044.552.088.78.184.2.088.393.219.655.402.368.272.753.543 1.2.543.445 0 .83-.28 1.207-.551.2-.149.428-.315.647-.403.236-.096.525-.149.788-.184.42-.07.9-.148 1.198-.446.307-.306.377-.761.455-1.207.044-.271.088-.552.184-.779.079-.201.219-.402.368-.604l.035-.052c.27-.377.55-.753.55-1.199 0-.446-.28-.831-.542-1.199-.157-.219-.315-.437-.402-.656-.096-.236-.149-.534-.184-.787-.07-.438-.149-.902-.446-1.2-.298-.306-.761-.376-1.208-.454-.27-.044-.55-.088-.787-.193-.21-.087-.438-.245-.648-.402-.376-.272-.76-.551-1.207-.551-.446 0-.831.28-1.199.55-.201.15-.429.316-.647.403-.237.096-.508.14-.78.184-.445.07-.91.149-1.207.455-.297.306-.376.779-.446 1.199V5.4l-.035.018Z"></path><path d="M5.9 7.772c-.577 0-1.05-.472-1.05-1.05v-.07a1.044 1.044 0 0 1 .98-1.12 1.044 1.044 0 0 1 1.12.98v.15a1.044 1.044 0 0 1-.98 1.12H5.9v-.01Zm4.2.447c-.577 0-1.05.472-1.05 1.05v.07a1.044 1.044 0 0 0 .98 1.12 1.045 1.045 0 0 0 1.12-.98V9.33a1.044 1.044 0 0 0-.98-1.12h-.07v.009Zm-.962-2.923L5.48 10.695h1.383l3.657-5.399H9.138Z"></path></svg>';
 
 class IconStampcard extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconStampcard extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--stampcard', '', null, 'IconStampcard');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--stampcard', '', null, 'IconStampcard');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--stampcard');
         this.root.append(svg);
     }

package/dist/IconStampcard10.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--stampcard10"><path d="M5.979 9.943v-3.93h-.595l-1.199.508.28.674.683-.245v2.993h.83Z"></path><path d="M6.976 7.983c0 1.015.569 2.038 1.785 2.038 1.217 0 1.785-1.023 1.785-2.038s-.568-2.04-1.785-2.04c-1.216 0-1.785 1.025-1.785 2.04Zm2.722 0c0 .735-.36 1.286-.937 1.286-.577 0-.936-.551-.936-1.286s.359-1.287.936-1.287c.578 0 .937.552.937 1.287Z"></path><path d="M12.533 7.204c0-.306-.193-.656-.613-.656a.562.562 0 0 0-.429.183.699.699 0 0 0 0 .945.562.562 0 0 0 .429.184c.42 0 .613-.35.613-.656Z"></path><path d="M14.554 8.166c-.062-.017-.114-.043-.184-.043-.42 0-.612.35-.612.656 0 .192.087.402.253.525.097.07.21.131.359.131.42 0 .613-.35.613-.656a.641.641 0 0 0-.43-.621v.008Z"></path><path d="M11.675 9.566h.805l1.741-2.563.394-.587h-.805l-.787 1.155-1.348 1.995Z"></path><path d="M11.841 11.841c-.297.298-.778.377-1.198.447-.254.043-.552.087-.788.183-.219.088-.446.254-.647.403-.377.271-.753.551-1.208.551-.455 0-.831-.28-1.199-.543-.253-.183-.446-.323-.656-.402-.227-.096-.507-.14-.779-.184-.42-.07-.901-.148-1.207-.455-.306-.306-.376-.761-.455-1.216-.044-.28-.088-.534-.184-.77-.087-.219-.245-.429-.402-.647-.272-.368-.552-.753-.552-1.208 0-.455.28-.831.543-1.199.175-.245.324-.446.411-.656.096-.219.14-.49.175-.726v-.053c.079-.42.158-.901.464-1.198.297-.298.761-.377 1.207-.455.272-.044.543-.088.779-.184a3.61 3.61 0 0 0 .648-.403c.367-.271.752-.551 1.198-.551.447 0 .832.28 1.208.551.21.149.429.315.647.403.236.096.508.14.788.192.446.07.901.149 1.207.455.272.272.359.674.429 1.077h1.365l-.018-.097c-.096-.56-.218-1.33-.822-1.933-.604-.604-1.374-.735-1.943-.832-.166-.026-.385-.061-.48-.105-.07-.026-.263-.166-.377-.253-.437-.315-1.102-.805-1.986-.805-.884 0-1.523.463-1.995.805-.105.078-.298.218-.376.245a3.07 3.07 0 0 1-.49.105c-.56.096-1.33.218-1.934.822-.586.586-.726 1.356-.814 1.881v.062c-.035.148-.07.385-.114.48-.035.07-.183.28-.253.377-.315.438-.805 1.103-.805 1.986 0 .884.48 1.558.813 2.004.079.114.21.298.245.368.035.087.07.288.105.49.097.56.219 1.32.823 1.933.604.604 1.409.744 1.942.832.167.026.385.06.473.104.07.036.271.176.376.254.438.324 1.103.805 1.986.805.884 0 1.558-.481 1.995-.805.105-.079.298-.219.377-.245.096-.043.332-.079.49-.105.524-.087 1.32-.218 1.925-.822.603-.595.734-1.348.822-1.917h-1.365c-.07.368-.157.718-.411.963l.017-.009Z"></path><path d="M5.979 9.943v-3.93h-.595l-1.199.508.28.674.683-.245v2.993h.83Z"></path><path d="M6.976 7.983c0 1.015.569 2.038 1.785 2.038 1.217 0 1.785-1.023 1.785-2.038s-.568-2.04-1.785-2.04c-1.216 0-1.785 1.025-1.785 2.04Zm2.722 0c0 .735-.36 1.286-.937 1.286-.577 0-.936-.551-.936-1.286s.359-1.287.936-1.287c.578 0 .937.552.937 1.287Z"></path><path d="M12.533 7.204c0-.306-.193-.656-.613-.656a.562.562 0 0 0-.429.183.699.699 0 0 0 0 .945.562.562 0 0 0 .429.184c.42 0 .613-.35.613-.656Z"></path><path d="M14.554 8.166c-.062-.017-.114-.043-.184-.043-.42 0-.612.35-.612.656 0 .192.087.402.253.525.097.07.21.131.359.131.42 0 .613-.35.613-.656a.641.641 0 0 0-.43-.621v.008Z"></path><path d="M11.675 9.566h.805l1.741-2.563.394-.587h-.805l-.787 1.155-1.348 1.995Z"></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--stampcard10"><path d="M5.979 9.943v-3.93h-.595l-1.199.508.28.674.683-.245v2.993h.83Z"></path><path d="M6.976 7.983c0 1.015.569 2.038 1.785 2.038 1.217 0 1.785-1.023 1.785-2.038s-.568-2.04-1.785-2.04c-1.216 0-1.785 1.025-1.785 2.04Zm2.722 0c0 .735-.36 1.286-.937 1.286-.577 0-.936-.551-.936-1.286s.359-1.287.936-1.287c.578 0 .937.552.937 1.287Z"></path><path d="M12.533 7.204c0-.306-.193-.656-.613-.656a.562.562 0 0 0-.429.183.699.699 0 0 0 0 .945.562.562 0 0 0 .429.184c.42 0 .613-.35.613-.656Z"></path><path d="M14.554 8.166c-.062-.017-.114-.043-.184-.043-.42 0-.612.35-.612.656 0 .192.087.402.253.525.097.07.21.131.359.131.42 0 .613-.35.613-.656a.641.641 0 0 0-.43-.621v.008Z"></path><path d="M11.675 9.566h.805l1.741-2.563.394-.587h-.805l-.787 1.155-1.348 1.995Z"></path><path d="M11.841 11.841c-.297.298-.778.377-1.198.447-.254.043-.552.087-.788.183-.219.088-.446.254-.647.403-.377.271-.753.551-1.208.551-.455 0-.831-.28-1.199-.543-.253-.183-.446-.323-.656-.402-.227-.096-.507-.14-.779-.184-.42-.07-.901-.148-1.207-.455-.306-.306-.376-.761-.455-1.216-.044-.28-.088-.534-.184-.77-.087-.219-.245-.429-.402-.647-.272-.368-.552-.753-.552-1.208 0-.455.28-.831.543-1.199.175-.245.324-.446.411-.656.096-.219.14-.49.175-.726v-.053c.079-.42.158-.901.464-1.198.297-.298.761-.377 1.207-.455.272-.044.543-.088.779-.184a3.61 3.61 0 0 0 .648-.403c.367-.271.752-.551 1.198-.551.447 0 .832.28 1.208.551.21.149.429.315.647.403.236.096.508.14.788.192.446.07.901.149 1.207.455.272.272.359.674.429 1.077h1.365l-.018-.097c-.096-.56-.218-1.33-.822-1.933-.604-.604-1.374-.735-1.943-.832-.166-.026-.385-.061-.48-.105-.07-.026-.263-.166-.377-.253-.437-.315-1.102-.805-1.986-.805-.884 0-1.523.463-1.995.805-.105.078-.298.218-.376.245a3.07 3.07 0 0 1-.49.105c-.56.096-1.33.218-1.934.822-.586.586-.726 1.356-.814 1.881v.062c-.035.148-.07.385-.114.48-.035.07-.183.28-.253.377-.315.438-.805 1.103-.805 1.986 0 .884.48 1.558.813 2.004.079.114.21.298.245.368.035.087.07.288.105.49.097.56.219 1.32.823 1.933.604.604 1.409.744 1.942.832.167.026.385.06.473.104.07.036.271.176.376.254.438.324 1.103.805 1.986.805.884 0 1.558-.481 1.995-.805.105-.079.298-.219.377-.245.096-.043.332-.079.49-.105.524-.087 1.32-.218 1.925-.822.603-.595.734-1.348.822-1.917h-1.365c-.07.368-.157.718-.411.963l.017-.009Z"></path><path d="M5.979 9.943v-3.93h-.595l-1.199.508.28.674.683-.245v2.993h.83Z"></path><path d="M6.976 7.983c0 1.015.569 2.038 1.785 2.038 1.217 0 1.785-1.023 1.785-2.038s-.568-2.04-1.785-2.04c-1.216 0-1.785 1.025-1.785 2.04Zm2.722 0c0 .735-.36 1.286-.937 1.286-.577 0-.936-.551-.936-1.286s.359-1.287.936-1.287c.578 0 .937.552.937 1.287Z"></path><path d="M12.533 7.204c0-.306-.193-.656-.613-.656a.562.562 0 0 0-.429.183.699.699 0 0 0 0 .945.562.562 0 0 0 .429.184c.42 0 .613-.35.613-.656Z"></path><path d="M14.554 8.166c-.062-.017-.114-.043-.184-.043-.42 0-.612.35-.612.656 0 .192.087.402.253.525.097.07.21.131.359.131.42 0 .613-.35.613-.656a.641.641 0 0 0-.43-.621v.008Z"></path><path d="M11.675 9.566h.805l1.741-2.563.394-.587h-.805l-.787 1.155-1.348 1.995Z"></path></svg>';
 
 class IconStampcard10 extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconStampcard10 extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--stampcard10', '', null, 'IconStampcard10');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--stampcard10', '', null, 'IconStampcard10');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--stampcard10');
         this.root.append(svg);
     }