@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/dist/IconSettings.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--settings"><path d="M9.505 14.781h-3.01l-.341-1.207a1.645 1.645 0 0 0-.779-.963 1.697 1.697 0 0 0-1.277-.236l-1.217.306-1.505-2.625.875-.875c.288-.323.436-.748.412-1.181a1.68 1.68 0 0 0-.43-1.234l-.874-.875 1.505-2.625 1.234.359a1.68 1.68 0 0 0 1.277-.228c.39-.2.685-.546.823-.962l.297-1.216h3.01l.341 1.207c.125.41.404.756.78.963a1.689 1.689 0 0 0 1.277.236l1.216-.306 1.505 2.625-.875.875A1.637 1.637 0 0 0 13.338 8a1.636 1.636 0 0 0 .428 1.181l.875.875-1.505 2.625-1.233-.306a1.636 1.636 0 0 0-1.234.219c-.39.2-.685.546-.823.962l-.34 1.225ZM7.493 13.47h1.015l.078-.219a2.931 2.931 0 0 1 1.41-1.75c.666-.41 1.468-.54 2.23-.359l.254.062.508-.875-.167-.175A2.94 2.94 0 0 1 12.025 8a2.94 2.94 0 0 1 .796-2.091l.167-.175-.508-.875-.254.061a2.94 2.94 0 0 1-2.213-.42 2.94 2.94 0 0 1-1.427-1.75l-.078-.254H7.493l-.08.254A2.931 2.931 0 0 1 6.006 4.5c-.667.41-1.47.54-2.231.359l-.254-.061-.507.875.166.175A2.94 2.94 0 0 1 3.975 8a2.966 2.966 0 0 1-.796 2.135l-.166.175.507.875.254-.061a2.94 2.94 0 0 1 2.214.376 2.94 2.94 0 0 1 1.426 1.75l.079.219ZM8 10.625a2.626 2.626 0 0 1-1.855-4.48 2.625 2.625 0 1 1 3.71 3.71 2.625 2.625 0 0 1-1.855.77Zm0-3.938a1.313 1.313 0 1 0 .002 2.626A1.313 1.313 0 0 0 8 6.687Z"></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--settings"><path d="M9.505 14.781h-3.01l-.341-1.207a1.645 1.645 0 0 0-.779-.963 1.697 1.697 0 0 0-1.277-.236l-1.217.306-1.505-2.625.875-.875c.288-.323.436-.748.412-1.181a1.68 1.68 0 0 0-.43-1.234l-.874-.875 1.505-2.625 1.234.359a1.68 1.68 0 0 0 1.277-.228c.39-.2.685-.546.823-.962l.297-1.216h3.01l.341 1.207c.125.41.404.756.78.963a1.689 1.689 0 0 0 1.277.236l1.216-.306 1.505 2.625-.875.875A1.637 1.637 0 0 0 13.338 8a1.636 1.636 0 0 0 .428 1.181l.875.875-1.505 2.625-1.233-.306a1.636 1.636 0 0 0-1.234.219c-.39.2-.685.546-.823.962l-.34 1.225ZM7.493 13.47h1.015l.078-.219a2.931 2.931 0 0 1 1.41-1.75c.666-.41 1.468-.54 2.23-.359l.254.062.508-.875-.167-.175A2.94 2.94 0 0 1 12.025 8a2.94 2.94 0 0 1 .796-2.091l.167-.175-.508-.875-.254.061a2.94 2.94 0 0 1-2.213-.42 2.94 2.94 0 0 1-1.427-1.75l-.078-.254H7.493l-.08.254A2.931 2.931 0 0 1 6.006 4.5c-.667.41-1.47.54-2.231.359l-.254-.061-.507.875.166.175A2.94 2.94 0 0 1 3.975 8a2.966 2.966 0 0 1-.796 2.135l-.166.175.507.875.254-.061a2.94 2.94 0 0 1 2.214.376 2.94 2.94 0 0 1 1.426 1.75l.079.219ZM8 10.625a2.626 2.626 0 0 1-1.855-4.48 2.625 2.625 0 1 1 3.71 3.71 2.625 2.625 0 0 1-1.855.77Zm0-3.938a1.313 1.313 0 1 0 .002 2.626A1.313 1.313 0 0 0 8 6.687Z"></path></svg>';
 
 class IconSettings extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSettings extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--settings', '', null, 'IconSettings');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--settings', '', null, 'IconSettings');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--settings');
         this.root.append(svg);
     }

package/dist/IconSettingsFilled.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--settingsFilled"><path d="M13.338 8a1.636 1.636 0 0 1 .428-1.181l.875-.875-1.505-2.625-1.233.306a1.688 1.688 0 0 1-1.278-.236 1.645 1.645 0 0 1-.805-.963L9.505 1.22h-3.01l-.341 1.216a1.671 1.671 0 0 1-.779.962 1.68 1.68 0 0 1-1.277.228L2.88 3.31 1.376 5.935l.875.875c.287.328.434.755.412 1.19a1.636 1.636 0 0 1-.43 1.181l-.874.875 1.505 2.625 1.234-.306c.44-.094.9-.009 1.277.236.385.202.675.548.805.963l.341 1.207h2.984l.341-1.216c.138-.416.433-.762.823-.963a1.638 1.638 0 0 1 1.234-.227l1.216.306 1.505-2.625-.875-.875A1.637 1.637 0 0 1 13.338 8ZM9.313 8a1.313 1.313 0 1 1-2.625.002A1.313 1.313 0 0 1 9.313 8Z"></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--settingsFilled"><path d="M13.338 8a1.636 1.636 0 0 1 .428-1.181l.875-.875-1.505-2.625-1.233.306a1.688 1.688 0 0 1-1.278-.236 1.645 1.645 0 0 1-.805-.963L9.505 1.22h-3.01l-.341 1.216a1.671 1.671 0 0 1-.779.962 1.68 1.68 0 0 1-1.277.228L2.88 3.31 1.376 5.935l.875.875c.287.328.434.755.412 1.19a1.636 1.636 0 0 1-.43 1.181l-.874.875 1.505 2.625 1.234-.306c.44-.094.9-.009 1.277.236.385.202.675.548.805.963l.341 1.207h2.984l.341-1.216c.138-.416.433-.762.823-.963a1.638 1.638 0 0 1 1.234-.227l1.216.306 1.505-2.625-.875-.875A1.637 1.637 0 0 1 13.338 8ZM9.313 8a1.313 1.313 0 1 1-2.625.002A1.313 1.313 0 0 1 9.313 8Z"></path></svg>';
 
 class IconSettingsFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSettingsFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--settingsFilled', '', null, 'IconSettingsFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--settingsFilled', '', null, 'IconSettingsFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--settingsFilled');
         this.root.append(svg);
     }

package/dist/IconSettingsFilledLarge.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--settingsFilledLarge"><path d="M25.564 16.044v-.097a3.412 3.412 0 0 1 .875-2.423l1.409-1.453-2.529-4.375-2.012.517a3.5 3.5 0 0 1-2.582-.455 3.43 3.43 0 0 1-1.654-1.987L18.53 3.75h-5.057l-.57 2.004a3.5 3.5 0 0 1-1.68 2.004 3.5 3.5 0 0 1-2.554.437l-2.013-.516-2.529 4.375 1.374 1.47c.597.662.912 1.532.875 2.424v.104a3.412 3.412 0 0 1-.875 2.424L4.126 19.93l2.53 4.375 2.012-.516a3.5 3.5 0 0 1 2.625.454 3.43 3.43 0 0 1 1.654 1.987l.525 2.021h5.057l.569-2.004a3.78 3.78 0 0 1 4.235-2.441l2.012.516 2.529-4.375-1.374-1.47a3.421 3.421 0 0 1-.936-2.432ZM19.063 16a3.028 3.028 0 0 1-.875 2.17 3.132 3.132 0 0 1-4.323 0 3.063 3.063 0 1 1 5.25-2.17h-.052Z"></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--settingsFilledLarge"><path d="M25.564 16.044v-.097a3.412 3.412 0 0 1 .875-2.423l1.409-1.453-2.529-4.375-2.012.517a3.5 3.5 0 0 1-2.582-.455 3.43 3.43 0 0 1-1.654-1.987L18.53 3.75h-5.057l-.57 2.004a3.5 3.5 0 0 1-1.68 2.004 3.5 3.5 0 0 1-2.554.437l-2.013-.516-2.529 4.375 1.374 1.47c.597.662.912 1.532.875 2.424v.104a3.412 3.412 0 0 1-.875 2.424L4.126 19.93l2.53 4.375 2.012-.516a3.5 3.5 0 0 1 2.625.454 3.43 3.43 0 0 1 1.654 1.987l.525 2.021h5.057l.569-2.004a3.78 3.78 0 0 1 4.235-2.441l2.012.516 2.529-4.375-1.374-1.47a3.421 3.421 0 0 1-.936-2.432ZM19.063 16a3.028 3.028 0 0 1-.875 2.17 3.132 3.132 0 0 1-4.323 0 3.063 3.063 0 1 1 5.25-2.17h-.052Z"></path></svg>';
 
 class IconSettingsFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSettingsFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--settingsFilledLarge', '', null, 'IconSettingsFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--settingsFilledLarge', '', null, 'IconSettingsFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--settingsFilledLarge');
         this.root.append(svg);
     }

package/dist/IconSettingsLarge.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--settingsLarge"><path d="M18.529 28.25h-5.057l-.57-2.004a3.43 3.43 0 0 0-1.653-1.986 3.5 3.5 0 0 0-2.581-.455l-2.013.516-2.529-4.375 1.374-1.47a3.412 3.412 0 0 0 .875-2.424v-.104a3.412 3.412 0 0 0-.875-2.424L4.126 12.07l2.53-4.375 2.012.517a3.5 3.5 0 0 0 2.555-.438 3.5 3.5 0 0 0 1.68-2.004l.569-2.021h5.057l.569 2.004a3.43 3.43 0 0 0 1.654 1.986 3.5 3.5 0 0 0 2.58.455l2.013-.516 2.529 4.375-1.374 1.47a3.412 3.412 0 0 0-.875 2.424v.096a3.421 3.421 0 0 0 .875 2.432l1.409 1.453-2.529 4.375-2.012-.516a3.78 3.78 0 0 0-4.235 2.44l-.604 2.022Zm-3.736-1.75h2.415l.21-.726a5.144 5.144 0 0 1 2.459-3.028 5.136 5.136 0 0 1 3.885-.621l.726.184 1.207-2.1-.49-.499a5.171 5.171 0 0 1-1.391-3.658V16a5.171 5.171 0 0 1 1.391-3.658l.49-.498L24.488 9.7l-.726.175a5.128 5.128 0 0 1-3.86-.613 5.18 5.18 0 0 1-2.484-3.045l-.21-.717h-2.415l-.21.726a5.145 5.145 0 0 1-2.459 3.028 5.137 5.137 0 0 1-3.885.621L7.513 9.7l-1.208 2.1.49.499A5.172 5.172 0 0 1 8.186 16a5.25 5.25 0 0 1-1.39 3.745l-.49.499L7.512 22.3l.726-.175a5.127 5.127 0 0 1 3.859.613 5.18 5.18 0 0 1 2.485 3.044l.21.718ZM16 20.812a4.813 4.813 0 1 1 3.404-1.408A4.777 4.777 0 0 1 16 20.813Zm0-7.875a3.062 3.062 0 0 0-2.161 5.25 3.132 3.132 0 0 0 4.322 0 3.063 3.063 0 0 0-2.16-5.25Z"></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--settingsLarge"><path d="M18.529 28.25h-5.057l-.57-2.004a3.43 3.43 0 0 0-1.653-1.986 3.5 3.5 0 0 0-2.581-.455l-2.013.516-2.529-4.375 1.374-1.47a3.412 3.412 0 0 0 .875-2.424v-.104a3.412 3.412 0 0 0-.875-2.424L4.126 12.07l2.53-4.375 2.012.517a3.5 3.5 0 0 0 2.555-.438 3.5 3.5 0 0 0 1.68-2.004l.569-2.021h5.057l.569 2.004a3.43 3.43 0 0 0 1.654 1.986 3.5 3.5 0 0 0 2.58.455l2.013-.516 2.529 4.375-1.374 1.47a3.412 3.412 0 0 0-.875 2.424v.096a3.421 3.421 0 0 0 .875 2.432l1.409 1.453-2.529 4.375-2.012-.516a3.78 3.78 0 0 0-4.235 2.44l-.604 2.022Zm-3.736-1.75h2.415l.21-.726a5.144 5.144 0 0 1 2.459-3.028 5.136 5.136 0 0 1 3.885-.621l.726.184 1.207-2.1-.49-.499a5.171 5.171 0 0 1-1.391-3.658V16a5.171 5.171 0 0 1 1.391-3.658l.49-.498L24.488 9.7l-.726.175a5.128 5.128 0 0 1-3.86-.613 5.18 5.18 0 0 1-2.484-3.045l-.21-.717h-2.415l-.21.726a5.145 5.145 0 0 1-2.459 3.028 5.137 5.137 0 0 1-3.885.621L7.513 9.7l-1.208 2.1.49.499A5.172 5.172 0 0 1 8.186 16a5.25 5.25 0 0 1-1.39 3.745l-.49.499L7.512 22.3l.726-.175a5.127 5.127 0 0 1 3.859.613 5.18 5.18 0 0 1 2.485 3.044l.21.718ZM16 20.812a4.813 4.813 0 1 1 3.404-1.408A4.777 4.777 0 0 1 16 20.813Zm0-7.875a3.062 3.062 0 0 0-2.161 5.25 3.132 3.132 0 0 0 4.322 0 3.063 3.063 0 0 0-2.16-5.25Z"></path></svg>';
 
 class IconSettingsLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSettingsLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--settingsLarge', '', null, 'IconSettingsLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--settingsLarge', '', null, 'IconSettingsLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--settingsLarge');
         this.root.append(svg);
     }

package/dist/IconShare.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--share"><path d="M12.322 9.076a2.371 2.371 0 0 0-1.907.963L6.04 8.376a2.625 2.625 0 0 0 0-.376 2.625 2.625 0 0 0 0-.376l4.375-1.663a2.371 2.371 0 1 0-.481-1.417 1.68 1.68 0 0 0 0 .192L5.462 6.434a2.362 2.362 0 0 0-1.75-.823 2.389 2.389 0 1 0 0 4.778 2.362 2.362 0 0 0 1.75-.823l4.498 1.698a1.68 1.68 0 0 0 0 .192 2.39 2.39 0 1 0 2.389-2.38h-.027Zm0-5.608a1.076 1.076 0 1 1 0 2.152 1.076 1.076 0 0 1 0-2.152ZM3.678 9.076a1.076 1.076 0 1 1 0-2.152 1.076 1.076 0 0 1 0 2.152Zm8.646 3.457a1.076 1.076 0 1 1 .002-2.153 1.076 1.076 0 0 1-.002 2.153Z"></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--share"><path d="M12.322 9.076a2.371 2.371 0 0 0-1.907.963L6.04 8.376a2.625 2.625 0 0 0 0-.376 2.625 2.625 0 0 0 0-.376l4.375-1.663a2.371 2.371 0 1 0-.481-1.417 1.68 1.68 0 0 0 0 .192L5.462 6.434a2.362 2.362 0 0 0-1.75-.823 2.389 2.389 0 1 0 0 4.778 2.362 2.362 0 0 0 1.75-.823l4.498 1.698a1.68 1.68 0 0 0 0 .192 2.39 2.39 0 1 0 2.389-2.38h-.027Zm0-5.608a1.076 1.076 0 1 1 0 2.152 1.076 1.076 0 0 1 0-2.152ZM3.678 9.076a1.076 1.076 0 1 1 0-2.152 1.076 1.076 0 0 1 0 2.152Zm8.646 3.457a1.076 1.076 0 1 1 .002-2.153 1.076 1.076 0 0 1-.002 2.153Z"></path></svg>';
 
 class IconShare extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconShare extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--share', '', null, 'IconShare');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--share', '', null, 'IconShare');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--share');
         this.root.append(svg);
     }

package/dist/IconShareLarge.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--shareLarge"><path d="M23.5 18.25a3.75 3.75 0 0 0-3.165 1.755L12.13 16.9c.074-.294.114-.596.12-.9a4.007 4.007 0 0 0-.12-.9l8.205-3.105A3.75 3.75 0 1 0 19.75 10c.005.199.025.397.06.592L11.5 13.75a3.749 3.749 0 1 0 0 4.5l8.332 3.15c-.043.198-.07.398-.082.6a3.75 3.75 0 1 0 3.75-3.75Zm0-10.5a2.25 2.25 0 1 1 0 4.5 2.25 2.25 0 0 1 0-4.5Zm-15 10.5a2.25 2.25 0 1 1 0-4.5 2.25 2.25 0 0 1 0 4.5Zm15 6a2.25 2.25 0 1 1 0-4.5 2.25 2.25 0 0 1 0 4.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--shareLarge"><path d="M23.5 18.25a3.75 3.75 0 0 0-3.165 1.755L12.13 16.9c.074-.294.114-.596.12-.9a4.007 4.007 0 0 0-.12-.9l8.205-3.105A3.75 3.75 0 1 0 19.75 10c.005.199.025.397.06.592L11.5 13.75a3.749 3.749 0 1 0 0 4.5l8.332 3.15c-.043.198-.07.398-.082.6a3.75 3.75 0 1 0 3.75-3.75Zm0-10.5a2.25 2.25 0 1 1 0 4.5 2.25 2.25 0 0 1 0-4.5Zm-15 10.5a2.25 2.25 0 1 1 0-4.5 2.25 2.25 0 0 1 0 4.5Zm15 6a2.25 2.25 0 1 1 0-4.5 2.25 2.25 0 0 1 0 4.5Z"></path></svg>';
 
 class IconShareLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconShareLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--shareLarge', '', null, 'IconShareLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--shareLarge', '', null, 'IconShareLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--shareLarge');
         this.root.append(svg);
     }

package/dist/IconShekel.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--shekel"><path d="M8 5.156H3.406v8.094H2.094V3.844H8a2.406 2.406 0 0 1 2.406 2.406v3.5H9.094v-3.5A1.094 1.094 0 0 0 8 5.156Zm4.594-1.531v8.094H8a1.094 1.094 0 0 1-1.094-1.094v-3.5H5.594v3.5A2.406 2.406 0 0 0 8 13.031h5.906V3.625h-1.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--shekel"><path d="M8 5.156H3.406v8.094H2.094V3.844H8a2.406 2.406 0 0 1 2.406 2.406v3.5H9.094v-3.5A1.094 1.094 0 0 0 8 5.156Zm4.594-1.531v8.094H8a1.094 1.094 0 0 1-1.094-1.094v-3.5H5.594v3.5A2.406 2.406 0 0 0 8 13.031h5.906V3.625h-1.312Z"></path></svg>';
 
 class IconShekel extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconShekel extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--shekel', '', null, 'IconShekel');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--shekel', '', null, 'IconShekel');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--shekel');
         this.root.append(svg);
     }

package/dist/IconShekelLarge.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--shekelLarge"><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 21Zm0-14h-4.375v7.875h-1.75V10.75H16a2.625 2.625 0 0 1 2.625 2.625v3.5h-1.75v-3.5A.875.875 0 0 0 16 12.5Zm4.375-1.75h1.75v9.625H16a2.625 2.625 0 0 1-2.625-2.625v-3.5h1.75v3.5a.875.875 0 0 0 .875.875h4.375V10.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--shekelLarge"><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 21Zm0-14h-4.375v7.875h-1.75V10.75H16a2.625 2.625 0 0 1 2.625 2.625v3.5h-1.75v-3.5A.875.875 0 0 0 16 12.5Zm4.375-1.75h1.75v9.625H16a2.625 2.625 0 0 1-2.625-2.625v-3.5h1.75v3.5a.875.875 0 0 0 .875.875h4.375V10.75Z"></path></svg>';
 
 class IconShekelLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconShekelLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--shekelLarge', '', null, 'IconShekelLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--shekelLarge', '', null, 'IconShekelLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--shekelLarge');
         this.root.append(svg);
     }

package/dist/IconSignClosed.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--signClosed"><path d="M13.25 4.719h-2.126L8.507 1.464H7.494L4.867 4.719H2.75A1.54 1.54 0 0 0 1.219 6.25v5.25a1.54 1.54 0 0 0 1.531 1.531h10.5a1.54 1.54 0 0 0 1.531-1.531V6.25a1.54 1.54 0 0 0-1.531-1.531ZM8 2.969l1.444 1.75H6.556L8 2.969Zm5.469 8.531a.219.219 0 0 1-.219.219H2.75a.219.219 0 0 1-.219-.219V6.25a.219.219 0 0 1 .219-.219h10.5a.219.219 0 0 1 .219.219v5.25Zm-3.5-3.692L8.928 8.874l1.076 1.068-.936.936L8 9.803l-1.067 1.076-.937-.936 1.076-1.068-1.076-1.067.936-.937L8 7.947l1.068-1.076.9.936Z"></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--signClosed"><path d="M13.25 4.719h-2.126L8.507 1.464H7.494L4.867 4.719H2.75A1.54 1.54 0 0 0 1.219 6.25v5.25a1.54 1.54 0 0 0 1.531 1.531h10.5a1.54 1.54 0 0 0 1.531-1.531V6.25a1.54 1.54 0 0 0-1.531-1.531ZM8 2.969l1.444 1.75H6.556L8 2.969Zm5.469 8.531a.219.219 0 0 1-.219.219H2.75a.219.219 0 0 1-.219-.219V6.25a.219.219 0 0 1 .219-.219h10.5a.219.219 0 0 1 .219.219v5.25Zm-3.5-3.692L8.928 8.874l1.076 1.068-.936.936L8 9.803l-1.067 1.076-.937-.936 1.076-1.068-1.076-1.067.936-.937L8 7.947l1.068-1.076.9.936Z"></path></svg>';
 
 class IconSignClosed extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSignClosed extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--signClosed', '', null, 'IconSignClosed');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--signClosed', '', null, 'IconSignClosed');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--signClosed');
         this.root.append(svg);
     }

package/dist/IconSignClosedLarge.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--signClosedLarge"><path d="M26.5 11.625h-4.462l-5.355-6.676h-1.365l-5.355 6.676H5.5a2.625 2.625 0 0 0-2.625 2.625v10.5A2.625 2.625 0 0 0 5.5 27.375h21a2.625 2.625 0 0 0 2.625-2.625v-10.5a2.625 2.625 0 0 0-2.625-2.625ZM16 6.9l3.789 4.725H12.21L16 6.9Zm11.375 17.85a.875.875 0 0 1-.875.875h-21a.875.875 0 0 1-.875-.875v-10.5a.875.875 0 0 1 .875-.875h21a.875.875 0 0 1 .875.875v10.5Zm-7.691-7.691-2.45 2.441 2.45 2.441-1.243 1.243L16 20.734l-2.441 2.45-1.243-1.243 2.45-2.441-2.45-2.441 1.243-1.243L16 18.266l2.441-2.45 1.243 1.243Z"></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--signClosedLarge"><path d="M26.5 11.625h-4.462l-5.355-6.676h-1.365l-5.355 6.676H5.5a2.625 2.625 0 0 0-2.625 2.625v10.5A2.625 2.625 0 0 0 5.5 27.375h21a2.625 2.625 0 0 0 2.625-2.625v-10.5a2.625 2.625 0 0 0-2.625-2.625ZM16 6.9l3.789 4.725H12.21L16 6.9Zm11.375 17.85a.875.875 0 0 1-.875.875h-21a.875.875 0 0 1-.875-.875v-10.5a.875.875 0 0 1 .875-.875h21a.875.875 0 0 1 .875.875v10.5Zm-7.691-7.691-2.45 2.441 2.45 2.441-1.243 1.243L16 20.734l-2.441 2.45-1.243-1.243 2.45-2.441-2.45-2.441 1.243-1.243L16 18.266l2.441-2.45 1.243 1.243Z"></path></svg>';
 
 class IconSignClosedLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSignClosedLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--signClosedLarge', '', null, 'IconSignClosedLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--signClosedLarge', '', null, 'IconSignClosedLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--signClosedLarge');
         this.root.append(svg);
     }

package/dist/IconSnowflake.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--snowflake"><path d="m13.749 8.779-1.62.849L9.313 8l2.818-1.627 1.619.848.612-1.163-1.575-.823.07-1.776-1.304-.053-.078 1.838-2.818 1.619V3.608l1.549-.98-.709-1.103L8 2.47l-1.496-.945-.71 1.103 1.55.98v3.255l-2.818-1.62-.079-1.837-1.303.053.07 1.776-1.575.823.612 1.163 1.619-.848L6.687 8 3.87 9.628l-1.619-.85-.612 1.165 1.575.822-.08 1.776 1.313.053.08-1.838 2.817-1.618v3.255l-1.55.98.71 1.102L8 13.53l1.496.945.709-1.102-1.549-.98V9.137l2.818 1.618.07 1.838 1.312-.053-.07-1.776 1.575-.822-.612-1.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--snowflake"><path d="m13.749 8.779-1.62.849L9.313 8l2.818-1.627 1.619.848.612-1.163-1.575-.823.07-1.776-1.304-.053-.078 1.838-2.818 1.619V3.608l1.549-.98-.709-1.103L8 2.47l-1.496-.945-.71 1.103 1.55.98v3.255l-2.818-1.62-.079-1.837-1.303.053.07 1.776-1.575.823.612 1.163 1.619-.848L6.687 8 3.87 9.628l-1.619-.85-.612 1.165 1.575.822-.08 1.776 1.313.053.08-1.838 2.817-1.618v3.255l-1.55.98.71 1.102L8 13.53l1.496.945.709-1.102-1.549-.98V9.137l2.818 1.618.07 1.838 1.312-.053-.07-1.776 1.575-.822-.612-1.164Z"></path></svg>';
 
 class IconSnowflake extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSnowflake extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--snowflake', '', null, 'IconSnowflake');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--snowflake', '', null, 'IconSnowflake');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--snowflake');
         this.root.append(svg);
     }

package/dist/IconSnowflakeLarge.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--snowflakeLarge"><path d="m27.707 17.942-3.456 1.803L17.75 16l6.501-3.745 3.456 1.802.814-1.548-3.395-1.777.158-3.823-1.75-.08-.158 3.912-6.501 3.745V6.98l3.299-2.083-.936-1.487L16 5.465l-3.238-2.056-.936 1.487 3.299 2.083v7.507l-6.501-3.745-.158-3.911-1.75.079.158 3.823-3.395 1.777.814 1.548 3.456-1.802L14.25 16l-6.501 3.745-3.456-1.803-.814 1.55 3.395 1.775-.158 3.824 1.75.079.158-3.911 6.501-3.745v7.507l-3.299 2.091.936 1.48L16 26.534l3.238 2.056.936-1.479-3.299-2.09v-7.508l6.501 3.745.158 3.91 1.75-.078-.158-3.824 3.395-1.776-.814-1.549Z"></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--snowflakeLarge"><path d="m27.707 17.942-3.456 1.803L17.75 16l6.501-3.745 3.456 1.802.814-1.548-3.395-1.777.158-3.823-1.75-.08-.158 3.912-6.501 3.745V6.98l3.299-2.083-.936-1.487L16 5.465l-3.238-2.056-.936 1.487 3.299 2.083v7.507l-6.501-3.745-.158-3.911-1.75.079.158 3.823-3.395 1.777.814 1.548 3.456-1.802L14.25 16l-6.501 3.745-3.456-1.803-.814 1.55 3.395 1.775-.158 3.824 1.75.079.158-3.911 6.501-3.745v7.507l-3.299 2.091.936 1.48L16 26.534l3.238 2.056.936-1.479-3.299-2.09v-7.508l6.501 3.745.158 3.91 1.75-.078-.158-3.824 3.395-1.776-.814-1.549Z"></path></svg>';
 
 class IconSnowflakeLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSnowflakeLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--snowflakeLarge', '', null, 'IconSnowflakeLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--snowflakeLarge', '', null, 'IconSnowflakeLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--snowflakeLarge');
         this.root.append(svg);
     }

package/dist/IconSocialAndroidCircle.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--androidCircle"><g clip-path="url(#prefix__clip0_4814_3493)"><path fill-rule="evenodd" d="M6.637 5.144c.298-.28.7-.468 1.149-.513h.42a1.96 1.96 0 0 1 1.155.518l.345-.625s.038-.031.06-.018c.021.014.03.04.017.063l-.357.645c.282.295.454.679.46 1.1h-3.78c.006-.422.18-.808.465-1.105l-.354-.64s-.004-.05.017-.063c.022-.013.047-.004.06.018l.343.62Zm.802.389c0 .12-.099.223-.215.223a.22.22 0 0 1-.218-.219.22.22 0 0 1 .214-.223.22.22 0 0 1 .219.219Zm1.62 0c0 .12-.099.223-.215.223a.22.22 0 0 1-.218-.219.22.22 0 0 1 .214-.223.22.22 0 0 1 .219.219Z" clip-rule="evenodd"></path><path d="M7.473 9.942h1.054v1.12a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.437v-1.12h.022c.287 0 .518-.246.518-.554V6.5h-3.81V9.39c0 .303.232.553.519.553h.017v1.12a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.437v-1.12Z"></path><path d="M5.84 7.189a.43.43 0 0 0-.42-.438.43.43 0 0 0-.42.438v1.874a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.438V7.19Z"></path><path d="M10.58 6.751a.43.43 0 0 1 .42.438v1.874a.43.43 0 0 1-.42.438.43.43 0 0 1-.42-.438V7.19a.43.43 0 0 1 .42-.438Z"></path><path fill-rule="evenodd" d="M4.237 2.315A6.781 6.781 0 0 1 8 1.175 6.79 6.79 0 0 1 14.78 8 6.781 6.781 0 1 1 4.237 2.315Zm.72 10.185a5.468 5.468 0 1 0 6.086-9.087A5.468 5.468 0 0 0 4.957 12.5Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_4814_3493"><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--androidCircle"><g clip-path="url(#prefix__clip0_4814_3493)"><path fill-rule="evenodd" d="M6.637 5.144c.298-.28.7-.468 1.149-.513h.42a1.96 1.96 0 0 1 1.155.518l.345-.625s.038-.031.06-.018c.021.014.03.04.017.063l-.357.645c.282.295.454.679.46 1.1h-3.78c.006-.422.18-.808.465-1.105l-.354-.64s-.004-.05.017-.063c.022-.013.047-.004.06.018l.343.62Zm.802.389c0 .12-.099.223-.215.223a.22.22 0 0 1-.218-.219.22.22 0 0 1 .214-.223.22.22 0 0 1 .219.219Zm1.62 0c0 .12-.099.223-.215.223a.22.22 0 0 1-.218-.219.22.22 0 0 1 .214-.223.22.22 0 0 1 .219.219Z" clip-rule="evenodd"></path><path d="M7.473 9.942h1.054v1.12a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.437v-1.12h.022c.287 0 .518-.246.518-.554V6.5h-3.81V9.39c0 .303.232.553.519.553h.017v1.12a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.437v-1.12Z"></path><path d="M5.84 7.189a.43.43 0 0 0-.42-.438.43.43 0 0 0-.42.438v1.874a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.438V7.19Z"></path><path d="M10.58 6.751a.43.43 0 0 1 .42.438v1.874a.43.43 0 0 1-.42.438.43.43 0 0 1-.42-.438V7.19a.43.43 0 0 1 .42-.438Z"></path><path fill-rule="evenodd" d="M4.237 2.315A6.781 6.781 0 0 1 8 1.175 6.79 6.79 0 0 1 14.78 8 6.781 6.781 0 1 1 4.237 2.315Zm.72 10.185a5.468 5.468 0 1 0 6.086-9.087A5.468 5.468 0 0 0 4.957 12.5Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_4814_3493"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconSocialAndroidCircle extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialAndroidCircle extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--androidCircle', '', null, 'IconSocialAndroidCircle');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--androidCircle', '', null, 'IconSocialAndroidCircle');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--androidCircle');
         this.root.append(svg);
     }

package/dist/IconSocialAndroidCircleFilled.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--androidCircleFilled"><g clip-path="url(#prefix__clip0_5394_3957)"><path d="M7.439 5.533c0 .12-.099.223-.215.223a.22.22 0 0 1-.218-.219.22.22 0 0 1 .214-.223.22.22 0 0 1 .219.219Z"></path><path d="M9.059 5.533c0 .12-.099.223-.215.223a.22.22 0 0 1-.218-.219.22.22 0 0 1 .214-.223.22.22 0 0 1 .219.219Z"></path><path fill-rule="evenodd" d="M4.237 2.315A6.781 6.781 0 0 1 8 1.175 6.79 6.79 0 0 1 14.78 8 6.781 6.781 0 1 1 4.237 2.315Zm2.4 2.83c.298-.28.7-.469 1.149-.514h.42a1.96 1.96 0 0 1 1.155.518l.345-.625s.038-.031.06-.018c.021.014.03.04.017.063l-.357.645c.282.295.454.679.46 1.1h-3.78c.006-.422.18-.808.465-1.105l-.354-.64s-.004-.05.017-.063c.022-.013.047-.004.06.018l.343.62Zm.836 4.797h1.054v1.12a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.437v-1.12h.022c.287 0 .518-.246.518-.554V6.5h-3.81V9.39c0 .303.232.553.519.553h.017v1.12a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.437v-1.12ZM5.84 7.19a.43.43 0 0 0-.42-.438.43.43 0 0 0-.42.438v1.874a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.438V7.19Zm4.74-.438a.43.43 0 0 1 .42.438v1.874a.43.43 0 0 1-.42.438.43.43 0 0 1-.42-.438V7.19a.43.43 0 0 1 .42-.438Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_5394_3957"><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--androidCircleFilled"><g clip-path="url(#prefix__clip0_5394_3957)"><path d="M7.439 5.533c0 .12-.099.223-.215.223a.22.22 0 0 1-.218-.219.22.22 0 0 1 .214-.223.22.22 0 0 1 .219.219Z"></path><path d="M9.059 5.533c0 .12-.099.223-.215.223a.22.22 0 0 1-.218-.219.22.22 0 0 1 .214-.223.22.22 0 0 1 .219.219Z"></path><path fill-rule="evenodd" d="M4.237 2.315A6.781 6.781 0 0 1 8 1.175 6.79 6.79 0 0 1 14.78 8 6.781 6.781 0 1 1 4.237 2.315Zm2.4 2.83c.298-.28.7-.469 1.149-.514h.42a1.96 1.96 0 0 1 1.155.518l.345-.625s.038-.031.06-.018c.021.014.03.04.017.063l-.357.645c.282.295.454.679.46 1.1h-3.78c.006-.422.18-.808.465-1.105l-.354-.64s-.004-.05.017-.063c.022-.013.047-.004.06.018l.343.62Zm.836 4.797h1.054v1.12a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.437v-1.12h.022c.287 0 .518-.246.518-.554V6.5h-3.81V9.39c0 .303.232.553.519.553h.017v1.12a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.437v-1.12ZM5.84 7.19a.43.43 0 0 0-.42-.438.43.43 0 0 0-.42.438v1.874a.43.43 0 0 0 .42.438.43.43 0 0 0 .42-.438V7.19Zm4.74-.438a.43.43 0 0 1 .42.438v1.874a.43.43 0 0 1-.42.438.43.43 0 0 1-.42-.438V7.19a.43.43 0 0 1 .42-.438Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_5394_3957"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconSocialAndroidCircleFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialAndroidCircleFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--androidCircleFilled', '', null, 'IconSocialAndroidCircleFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--androidCircleFilled', '', null, 'IconSocialAndroidCircleFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--androidCircleFilled');
         this.root.append(svg);
     }

package/dist/IconSocialAndroidCircleFilledLarge.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--androidCircleFilledLarge"><path d="M14.873 11.208c0 .263-.194.474-.434.474s-.434-.211-.434-.474.194-.474.434-.48c.24 0 .434.212.434.475v.005Z"></path><path d="M18.11 11.208c0 .263-.193.474-.433.474s-.434-.211-.434-.474.194-.474.434-.48c.24 0 .434.212.434.475v.005Z"></path><path fill-rule="evenodd" d="M9.194 26.186a12.25 12.25 0 1 0 13.612-20.37 12.25 12.25 0 0 0-13.612 20.37Zm4.077-15.807a3.816 3.816 0 0 1 2.309-1.104h.845c.9.097 1.705.5 2.302 1.099l.686-1.326a.084.084 0 0 1 .12-.036c.042.026.056.088.033.134l-.708 1.366c.57.634.918 1.46.93 2.366h-7.57a3.595 3.595 0 0 1 .922-2.36l-.71-1.372c-.024-.046-.01-.108.032-.134a.084.084 0 0 1 .12.036l.69 1.33Zm1.676 10.271h2.106v2.412c0 .52.374.938.84.938.467 0 .841-.423.841-.938V20.65h.037c.578 0 1.04-.526 1.04-1.18v-6.19h-7.617l-.002.054a.821.821 0 0 0-.003.054v6.082c0 .654.462 1.18 1.04 1.18h.037v2.412c0 .52.374.938.84.938.467 0 .84-.423.84-.938V20.65Zm-3.266-5.891c0-.52-.378-.938-.84-.938-.467 0-.841.423-.841.938v4.015c0 .52.374.938.84.938.467 0 .841-.423.841-.938v-4.015Zm9.478-.938c.462 0 .841.418.841.938v4.015c0 .515-.374.938-.84.938-.467 0-.841-.418-.841-.938v-4.015c0-.515.374-.938.84-.938Z" 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--androidCircleFilledLarge"><path d="M14.873 11.208c0 .263-.194.474-.434.474s-.434-.211-.434-.474.194-.474.434-.48c.24 0 .434.212.434.475v.005Z"></path><path d="M18.11 11.208c0 .263-.193.474-.433.474s-.434-.211-.434-.474.194-.474.434-.48c.24 0 .434.212.434.475v.005Z"></path><path fill-rule="evenodd" d="M9.194 26.186a12.25 12.25 0 1 0 13.612-20.37 12.25 12.25 0 0 0-13.612 20.37Zm4.077-15.807a3.816 3.816 0 0 1 2.309-1.104h.845c.9.097 1.705.5 2.302 1.099l.686-1.326a.084.084 0 0 1 .12-.036c.042.026.056.088.033.134l-.708 1.366c.57.634.918 1.46.93 2.366h-7.57a3.595 3.595 0 0 1 .922-2.36l-.71-1.372c-.024-.046-.01-.108.032-.134a.084.084 0 0 1 .12.036l.69 1.33Zm1.676 10.271h2.106v2.412c0 .52.374.938.84.938.467 0 .841-.423.841-.938V20.65h.037c.578 0 1.04-.526 1.04-1.18v-6.19h-7.617l-.002.054a.821.821 0 0 0-.003.054v6.082c0 .654.462 1.18 1.04 1.18h.037v2.412c0 .52.374.938.84.938.467 0 .84-.423.84-.938V20.65Zm-3.266-5.891c0-.52-.378-.938-.84-.938-.467 0-.841.423-.841.938v4.015c0 .52.374.938.84.938.467 0 .841-.423.841-.938v-4.015Zm9.478-.938c.462 0 .841.418.841.938v4.015c0 .515-.374.938-.84.938-.467 0-.841-.418-.841-.938v-4.015c0-.515.374-.938.84-.938Z" clip-rule="evenodd"></path></svg>';
 
 class IconSocialAndroidCircleFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialAndroidCircleFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--androidCircleFilledLarge', '', null, 'IconSocialAndroidCircleFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--androidCircleFilledLarge', '', null, 'IconSocialAndroidCircleFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--androidCircleFilledLarge');
         this.root.append(svg);
     }

package/dist/IconSocialAndroidCircleLarge.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--androidCircleLarge"><path fill-rule="evenodd" d="M15.58 9.275a3.816 3.816 0 0 0-2.309 1.104l-.689-1.33a.084.084 0 0 0-.12-.037c-.042.026-.056.088-.032.134l.71 1.372a3.595 3.595 0 0 0-.923 2.36h7.57a3.593 3.593 0 0 0-.93-2.366l.709-1.366c.023-.046.01-.108-.032-.134a.084.084 0 0 0-.12.036l-.687 1.326a3.818 3.818 0 0 0-2.302-1.099h-.845Zm-1.141 2.407c.24 0 .434-.211.434-.474v-.005c0-.263-.194-.474-.434-.474-.24.005-.434.216-.434.479s.194.474.434.474Zm3.238 0c.24 0 .434-.211.434-.474v-.005c0-.263-.194-.474-.434-.474-.24.005-.434.216-.434.479s.194.474.434.474Z" clip-rule="evenodd"></path><path d="M17.053 20.65h-2.106v2.412c0 .515-.374.938-.84.938-.467 0-.841-.418-.841-.938V20.65h-.037c-.578 0-1.04-.526-1.04-1.18v-6.082l.003-.054.002-.054h7.617v6.19c0 .654-.462 1.18-1.04 1.18h-.037v2.412c0 .515-.374.938-.84.938-.467 0-.84-.418-.84-.938V20.65Z"></path><path d="M11.681 14.759c0-.52-.378-.938-.84-.938-.467 0-.841.423-.841.938v4.015c0 .52.374.938.84.938.467 0 .841-.423.841-.938v-4.015Z"></path><path d="M22 14.759c0-.52-.379-.938-.84-.938-.467 0-.841.423-.841.938v4.015c0 .52.374.938.84.938.467 0 .841-.423.841-.938v-4.015Z"></path><path d="M16 28.25a12.25 12.25 0 1 1 0-24.5 12.25 12.25 0 0 1 0 24.5ZM16 5.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--androidCircleLarge"><path fill-rule="evenodd" d="M15.58 9.275a3.816 3.816 0 0 0-2.309 1.104l-.689-1.33a.084.084 0 0 0-.12-.037c-.042.026-.056.088-.032.134l.71 1.372a3.595 3.595 0 0 0-.923 2.36h7.57a3.593 3.593 0 0 0-.93-2.366l.709-1.366c.023-.046.01-.108-.032-.134a.084.084 0 0 0-.12.036l-.687 1.326a3.818 3.818 0 0 0-2.302-1.099h-.845Zm-1.141 2.407c.24 0 .434-.211.434-.474v-.005c0-.263-.194-.474-.434-.474-.24.005-.434.216-.434.479s.194.474.434.474Zm3.238 0c.24 0 .434-.211.434-.474v-.005c0-.263-.194-.474-.434-.474-.24.005-.434.216-.434.479s.194.474.434.474Z" clip-rule="evenodd"></path><path d="M17.053 20.65h-2.106v2.412c0 .515-.374.938-.84.938-.467 0-.841-.418-.841-.938V20.65h-.037c-.578 0-1.04-.526-1.04-1.18v-6.082l.003-.054.002-.054h7.617v6.19c0 .654-.462 1.18-1.04 1.18h-.037v2.412c0 .515-.374.938-.84.938-.467 0-.84-.418-.84-.938V20.65Z"></path><path d="M11.681 14.759c0-.52-.378-.938-.84-.938-.467 0-.841.423-.841.938v4.015c0 .52.374.938.84.938.467 0 .841-.423.841-.938v-4.015Z"></path><path d="M22 14.759c0-.52-.379-.938-.84-.938-.467 0-.841.423-.841.938v4.015c0 .52.374.938.84.938.467 0 .841-.423.841-.938v-4.015Z"></path><path d="M16 28.25a12.25 12.25 0 1 1 0-24.5 12.25 12.25 0 0 1 0 24.5ZM16 5.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21Z"></path></svg>';
 
 class IconSocialAndroidCircleLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialAndroidCircleLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--androidCircleLarge', '', null, 'IconSocialAndroidCircleLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--androidCircleLarge', '', null, 'IconSocialAndroidCircleLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--androidCircleLarge');
         this.root.append(svg);
     }

package/dist/IconSocialAndroidStatic.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--androidStatic"><g fill="#A4C639" clip-path="url(#prefix__clip0_4814_3490)"><path fill-rule="evenodd" d="M7.563 1.394a4.079 4.079 0 0 0-2.346 1.005l-.7-1.215c-.026-.044-.078-.061-.122-.035-.044.026-.035.122-.035.122l.723 1.256c-.582.582-.938 1.339-.95 2.165h7.717c-.013-.825-.364-1.577-.938-2.156l.728-1.265c.026-.043.009-.096-.035-.122-.044-.026-.122.035-.122.035l-.705 1.224c-.609-.554-1.433-.926-2.358-1.014h-.857ZM6.415 3.599a.445.445 0 0 0 .438-.438.439.439 0 0 0-.446-.429.439.439 0 0 0-.438.438c0 .236.201.429.446.429Zm3.308 0a.445.445 0 0 0 .438-.438.44.44 0 0 0-.447-.429.439.439 0 0 0-.437.438c0 .236.201.429.446.429Z" clip-rule="evenodd"></path><path d="M9.076 11.806H6.924v2.197a.859.859 0 0 1-.858.857.859.859 0 0 1-.857-.857v-2.197h-.035c-.586 0-1.059-.49-1.059-1.085V5.06h7.779v5.661c0 .604-.473 1.085-1.059 1.085h-.044v2.197a.859.859 0 0 1-.857.857.859.859 0 0 1-.858-.857v-2.197Z"></path><path d="M3.59 6.407a.859.859 0 0 0-.857-.857.859.859 0 0 0-.858.857v3.675c0 .473.385.858.857.858a.859.859 0 0 0 .858-.857V6.406Z"></path><path d="M14.125 6.407a.859.859 0 0 0-.857-.857.859.859 0 0 0-.858.857v3.675c0 .473.385.858.857.858a.859.859 0 0 0 .858-.857V6.406Z"></path></g><defs><clipPath id="prefix__clip0_4814_3490"><rect width="14" height="14" fill="#fff" 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--androidStatic"><g fill="#A4C639" clip-path="url(#prefix__clip0_4814_3490)"><path fill-rule="evenodd" d="M7.563 1.394a4.079 4.079 0 0 0-2.346 1.005l-.7-1.215c-.026-.044-.078-.061-.122-.035-.044.026-.035.122-.035.122l.723 1.256c-.582.582-.938 1.339-.95 2.165h7.717c-.013-.825-.364-1.577-.938-2.156l.728-1.265c.026-.043.009-.096-.035-.122-.044-.026-.122.035-.122.035l-.705 1.224c-.609-.554-1.433-.926-2.358-1.014h-.857ZM6.415 3.599a.445.445 0 0 0 .438-.438.439.439 0 0 0-.446-.429.439.439 0 0 0-.438.438c0 .236.201.429.446.429Zm3.308 0a.445.445 0 0 0 .438-.438.44.44 0 0 0-.447-.429.439.439 0 0 0-.437.438c0 .236.201.429.446.429Z" clip-rule="evenodd"></path><path d="M9.076 11.806H6.924v2.197a.859.859 0 0 1-.858.857.859.859 0 0 1-.857-.857v-2.197h-.035c-.586 0-1.059-.49-1.059-1.085V5.06h7.779v5.661c0 .604-.473 1.085-1.059 1.085h-.044v2.197a.859.859 0 0 1-.857.857.859.859 0 0 1-.858-.857v-2.197Z"></path><path d="M3.59 6.407a.859.859 0 0 0-.857-.857.859.859 0 0 0-.858.857v3.675c0 .473.385.858.857.858a.859.859 0 0 0 .858-.857V6.406Z"></path><path d="M14.125 6.407a.859.859 0 0 0-.857-.857.859.859 0 0 0-.858.857v3.675c0 .473.385.858.857.858a.859.859 0 0 0 .858-.857V6.406Z"></path></g><defs><clipPath id="prefix__clip0_4814_3490"><rect width="14" height="14" fill="#fff" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconSocialAndroidStatic extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialAndroidStatic extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--androidStatic', '', null, 'IconSocialAndroidStatic');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--androidStatic', '', null, 'IconSocialAndroidStatic');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--androidStatic');
         this.root.append(svg);
     }

package/dist/IconSocialAndroidStaticLarge.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--androidStaticLarge"><path fill="#A4C639" fill-rule="evenodd" d="M15.204 3.75c-1.714.164-3.243.85-4.373 1.873L9.525 3.365a.17.17 0 0 0-.227-.061.17.17 0 0 0-.062.227l1.347 2.328C9.51 6.934 8.855 8.333 8.833 9.866h14.342c-.021-1.537-.682-2.94-1.761-4.016l1.341-2.319a.17.17 0 0 0-.061-.227.17.17 0 0 0-.228.061l-1.3 2.25c-1.131-1.018-2.656-1.701-4.361-1.865h-1.601Zm-2.161 4.086a.812.812 0 0 0 .822-.805v-.009a.812.812 0 0 0-.822-.805.825.825 0 0 0-.823.814c0 .446.368.805.823.805Zm6.134 0a.812.812 0 0 0 .822-.805v-.009a.812.812 0 0 0-.822-.805.825.825 0 0 0-.823.814c0 .446.367.805.823.805Z" clip-rule="evenodd"></path><path fill="#A4C639" d="M17.995 23.061h-3.99v4.095a1.593 1.593 0 0 1-3.185 0v-4.095h-.07c-1.094 0-1.969-.892-1.969-2.003V10.733c0-.031.002-.062.005-.092a1.29 1.29 0 0 0 .004-.092h14.429v10.509c0 1.11-.875 2.003-1.969 2.003h-.07v4.095a1.593 1.593 0 0 1-3.185 0v-4.095Z"></path><path fill="#A4C639" d="M7.819 13.06a1.593 1.593 0 0 0-3.185 0v6.816a1.593 1.593 0 1 0 3.185 0V13.06Z"></path><path fill="#A4C639" d="M27.366 13.06a1.593 1.593 0 0 0-3.185 0v6.816a1.593 1.593 0 1 0 3.185 0V13.06Z"></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--androidStaticLarge"><path fill="#A4C639" fill-rule="evenodd" d="M15.204 3.75c-1.714.164-3.243.85-4.373 1.873L9.525 3.365a.17.17 0 0 0-.227-.061.17.17 0 0 0-.062.227l1.347 2.328C9.51 6.934 8.855 8.333 8.833 9.866h14.342c-.021-1.537-.682-2.94-1.761-4.016l1.341-2.319a.17.17 0 0 0-.061-.227.17.17 0 0 0-.228.061l-1.3 2.25c-1.131-1.018-2.656-1.701-4.361-1.865h-1.601Zm-2.161 4.086a.812.812 0 0 0 .822-.805v-.009a.812.812 0 0 0-.822-.805.825.825 0 0 0-.823.814c0 .446.368.805.823.805Zm6.134 0a.812.812 0 0 0 .822-.805v-.009a.812.812 0 0 0-.822-.805.825.825 0 0 0-.823.814c0 .446.367.805.823.805Z" clip-rule="evenodd"></path><path fill="#A4C639" d="M17.995 23.061h-3.99v4.095a1.593 1.593 0 0 1-3.185 0v-4.095h-.07c-1.094 0-1.969-.892-1.969-2.003V10.733c0-.031.002-.062.005-.092a1.29 1.29 0 0 0 .004-.092h14.429v10.509c0 1.11-.875 2.003-1.969 2.003h-.07v4.095a1.593 1.593 0 0 1-3.185 0v-4.095Z"></path><path fill="#A4C639" d="M7.819 13.06a1.593 1.593 0 0 0-3.185 0v6.816a1.593 1.593 0 1 0 3.185 0V13.06Z"></path><path fill="#A4C639" d="M27.366 13.06a1.593 1.593 0 0 0-3.185 0v6.816a1.593 1.593 0 1 0 3.185 0V13.06Z"></path></svg>';
 
 class IconSocialAndroidStaticLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialAndroidStaticLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--androidStaticLarge', '', null, 'IconSocialAndroidStaticLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--androidStaticLarge', '', null, 'IconSocialAndroidStaticLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--androidStaticLarge');
         this.root.append(svg);
     }

package/dist/IconSocialApple.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--apple"><path d="M12.909 10.704c0 .061-.053.114-.07.166a7.068 7.068 0 0 1-1.558 2.546 1.671 1.671 0 0 1-2.021.28 2.135 2.135 0 0 0-2.144 0c-.31.17-.662.249-1.015.228a1.487 1.487 0 0 1-1.076-.613 7.368 7.368 0 0 1-1.978-5.119c.005-.539.118-1.071.333-1.566A2.844 2.844 0 0 1 7.3 5.121a1.531 1.531 0 0 0 1.514 0c.243-.124.498-.224.761-.297a3.246 3.246 0 0 1 1.925.201 2.17 2.17 0 0 1 1.111.945l-.49.437a2.766 2.766 0 0 0-.481.534 2.686 2.686 0 0 0 .376 3.133c.238.284.545.501.893.63Z"></path><path d="M10.38 1.875a2.31 2.31 0 0 1-.21 1.269A2.432 2.432 0 0 1 8.42 4.63c-.551.114-.543.123-.481-.437a2.739 2.739 0 0 1 2.178-2.319 2.42 2.42 0 0 1 .263 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--apple"><path d="M12.909 10.704c0 .061-.053.114-.07.166a7.068 7.068 0 0 1-1.558 2.546 1.671 1.671 0 0 1-2.021.28 2.135 2.135 0 0 0-2.144 0c-.31.17-.662.249-1.015.228a1.487 1.487 0 0 1-1.076-.613 7.368 7.368 0 0 1-1.978-5.119c.005-.539.118-1.071.333-1.566A2.844 2.844 0 0 1 7.3 5.121a1.531 1.531 0 0 0 1.514 0c.243-.124.498-.224.761-.297a3.246 3.246 0 0 1 1.925.201 2.17 2.17 0 0 1 1.111.945l-.49.437a2.766 2.766 0 0 0-.481.534 2.686 2.686 0 0 0 .376 3.133c.238.284.545.501.893.63Z"></path><path d="M10.38 1.875a2.31 2.31 0 0 1-.21 1.269A2.432 2.432 0 0 1 8.42 4.63c-.551.114-.543.123-.481-.437a2.739 2.739 0 0 1 2.178-2.319 2.42 2.42 0 0 1 .263 0Z"></path></svg>';
 
 class IconSocialApple extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialApple extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--apple', '', null, 'IconSocialApple');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--apple', '', null, 'IconSocialApple');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--apple');
         this.root.append(svg);
     }