@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/dist/IconSocialAppleCircle.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--appleCircle"><g clip-path="url(#prefix__clip0_927_672)"><path d="M8 1.175A6.781 6.781 0 1 0 14.78 8 6.79 6.79 0 0 0 8 1.175Zm0 12.25A5.468 5.468 0 1 1 8 2.488a5.468 5.468 0 0 1 0 10.937Z"></path><path d="M10.45 9.33a1.636 1.636 0 0 1-.228-1.916c.087-.106.183-.203.29-.289.095-.096.2-.175.305-.271a1.33 1.33 0 0 0-.682-.604 1.943 1.943 0 0 0-1.155-.123c-.16.046-.314.104-.464.175a.928.928 0 0 1-.927 0 1.75 1.75 0 0 0-2.407.92 2.555 2.555 0 0 0-.2.953 4.541 4.541 0 0 0 1.215 3.159.875.875 0 0 0 .657.367c.214.01.428-.036.62-.131a1.287 1.287 0 0 1 1.313 0 1.024 1.024 0 0 0 1.234-.175c.427-.444.752-.976.954-1.558a.47.47 0 0 1 0-.096 1.268 1.268 0 0 1-.525-.411Z"></path><path d="M8.28 5.979a1.479 1.479 0 0 0 1.059-.875c.118-.242.163-.512.13-.779h-.157A1.671 1.671 0 0 0 8 5.716c-.053.341-.061.333.28.263Z"></path></g><defs><clipPath id="prefix__clip0_927_672"><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--appleCircle"><g clip-path="url(#prefix__clip0_927_672)"><path d="M8 1.175A6.781 6.781 0 1 0 14.78 8 6.79 6.79 0 0 0 8 1.175Zm0 12.25A5.468 5.468 0 1 1 8 2.488a5.468 5.468 0 0 1 0 10.937Z"></path><path d="M10.45 9.33a1.636 1.636 0 0 1-.228-1.916c.087-.106.183-.203.29-.289.095-.096.2-.175.305-.271a1.33 1.33 0 0 0-.682-.604 1.943 1.943 0 0 0-1.155-.123c-.16.046-.314.104-.464.175a.928.928 0 0 1-.927 0 1.75 1.75 0 0 0-2.407.92 2.555 2.555 0 0 0-.2.953 4.541 4.541 0 0 0 1.215 3.159.875.875 0 0 0 .657.367c.214.01.428-.036.62-.131a1.287 1.287 0 0 1 1.313 0 1.024 1.024 0 0 0 1.234-.175c.427-.444.752-.976.954-1.558a.47.47 0 0 1 0-.096 1.268 1.268 0 0 1-.525-.411Z"></path><path d="M8.28 5.979a1.479 1.479 0 0 0 1.059-.875c.118-.242.163-.512.13-.779h-.157A1.671 1.671 0 0 0 8 5.716c-.053.341-.061.333.28.263Z"></path></g><defs><clipPath id="prefix__clip0_927_672"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconSocialAppleCircle extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialAppleCircle extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--appleCircle', '', null, 'IconSocialAppleCircle');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--appleCircle', '', null, 'IconSocialAppleCircle');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--appleCircle');
         this.root.append(svg);
     }

package/dist/IconSocialAppleCircleFilled.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--appleCircleFilled"><g clip-path="url(#prefix__clip0_1611_720)"><path d="M8 1.175A6.781 6.781 0 1 0 14.78 8 6.79 6.79 0 0 0 8 1.175Zm0 4.541a1.671 1.671 0 0 1 1.312-1.409h.158c.032.267-.013.538-.131.78a1.479 1.479 0 0 1-1.06.874c-.34.088-.332.096-.28-.245Zm3.019 4.034a.47.47 0 0 0 0 .096 4.261 4.261 0 0 1-.954 1.558 1.024 1.024 0 0 1-1.234.175 1.286 1.286 0 0 0-1.312 0c-.193.095-.407.14-.622.131a.875.875 0 0 1-.656-.368 4.541 4.541 0 0 1-1.26-3.167c.005-.328.074-.652.201-.954a1.75 1.75 0 0 1 2.407-.919.928.928 0 0 0 .927 0c.15-.07.305-.13.464-.175a1.943 1.943 0 0 1 1.155.123c.287.108.528.312.682.577-.105.097-.21.175-.306.272a2.014 2.014 0 0 0-.289.323 1.636 1.636 0 0 0 .228 1.917c.15.178.347.311.569.385v.026Z"></path></g><defs><clipPath id="prefix__clip0_1611_720"><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--appleCircleFilled"><g clip-path="url(#prefix__clip0_1611_720)"><path d="M8 1.175A6.781 6.781 0 1 0 14.78 8 6.79 6.79 0 0 0 8 1.175Zm0 4.541a1.671 1.671 0 0 1 1.312-1.409h.158c.032.267-.013.538-.131.78a1.479 1.479 0 0 1-1.06.874c-.34.088-.332.096-.28-.245Zm3.019 4.034a.47.47 0 0 0 0 .096 4.261 4.261 0 0 1-.954 1.558 1.024 1.024 0 0 1-1.234.175 1.286 1.286 0 0 0-1.312 0c-.193.095-.407.14-.622.131a.875.875 0 0 1-.656-.368 4.541 4.541 0 0 1-1.26-3.167c.005-.328.074-.652.201-.954a1.75 1.75 0 0 1 2.407-.919.928.928 0 0 0 .927 0c.15-.07.305-.13.464-.175a1.943 1.943 0 0 1 1.155.123c.287.108.528.312.682.577-.105.097-.21.175-.306.272a2.014 2.014 0 0 0-.289.323 1.636 1.636 0 0 0 .228 1.917c.15.178.347.311.569.385v.026Z"></path></g><defs><clipPath id="prefix__clip0_1611_720"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconSocialAppleCircleFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialAppleCircleFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--appleCircleFilled', '', null, 'IconSocialAppleCircleFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--appleCircleFilled', '', null, 'IconSocialAppleCircleFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--appleCircleFilled');
         this.root.append(svg);
     }

package/dist/IconSocialAppleCircleFilledLarge.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--appleCircleFilledLarge"><g clip-path="url(#prefix__clip0_1611_724)"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm0 7.639a3.378 3.378 0 0 1 2.625-2.835h.315a2.722 2.722 0 0 1-.254 1.557 2.976 2.976 0 0 1-2.143 1.838c-.665.122-.648.131-.543-.56Zm6.125 8.111a1.005 1.005 0 0 0-.087.201 8.81 8.81 0 0 1-1.925 3.142 2.056 2.056 0 0 1-2.494.35 2.625 2.625 0 0 0-2.625 0 2.441 2.441 0 0 1-1.26.28 1.838 1.838 0 0 1-1.322-.753 9.161 9.161 0 0 1-2.537-6.361 4.917 4.917 0 0 1 .411-1.934 3.5 3.5 0 0 1 4.848-1.855 1.863 1.863 0 0 0 1.863 0c.302-.155.618-.279.945-.367a4.034 4.034 0 0 1 2.337.245 2.783 2.783 0 0 1 1.365 1.172c-.21.184-.411.35-.604.543-.23.188-.43.409-.595.656a3.298 3.298 0 0 0 .464 3.858c.316.388.739.674 1.216.823Z"></path></g><defs><clipPath id="prefix__clip0_1611_724"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--appleCircleFilledLarge"><g clip-path="url(#prefix__clip0_1611_724)"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm0 7.639a3.378 3.378 0 0 1 2.625-2.835h.315a2.722 2.722 0 0 1-.254 1.557 2.976 2.976 0 0 1-2.143 1.838c-.665.122-.648.131-.543-.56Zm6.125 8.111a1.005 1.005 0 0 0-.087.201 8.81 8.81 0 0 1-1.925 3.142 2.056 2.056 0 0 1-2.494.35 2.625 2.625 0 0 0-2.625 0 2.441 2.441 0 0 1-1.26.28 1.838 1.838 0 0 1-1.322-.753 9.161 9.161 0 0 1-2.537-6.361 4.917 4.917 0 0 1 .411-1.934 3.5 3.5 0 0 1 4.848-1.855 1.863 1.863 0 0 0 1.863 0c.302-.155.618-.279.945-.367a4.034 4.034 0 0 1 2.337.245 2.783 2.783 0 0 1 1.365 1.172c-.21.184-.411.35-.604.543-.23.188-.43.409-.595.656a3.298 3.298 0 0 0 .464 3.858c.316.388.739.674 1.216.823Z"></path></g><defs><clipPath id="prefix__clip0_1611_724"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
 
 class IconSocialAppleCircleFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialAppleCircleFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--appleCircleFilledLarge', '', null, 'IconSocialAppleCircleFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--appleCircleFilledLarge', '', null, 'IconSocialAppleCircleFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--appleCircleFilledLarge');
         this.root.append(svg);
     }

package/dist/IconSocialAppleCircleLarge.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--appleCircleLarge"><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><path d="M22.125 19.5a.999.999 0 0 0-.087.201 8.812 8.812 0 0 1-1.925 3.142 2.056 2.056 0 0 1-2.494.35 2.626 2.626 0 0 0-2.625 0 2.441 2.441 0 0 1-1.26.28 1.836 1.836 0 0 1-1.321-.753 9.16 9.16 0 0 1-2.538-6.361 4.917 4.917 0 0 1 .411-1.934 3.5 3.5 0 0 1 4.848-1.855 1.863 1.863 0 0 0 1.864 0c.3-.155.617-.279.945-.367a4.034 4.034 0 0 1 2.336.245 2.783 2.783 0 0 1 1.365 1.172c-.21.184-.411.35-.604.543-.23.188-.43.409-.595.656a3.299 3.299 0 0 0 .464 3.858c.316.388.739.674 1.216.823Z"></path><path d="M18.958 8.528a2.72 2.72 0 0 1-.254 1.557 2.974 2.974 0 0 1-2.144 1.837c-.682.15-.665.158-.595-.533a3.386 3.386 0 0 1 2.66-2.835c.123-.018.228-.018.333-.026Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--appleCircleLarge"><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><path d="M22.125 19.5a.999.999 0 0 0-.087.201 8.812 8.812 0 0 1-1.925 3.142 2.056 2.056 0 0 1-2.494.35 2.626 2.626 0 0 0-2.625 0 2.441 2.441 0 0 1-1.26.28 1.836 1.836 0 0 1-1.321-.753 9.16 9.16 0 0 1-2.538-6.361 4.917 4.917 0 0 1 .411-1.934 3.5 3.5 0 0 1 4.848-1.855 1.863 1.863 0 0 0 1.864 0c.3-.155.617-.279.945-.367a4.034 4.034 0 0 1 2.336.245 2.783 2.783 0 0 1 1.365 1.172c-.21.184-.411.35-.604.543-.23.188-.43.409-.595.656a3.299 3.299 0 0 0 .464 3.858c.316.388.739.674 1.216.823Z"></path><path d="M18.958 8.528a2.72 2.72 0 0 1-.254 1.557 2.974 2.974 0 0 1-2.144 1.837c-.682.15-.665.158-.595-.533a3.386 3.386 0 0 1 2.66-2.835c.123-.018.228-.018.333-.026Z"></path></svg>';
 
 class IconSocialAppleCircleLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialAppleCircleLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--appleCircleLarge', '', null, 'IconSocialAppleCircleLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--appleCircleLarge', '', null, 'IconSocialAppleCircleLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--appleCircleLarge');
         this.root.append(svg);
     }

package/dist/IconSocialAppleLarge.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--appleLarge"><g clip-path="url(#prefix__clip0_923_536)"><path d="M25.94 21.679v.07c-.044.114-.105.219-.14.332a14.264 14.264 0 0 1-3.159 5.145 3.334 3.334 0 0 1-4.077.569 4.287 4.287 0 0 0-4.332 0 4.052 4.052 0 0 1-2.056.464 3.03 3.03 0 0 1-2.17-1.243A14.963 14.963 0 0 1 5.99 16.604a8.041 8.041 0 0 1 .674-3.168c1.365-3.115 5.11-4.707 7.944-3.045a3.072 3.072 0 0 0 3.054 0 7.476 7.476 0 0 1 1.54-.595 6.58 6.58 0 0 1 3.798.385 4.488 4.488 0 0 1 2.248 1.917c-.34.306-.682.577-.997.874-.37.31-.697.67-.971 1.068a5.425 5.425 0 0 0 .787 6.335 4.27 4.27 0 0 0 1.873 1.304Z"></path><path d="M20.821 3.75a4.655 4.655 0 0 1-.446 2.564 4.942 4.942 0 0 1-3.5 3.01c-1.103.236-1.085.245-.963-.875a5.513 5.513 0 0 1 4.375-4.638c.177-.03.355-.05.534-.061Z"></path></g><defs><clipPath id="prefix__clip0_923_536"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--appleLarge"><g clip-path="url(#prefix__clip0_923_536)"><path d="M25.94 21.679v.07c-.044.114-.105.219-.14.332a14.264 14.264 0 0 1-3.159 5.145 3.334 3.334 0 0 1-4.077.569 4.287 4.287 0 0 0-4.332 0 4.052 4.052 0 0 1-2.056.464 3.03 3.03 0 0 1-2.17-1.243A14.963 14.963 0 0 1 5.99 16.604a8.041 8.041 0 0 1 .674-3.168c1.365-3.115 5.11-4.707 7.944-3.045a3.072 3.072 0 0 0 3.054 0 7.476 7.476 0 0 1 1.54-.595 6.58 6.58 0 0 1 3.798.385 4.488 4.488 0 0 1 2.248 1.917c-.34.306-.682.577-.997.874-.37.31-.697.67-.971 1.068a5.425 5.425 0 0 0 .787 6.335 4.27 4.27 0 0 0 1.873 1.304Z"></path><path d="M20.821 3.75a4.655 4.655 0 0 1-.446 2.564 4.942 4.942 0 0 1-3.5 3.01c-1.103.236-1.085.245-.963-.875a5.513 5.513 0 0 1 4.375-4.638c.177-.03.355-.05.534-.061Z"></path></g><defs><clipPath id="prefix__clip0_923_536"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
 
 class IconSocialAppleLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialAppleLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--appleLarge', '', null, 'IconSocialAppleLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--appleLarge', '', null, 'IconSocialAppleLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--appleLarge');
         this.root.append(svg);
     }

package/dist/IconSocialBloggerCircle.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--bloggerCircle"><g clip-path="url(#prefix__clip0_3633_3283)"><path d="M8 1.175A6.781 6.781 0 1 0 14.78 8 6.79 6.79 0 0 0 8 1.175Zm0 12.25A5.468 5.468 0 1 1 8 2.488a5.468 5.468 0 0 1 0 10.937Z"></path><path d="M10.84 7.383a.364.364 0 0 0-.23-.079h-.336a.39.39 0 0 1-.398-.379c0-.17-.022-.338-.066-.502a1.942 1.942 0 0 0-.698-1.026A1.957 1.957 0 0 0 7.934 5h-.987a1.952 1.952 0 0 0-1.536.749A1.937 1.937 0 0 0 5 6.929v2.146c0 .148.016.296.049.44a1.944 1.944 0 0 0 1.177 1.344c.23.093.477.141.725.141h2.102c.169 0 .336-.021.5-.062A1.937 1.937 0 0 0 11 9.061V7.688a.379.379 0 0 0-.16-.304Zm-4.017-.801h1.173a.373.373 0 0 1 .362.29.373.373 0 0 1-.34.44H6.81a.372.372 0 0 1-.291-.36.369.369 0 0 1 .29-.362l.014-.008Zm2.34 2.872H6.913a.355.355 0 0 1-.365-.298.35.35 0 0 1 .285-.398.382.382 0 0 1 .102 0H9.08a.369.369 0 0 1 .12 0 .354.354 0 0 1 .258.357.352.352 0 0 1-.294.33v.009Z"></path></g><defs><clipPath id="prefix__clip0_3633_3283"><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--bloggerCircle"><g clip-path="url(#prefix__clip0_3633_3283)"><path d="M8 1.175A6.781 6.781 0 1 0 14.78 8 6.79 6.79 0 0 0 8 1.175Zm0 12.25A5.468 5.468 0 1 1 8 2.488a5.468 5.468 0 0 1 0 10.937Z"></path><path d="M10.84 7.383a.364.364 0 0 0-.23-.079h-.336a.39.39 0 0 1-.398-.379c0-.17-.022-.338-.066-.502a1.942 1.942 0 0 0-.698-1.026A1.957 1.957 0 0 0 7.934 5h-.987a1.952 1.952 0 0 0-1.536.749A1.937 1.937 0 0 0 5 6.929v2.146c0 .148.016.296.049.44a1.944 1.944 0 0 0 1.177 1.344c.23.093.477.141.725.141h2.102c.169 0 .336-.021.5-.062A1.937 1.937 0 0 0 11 9.061V7.688a.379.379 0 0 0-.16-.304Zm-4.017-.801h1.173a.373.373 0 0 1 .362.29.373.373 0 0 1-.34.44H6.81a.372.372 0 0 1-.291-.36.369.369 0 0 1 .29-.362l.014-.008Zm2.34 2.872H6.913a.355.355 0 0 1-.365-.298.35.35 0 0 1 .285-.398.382.382 0 0 1 .102 0H9.08a.369.369 0 0 1 .12 0 .354.354 0 0 1 .258.357.352.352 0 0 1-.294.33v.009Z"></path></g><defs><clipPath id="prefix__clip0_3633_3283"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconSocialBloggerCircle extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialBloggerCircle extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bloggerCircle', '', null, 'IconSocialBloggerCircle');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bloggerCircle', '', null, 'IconSocialBloggerCircle');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--bloggerCircle');
         this.root.append(svg);
     }

package/dist/IconSocialBloggerCircleFilled.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--bloggerCircleFilled"><g clip-path="url(#prefix__clip0_3633_3280)"><path d="m6.823 6.582-.013.008a.372.372 0 0 0-.291.362.369.369 0 0 0 .29.36h1.209a.378.378 0 0 0 .336-.284.373.373 0 0 0 .004-.156.37.37 0 0 0-.362-.29H6.823Z"></path><path d="M6.912 9.454h2.252v-.01a.354.354 0 0 0 .294-.329.351.351 0 0 0-.259-.357.369.369 0 0 0-.12 0H6.935a.337.337 0 0 0-.372.23.35.35 0 0 0 .35.466Z"></path><path fill-rule="evenodd" d="M8 1.175A6.781 6.781 0 1 0 14.78 8 6.79 6.79 0 0 0 8 1.175Zm2.61 6.129c.084 0 .165.027.23.08a.38.38 0 0 1 .16.303v1.375c0 .427-.142.843-.403 1.183-.262.339-.629.583-1.044.693-.164.04-.331.061-.5.062H6.951c-.248 0-.495-.048-.725-.141a1.955 1.955 0 0 1-1.177-1.344A1.97 1.97 0 0 1 5 9.075V6.93c.003-.428.147-.844.411-1.181A1.952 1.952 0 0 1 6.947 5h.987c.425 0 .84.14 1.178.397.339.257.584.617.698 1.026.044.164.066.333.066.502a.386.386 0 0 0 .252.353.444.444 0 0 0 .146.026h.337Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_3633_3280"><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--bloggerCircleFilled"><g clip-path="url(#prefix__clip0_3633_3280)"><path d="m6.823 6.582-.013.008a.372.372 0 0 0-.291.362.369.369 0 0 0 .29.36h1.209a.378.378 0 0 0 .336-.284.373.373 0 0 0 .004-.156.37.37 0 0 0-.362-.29H6.823Z"></path><path d="M6.912 9.454h2.252v-.01a.354.354 0 0 0 .294-.329.351.351 0 0 0-.259-.357.369.369 0 0 0-.12 0H6.935a.337.337 0 0 0-.372.23.35.35 0 0 0 .35.466Z"></path><path fill-rule="evenodd" d="M8 1.175A6.781 6.781 0 1 0 14.78 8 6.79 6.79 0 0 0 8 1.175Zm2.61 6.129c.084 0 .165.027.23.08a.38.38 0 0 1 .16.303v1.375c0 .427-.142.843-.403 1.183-.262.339-.629.583-1.044.693-.164.04-.331.061-.5.062H6.951c-.248 0-.495-.048-.725-.141a1.955 1.955 0 0 1-1.177-1.344A1.97 1.97 0 0 1 5 9.075V6.93c.003-.428.147-.844.411-1.181A1.952 1.952 0 0 1 6.947 5h.987c.425 0 .84.14 1.178.397.339.257.584.617.698 1.026.044.164.066.333.066.502a.386.386 0 0 0 .252.353.444.444 0 0 0 .146.026h.337Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_3633_3280"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconSocialBloggerCircleFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialBloggerCircleFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bloggerCircleFilled', '', null, 'IconSocialBloggerCircleFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bloggerCircleFilled', '', null, 'IconSocialBloggerCircleFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--bloggerCircleFilled');
         this.root.append(svg);
     }

package/dist/IconSocialBloggerCircleFilledLarge.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--bloggerCircleFilledLarge"><path d="M13.375 14.399c.081.009.164.009.245 0h2.537a.875.875 0 0 0-.052-1.706h-2.721a.875.875 0 0 0 0 1.67l-.009.036Z"></path><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm6.93 14.691a4.471 4.471 0 0 1-3.316 4.314 4.55 4.55 0 0 1-1.138.14h-4.821a4.445 4.445 0 0 1-4.331-3.456 4.533 4.533 0 0 1-.114-.971v-4.935a4.454 4.454 0 0 1 3.342-4.297c.364-.09.737-.137 1.112-.14h2.266a4.454 4.454 0 0 1 4.445 4.428.875.875 0 0 0 .578.805.875.875 0 0 0 .332.061h.77c.192 0 .379.068.525.192a.874.874 0 0 1 .35.7v3.16Z"></path><path d="M18.826 17.75a.956.956 0 0 0-.271 0h-4.918a1.067 1.067 0 0 0-.262 0 .813.813 0 0 0-.613.534.778.778 0 0 0 .158.796.805.805 0 0 0 .639.28h5.153a.804.804 0 0 0 .088-1.584l.026-.026Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--bloggerCircleFilledLarge"><path d="M13.375 14.399c.081.009.164.009.245 0h2.537a.875.875 0 0 0-.052-1.706h-2.721a.875.875 0 0 0 0 1.67l-.009.036Z"></path><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm6.93 14.691a4.471 4.471 0 0 1-3.316 4.314 4.55 4.55 0 0 1-1.138.14h-4.821a4.445 4.445 0 0 1-4.331-3.456 4.533 4.533 0 0 1-.114-.971v-4.935a4.454 4.454 0 0 1 3.342-4.297c.364-.09.737-.137 1.112-.14h2.266a4.454 4.454 0 0 1 4.445 4.428.875.875 0 0 0 .578.805.875.875 0 0 0 .332.061h.77c.192 0 .379.068.525.192a.874.874 0 0 1 .35.7v3.16Z"></path><path d="M18.826 17.75a.956.956 0 0 0-.271 0h-4.918a1.067 1.067 0 0 0-.262 0 .813.813 0 0 0-.613.534.778.778 0 0 0 .158.796.805.805 0 0 0 .639.28h5.153a.804.804 0 0 0 .088-1.584l.026-.026Z"></path></svg>';
 
 class IconSocialBloggerCircleFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialBloggerCircleFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bloggerCircleFilledLarge', '', null, 'IconSocialBloggerCircleFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bloggerCircleFilledLarge', '', null, 'IconSocialBloggerCircleFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--bloggerCircleFilledLarge');
         this.root.append(svg);
     }

package/dist/IconSocialBloggerCircleLarge.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--bloggerCircleLarge"><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><path d="M21.626 14.775a.718.718 0 0 0-.455-.158h-.665a.875.875 0 0 1-.288-.052.77.77 0 0 1-.5-.7 3.81 3.81 0 0 0-.13-.998 3.858 3.858 0 0 0-3.71-2.826h-1.952a3.858 3.858 0 0 0-3.85 3.832v4.262c0 .294.032.588.096.875a3.867 3.867 0 0 0 2.328 2.669c.456.185.943.28 1.435.28h4.156c.333-.002.665-.043.989-.123a3.86 3.86 0 0 0 2.861-3.727v-2.73a.754.754 0 0 0-.315-.604Zm-7.945-1.593H16a.735.735 0 0 1 .718.578.742.742 0 0 1-.674.875h-2.389a.735.735 0 0 1 0-1.435l.026-.018Zm4.629 5.705h-4.454a.7.7 0 0 1-.691-.927.665.665 0 0 1 .735-.455h4.244a.726.726 0 0 1 .236 0 .7.7 0 0 1-.07 1.365v.017Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--bloggerCircleLarge"><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><path d="M21.626 14.775a.718.718 0 0 0-.455-.158h-.665a.875.875 0 0 1-.288-.052.77.77 0 0 1-.5-.7 3.81 3.81 0 0 0-.13-.998 3.858 3.858 0 0 0-3.71-2.826h-1.952a3.858 3.858 0 0 0-3.85 3.832v4.262c0 .294.032.588.096.875a3.867 3.867 0 0 0 2.328 2.669c.456.185.943.28 1.435.28h4.156c.333-.002.665-.043.989-.123a3.86 3.86 0 0 0 2.861-3.727v-2.73a.754.754 0 0 0-.315-.604Zm-7.945-1.593H16a.735.735 0 0 1 .718.578.742.742 0 0 1-.674.875h-2.389a.735.735 0 0 1 0-1.435l.026-.018Zm4.629 5.705h-4.454a.7.7 0 0 1-.691-.927.665.665 0 0 1 .735-.455h4.244a.726.726 0 0 1 .236 0 .7.7 0 0 1-.07 1.365v.017Z"></path></svg>';
 
 class IconSocialBloggerCircleLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialBloggerCircleLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bloggerCircleLarge', '', null, 'IconSocialBloggerCircleLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bloggerCircleLarge', '', null, 'IconSocialBloggerCircleLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--bloggerCircleLarge');
         this.root.append(svg);
     }

package/dist/IconSocialBloggerStatic.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--bloggerStatic"><path fill="#F06A35" d="M3.371 13.953a1.891 1.891 0 0 1-.597-.268 2.18 2.18 0 0 1-.455-.44 2.29 2.29 0 0 1-.268-.589C2 12.473 2 12.4 2 8.01c-.002-4.369 0-4.465.047-4.653a1.81 1.81 0 0 1 1.373-1.32c.194-.043 8.895-.05 9.105-.007a1.79 1.79 0 0 1 1.275.975c.206.41.187-.041.197 4.837.006 3.103 0 4.406-.02 4.569-.092.76-.615 1.348-1.368 1.541-.192.05-.26.05-4.63.049-4.227-.002-4.444-.004-4.609-.047Z"></path><path fill="#fff" d="M9.698 11.698c.539-.073.961-.29 1.358-.695.286-.294.466-.611.583-1.033.049-.175.053-.26.062-1.288.007-.776.001-1.14-.02-1.231a.477.477 0 0 0-.206-.308c-.029-.016-.215-.036-.414-.045-.333-.015-.37-.021-.476-.083-.166-.098-.212-.204-.213-.49 0-.55-.228-1.058-.678-1.518a2.529 2.529 0 0 0-1.087-.673c-.098-.03-.317-.04-1.05-.048-1.15-.014-1.405.01-1.797.166-.722.288-1.24.895-1.43 1.673-.035.146-.042.38-.05 1.726-.011 1.686 0 1.934.106 2.268.087.276.174.445.355.685.344.458.86.788 1.375.881.245.045 3.272.056 3.582.013Z"></path><path fill="#F06A35" d="M6.517 7.07c-.275-.076-.378-.472-.176-.677.13-.13.165-.136.976-.136.727 0 .752.002.859.056.154.078.221.188.221.364 0 .158-.063.27-.203.358-.076.048-.121.051-.834.055-.44.003-.79-.005-.843-.02Zm-.034 2.666a.465.465 0 0 1-.248-.322.469.469 0 0 1 .136-.373c.117-.106.169-.11 1.613-.11 1.486-.002 1.478-.002 1.62.13a.41.41 0 0 1-.084.653l-.246.04-1.284.015c-1.129.013-1.449-.007-1.507-.033Z"></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--bloggerStatic"><path fill="#F06A35" d="M3.371 13.953a1.891 1.891 0 0 1-.597-.268 2.18 2.18 0 0 1-.455-.44 2.29 2.29 0 0 1-.268-.589C2 12.473 2 12.4 2 8.01c-.002-4.369 0-4.465.047-4.653a1.81 1.81 0 0 1 1.373-1.32c.194-.043 8.895-.05 9.105-.007a1.79 1.79 0 0 1 1.275.975c.206.41.187-.041.197 4.837.006 3.103 0 4.406-.02 4.569-.092.76-.615 1.348-1.368 1.541-.192.05-.26.05-4.63.049-4.227-.002-4.444-.004-4.609-.047Z"></path><path fill="#fff" d="M9.698 11.698c.539-.073.961-.29 1.358-.695.286-.294.466-.611.583-1.033.049-.175.053-.26.062-1.288.007-.776.001-1.14-.02-1.231a.477.477 0 0 0-.206-.308c-.029-.016-.215-.036-.414-.045-.333-.015-.37-.021-.476-.083-.166-.098-.212-.204-.213-.49 0-.55-.228-1.058-.678-1.518a2.529 2.529 0 0 0-1.087-.673c-.098-.03-.317-.04-1.05-.048-1.15-.014-1.405.01-1.797.166-.722.288-1.24.895-1.43 1.673-.035.146-.042.38-.05 1.726-.011 1.686 0 1.934.106 2.268.087.276.174.445.355.685.344.458.86.788 1.375.881.245.045 3.272.056 3.582.013Z"></path><path fill="#F06A35" d="M6.517 7.07c-.275-.076-.378-.472-.176-.677.13-.13.165-.136.976-.136.727 0 .752.002.859.056.154.078.221.188.221.364 0 .158-.063.27-.203.358-.076.048-.121.051-.834.055-.44.003-.79-.005-.843-.02Zm-.034 2.666a.465.465 0 0 1-.248-.322.469.469 0 0 1 .136-.373c.117-.106.169-.11 1.613-.11 1.486-.002 1.478-.002 1.62.13a.41.41 0 0 1-.084.653l-.246.04-1.284.015c-1.129.013-1.449-.007-1.507-.033Z"></path></svg>';
 
 class IconSocialBloggerStatic extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialBloggerStatic extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bloggerStatic', '', null, 'IconSocialBloggerStatic');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bloggerStatic', '', null, 'IconSocialBloggerStatic');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--bloggerStatic');
         this.root.append(svg);
     }

package/dist/IconSocialBloggerStaticLarge.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--bloggerStaticLarge"><path fill="#F06A35" d="M6.742 27.905a3.78 3.78 0 0 1-1.194-.536c-.302-.206-.743-.632-.91-.879a4.579 4.579 0 0 1-.536-1.178c-.098-.366-.1-.511-.102-9.294-.001-8.737 0-8.93.096-9.305a3.618 3.618 0 0 1 2.745-2.64c.39-.086 17.791-.102 18.212-.016a3.58 3.58 0 0 1 2.549 1.95c.411.822.375-.082.393 9.674.012 6.208.001 8.814-.038 9.138-.186 1.52-1.232 2.698-2.737 3.083-.385.099-.519.1-9.261.097-8.453-.002-8.887-.007-9.217-.093Z"></path><path fill="#fff" d="M19.396 23.397c1.078-.147 1.923-.58 2.715-1.391.574-.587.933-1.222 1.167-2.065.098-.35.106-.521.124-2.577.013-1.552.002-2.28-.038-2.463-.059-.266-.224-.513-.414-.615-.058-.032-.43-.073-.828-.09-.666-.03-.74-.043-.951-.166-.334-.196-.425-.408-.426-.982-.002-1.096-.458-2.115-1.358-3.034-.641-.654-1.357-1.097-2.173-1.346-.196-.06-.633-.08-2.1-.097-2.3-.027-2.81.02-3.594.333-1.444.576-2.481 1.79-2.86 3.347-.07.292-.084.76-.101 3.452-.021 3.372.002 3.867.212 4.535.174.552.35.89.71 1.37.689.915 1.72 1.576 2.751 1.763.49.088 6.544.11 7.164.026Z"></path><path fill="#F06A35" d="M13.034 14.14c-.55-.152-.757-.944-.352-1.354.26-.261.33-.271 1.951-.271 1.456 0 1.504.003 1.718.11.309.157.443.377.443.728 0 .317-.126.54-.407.718-.15.096-.241.102-1.667.11-.88.005-1.581-.012-1.686-.04Zm-.069 5.332a.93.93 0 0 1-.495-.645.937.937 0 0 1 .272-.744c.235-.213.338-.22 3.226-.222 2.972-.003 2.956-.004 3.238.26a.82.82 0 0 1-.165 1.307l-.493.08-2.569.03c-2.257.026-2.896-.015-3.014-.066Z"></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--bloggerStaticLarge"><path fill="#F06A35" d="M6.742 27.905a3.78 3.78 0 0 1-1.194-.536c-.302-.206-.743-.632-.91-.879a4.579 4.579 0 0 1-.536-1.178c-.098-.366-.1-.511-.102-9.294-.001-8.737 0-8.93.096-9.305a3.618 3.618 0 0 1 2.745-2.64c.39-.086 17.791-.102 18.212-.016a3.58 3.58 0 0 1 2.549 1.95c.411.822.375-.082.393 9.674.012 6.208.001 8.814-.038 9.138-.186 1.52-1.232 2.698-2.737 3.083-.385.099-.519.1-9.261.097-8.453-.002-8.887-.007-9.217-.093Z"></path><path fill="#fff" d="M19.396 23.397c1.078-.147 1.923-.58 2.715-1.391.574-.587.933-1.222 1.167-2.065.098-.35.106-.521.124-2.577.013-1.552.002-2.28-.038-2.463-.059-.266-.224-.513-.414-.615-.058-.032-.43-.073-.828-.09-.666-.03-.74-.043-.951-.166-.334-.196-.425-.408-.426-.982-.002-1.096-.458-2.115-1.358-3.034-.641-.654-1.357-1.097-2.173-1.346-.196-.06-.633-.08-2.1-.097-2.3-.027-2.81.02-3.594.333-1.444.576-2.481 1.79-2.86 3.347-.07.292-.084.76-.101 3.452-.021 3.372.002 3.867.212 4.535.174.552.35.89.71 1.37.689.915 1.72 1.576 2.751 1.763.49.088 6.544.11 7.164.026Z"></path><path fill="#F06A35" d="M13.034 14.14c-.55-.152-.757-.944-.352-1.354.26-.261.33-.271 1.951-.271 1.456 0 1.504.003 1.718.11.309.157.443.377.443.728 0 .317-.126.54-.407.718-.15.096-.241.102-1.667.11-.88.005-1.581-.012-1.686-.04Zm-.069 5.332a.93.93 0 0 1-.495-.645.937.937 0 0 1 .272-.744c.235-.213.338-.22 3.226-.222 2.972-.003 2.956-.004 3.238.26a.82.82 0 0 1-.165 1.307l-.493.08-2.569.03c-2.257.026-2.896-.015-3.014-.066Z"></path></svg>';
 
 class IconSocialBloggerStaticLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialBloggerStaticLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bloggerStaticLarge', '', null, 'IconSocialBloggerStaticLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--bloggerStaticLarge', '', null, 'IconSocialBloggerStaticLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--bloggerStaticLarge');
         this.root.append(svg);
     }

package/dist/IconSocialFacebookCircle.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--facebookCircle"><g clip-path="url(#prefix__clip0_889_539)"><path d="M8 1.175A6.781 6.781 0 1 0 14.782 8 6.79 6.79 0 0 0 8 1.175Zm0 12.25A5.469 5.469 0 1 1 8 2.487a5.469 5.469 0 0 1 0 10.938Z"></path><path d="M7.213 6.145v.98H6.058v1.313h1.155v3.167c.234.043.47.063.709.061a3.81 3.81 0 0 0 .708-.061v-3.15h1.06l.2-1.33H8.63V6.25a.656.656 0 0 1 .744-.717h.569V4.5a7 7 0 0 0-1.015-.087 1.601 1.601 0 0 0-1.715 1.732Z"></path></g><defs><clipPath id="prefix__clip0_889_539"><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--facebookCircle"><g clip-path="url(#prefix__clip0_889_539)"><path d="M8 1.175A6.781 6.781 0 1 0 14.782 8 6.79 6.79 0 0 0 8 1.175Zm0 12.25A5.469 5.469 0 1 1 8 2.487a5.469 5.469 0 0 1 0 10.938Z"></path><path d="M7.213 6.145v.98H6.058v1.313h1.155v3.167c.234.043.47.063.709.061a3.81 3.81 0 0 0 .708-.061v-3.15h1.06l.2-1.33H8.63V6.25a.656.656 0 0 1 .744-.717h.569V4.5a7 7 0 0 0-1.015-.087 1.601 1.601 0 0 0-1.715 1.732Z"></path></g><defs><clipPath id="prefix__clip0_889_539"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconSocialFacebookCircle extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialFacebookCircle extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--facebookCircle', '', null, 'IconSocialFacebookCircle');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--facebookCircle', '', null, 'IconSocialFacebookCircle');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--facebookCircle');
         this.root.append(svg);
     }

package/dist/IconSocialFacebookCircleFilled.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--facebookCircleFilled"><g clip-path="url(#prefix__clip0_1595_1533)"><path d="M8.14 1.411A6.615 6.615 0 1 0 14.755 8 6.624 6.624 0 0 0 8.14 1.411Zm1.942 4.165h-.577a.656.656 0 0 0-.735.718v.831h1.26l-.201 1.313h-1.06v3.167a3.88 3.88 0 0 1-.708.061 3.743 3.743 0 0 1-.709-.061v-3.15H6.197v-1.33h1.155v-.98a1.601 1.601 0 0 1 1.75-1.75c.34.005.68.034 1.015.088l-.035 1.093Z"></path></g><defs><clipPath id="prefix__clip0_1595_1533"><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--facebookCircleFilled"><g clip-path="url(#prefix__clip0_1595_1533)"><path d="M8.14 1.411A6.615 6.615 0 1 0 14.755 8 6.624 6.624 0 0 0 8.14 1.411Zm1.942 4.165h-.577a.656.656 0 0 0-.735.718v.831h1.26l-.201 1.313h-1.06v3.167a3.88 3.88 0 0 1-.708.061 3.743 3.743 0 0 1-.709-.061v-3.15H6.197v-1.33h1.155v-.98a1.601 1.601 0 0 1 1.75-1.75c.34.005.68.034 1.015.088l-.035 1.093Z"></path></g><defs><clipPath id="prefix__clip0_1595_1533"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconSocialFacebookCircleFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialFacebookCircleFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--facebookCircleFilled', '', null, 'IconSocialFacebookCircleFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--facebookCircleFilled', '', null, 'IconSocialFacebookCircleFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--facebookCircleFilled');
         this.root.append(svg);
     }

package/dist/IconSocialFacebookCircleFilledLarge.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--facebookCircleFilledLarge"><path d="M16 3.671a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm3.85 7.403h-1.138a1.294 1.294 0 0 0-1.46 1.426v1.689h2.493l-.402 2.625H17.25v6.282a8.75 8.75 0 0 1-2.817 0V16.77H12.15v-2.625h2.284v-1.96a3.175 3.175 0 0 1 3.403-3.5c.675.01 1.347.068 2.013.175v2.214Z"></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--facebookCircleFilledLarge"><path d="M16 3.671a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm3.85 7.403h-1.138a1.294 1.294 0 0 0-1.46 1.426v1.689h2.493l-.402 2.625H17.25v6.282a8.75 8.75 0 0 1-2.817 0V16.77H12.15v-2.625h2.284v-1.96a3.175 3.175 0 0 1 3.403-3.5c.675.01 1.347.068 2.013.175v2.214Z"></path></svg>';
 
 class IconSocialFacebookCircleFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialFacebookCircleFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--facebookCircleFilledLarge', '', null, 'IconSocialFacebookCircleFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--facebookCircleFilledLarge', '', null, 'IconSocialFacebookCircleFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--facebookCircleFilledLarge');
         this.root.append(svg);
     }

package/dist/IconSocialFacebookCircleLarge.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--facebookCircleLarge"><path d="M16 3.671a12.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 10.5-10.5A10.5 10.5 0 0 1 16 26.43v-.009Z"></path><path d="M14.434 12.185v1.986H12.15v2.625h2.284v6.283a8.75 8.75 0 0 0 2.817 0V16.77h2.091l.403-2.625h-2.494V12.5a1.295 1.295 0 0 1 1.461-1.409h1.138V8.86a13.938 13.938 0 0 0-2.013-.175 3.176 3.176 0 0 0-3.403 3.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--facebookCircleLarge"><path d="M16 3.671a12.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 10.5-10.5A10.5 10.5 0 0 1 16 26.43v-.009Z"></path><path d="M14.434 12.185v1.986H12.15v2.625h2.284v6.283a8.75 8.75 0 0 0 2.817 0V16.77h2.091l.403-2.625h-2.494V12.5a1.295 1.295 0 0 1 1.461-1.409h1.138V8.86a13.938 13.938 0 0 0-2.013-.175 3.176 3.176 0 0 0-3.403 3.5Z"></path></svg>';
 
 class IconSocialFacebookCircleLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialFacebookCircleLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--facebookCircleLarge', '', null, 'IconSocialFacebookCircleLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--facebookCircleLarge', '', null, 'IconSocialFacebookCircleLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--facebookCircleLarge');
         this.root.append(svg);
     }

package/dist/IconSocialFacebookStatic.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--facebookStatic"><g clip-path="url(#prefix__clip0_1595_1545)"><path fill="#1778F2" d="M8 1.455A6.545 6.545 0 0 0 6.96 14.466V9.89H5.296V8H6.96V6.556A2.31 2.31 0 0 1 9.435 4.01c.49.007.978.051 1.461.131v1.61h-.822a.945.945 0 0 0-1.068 1.024V8h1.812l-.289 1.89H9.006v4.576A6.545 6.545 0 0 0 8 1.455Z"></path></g><defs><clipPath id="prefix__clip0_1595_1545"><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--facebookStatic"><g clip-path="url(#prefix__clip0_1595_1545)"><path fill="#1778F2" d="M8 1.455A6.545 6.545 0 0 0 6.96 14.466V9.89H5.296V8H6.96V6.556A2.31 2.31 0 0 1 9.435 4.01c.49.007.978.051 1.461.131v1.61h-.822a.945.945 0 0 0-1.068 1.024V8h1.812l-.289 1.89H9.006v4.576A6.545 6.545 0 0 0 8 1.455Z"></path></g><defs><clipPath id="prefix__clip0_1595_1545"><rect width="14" height="14" fill="#fff" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconSocialFacebookStatic extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialFacebookStatic extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--facebookStatic', '', null, 'IconSocialFacebookStatic');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--facebookStatic', '', null, 'IconSocialFacebookStatic');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--facebookStatic');
         this.root.append(svg);
     }

package/dist/IconSocialFacebookStaticLarge.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--facebookStaticLarge"><path fill="#1778F2" d="M16 3.75a12.25 12.25 0 0 0-1.916 24.351v-8.557h-3.107V16h3.107v-2.695c0-3.071 1.828-4.769 4.628-4.769.918.013 1.833.092 2.74.237v3.018h-1.54a1.748 1.748 0 0 0-1.996 1.908V16h3.395l-.542 3.544h-2.853V28.1A12.25 12.25 0 0 0 16 3.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--facebookStaticLarge"><path fill="#1778F2" d="M16 3.75a12.25 12.25 0 0 0-1.916 24.351v-8.557h-3.107V16h3.107v-2.695c0-3.071 1.828-4.769 4.628-4.769.918.013 1.833.092 2.74.237v3.018h-1.54a1.748 1.748 0 0 0-1.996 1.908V16h3.395l-.542 3.544h-2.853V28.1A12.25 12.25 0 0 0 16 3.75Z"></path></svg>';
 
 class IconSocialFacebookStaticLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialFacebookStaticLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--facebookStaticLarge', '', null, 'IconSocialFacebookStaticLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--facebookStaticLarge', '', null, 'IconSocialFacebookStaticLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--facebookStaticLarge');
         this.root.append(svg);
     }

package/dist/IconSocialGoogleCircle.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--googleCircle"><g clip-path="url(#prefix__clip0_1615_938)"><path d="M8 1.175A6.781 6.781 0 1 0 14.78 8 6.79 6.79 0 0 0 8 1.175Zm0 12.25A5.468 5.468 0 1 1 8 2.488a5.468 5.468 0 0 1 0 10.937Z"></path><path d="M8.078 7.212v1.48h2.083v.087a1.75 1.75 0 0 1-.726 1.085c-.279.195-.6.321-.937.367a2.415 2.415 0 0 1-.97-.043 2.266 2.266 0 0 1-1.278-.84A2.572 2.572 0 0 1 5.9 8.7a2.039 2.039 0 0 1-.14-.875 2.336 2.336 0 0 1 .945-1.75c.349-.279.778-.438 1.225-.455a2.1 2.1 0 0 1 1.592.551l1.103-1.085-.228-.192a3.5 3.5 0 0 0-1.802-.762A3.824 3.824 0 0 0 4.5 6.67a3.438 3.438 0 0 0-.184.787v.595c0 .202.052.412.087.613.063.303.163.597.298.875a3.5 3.5 0 0 0 .805 1.111 3.816 3.816 0 0 0 1.837.963c.353.078.716.105 1.077.079a3.815 3.815 0 0 0 1.75-.525 3.5 3.5 0 0 0 1.46-1.917 4.471 4.471 0 0 0 .167-1.706c0-.123 0-.254-.044-.385l-3.675.052Z"></path></g><defs><clipPath id="prefix__clip0_1615_938"><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--googleCircle"><g clip-path="url(#prefix__clip0_1615_938)"><path d="M8 1.175A6.781 6.781 0 1 0 14.78 8 6.79 6.79 0 0 0 8 1.175Zm0 12.25A5.468 5.468 0 1 1 8 2.488a5.468 5.468 0 0 1 0 10.937Z"></path><path d="M8.078 7.212v1.48h2.083v.087a1.75 1.75 0 0 1-.726 1.085c-.279.195-.6.321-.937.367a2.415 2.415 0 0 1-.97-.043 2.266 2.266 0 0 1-1.278-.84A2.572 2.572 0 0 1 5.9 8.7a2.039 2.039 0 0 1-.14-.875 2.336 2.336 0 0 1 .945-1.75c.349-.279.778-.438 1.225-.455a2.1 2.1 0 0 1 1.592.551l1.103-1.085-.228-.192a3.5 3.5 0 0 0-1.802-.762A3.824 3.824 0 0 0 4.5 6.67a3.438 3.438 0 0 0-.184.787v.595c0 .202.052.412.087.613.063.303.163.597.298.875a3.5 3.5 0 0 0 .805 1.111 3.816 3.816 0 0 0 1.837.963c.353.078.716.105 1.077.079a3.815 3.815 0 0 0 1.75-.525 3.5 3.5 0 0 0 1.46-1.917 4.471 4.471 0 0 0 .167-1.706c0-.123 0-.254-.044-.385l-3.675.052Z"></path></g><defs><clipPath id="prefix__clip0_1615_938"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconSocialGoogleCircle extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialGoogleCircle extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--googleCircle', '', null, 'IconSocialGoogleCircle');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--googleCircle', '', null, 'IconSocialGoogleCircle');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--googleCircle');
         this.root.append(svg);
     }

package/dist/IconSocialGoogleCircleFilled.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--googleCircleFilled"><g clip-path="url(#prefix__clip0_923_545)"><path fill-rule="evenodd" d="M8 1.175A6.781 6.781 0 1 0 14.78 8 6.79 6.79 0 0 0 8 1.175Zm.078 7.516V7.212l3.675-.052c.044.131.044.262.044.385a4.471 4.471 0 0 1-.166 1.706 3.5 3.5 0 0 1-1.461 1.917 3.815 3.815 0 0 1-1.75.525c-.361.026-.724 0-1.077-.08a3.816 3.816 0 0 1-1.837-.962A3.5 3.5 0 0 1 4.7 9.54a3.693 3.693 0 0 1-.325-1.02 2.524 2.524 0 0 1-.06-.468v-.595c.03-.268.092-.533.184-.787a3.824 3.824 0 0 1 4.095-2.538 3.5 3.5 0 0 1 1.802.762l.228.192-1.103 1.085A2.1 2.1 0 0 0 7.93 5.62a2.091 2.091 0 0 0-1.225.455 2.336 2.336 0 0 0-.945 1.75c-.018.298.03.597.14.875.085.231.203.45.35.648.315.419.767.716 1.277.84.318.08.648.095.971.043.337-.046.658-.172.937-.367a1.75 1.75 0 0 0 .726-1.085V8.69H8.078Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_923_545"><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--googleCircleFilled"><g clip-path="url(#prefix__clip0_923_545)"><path fill-rule="evenodd" d="M8 1.175A6.781 6.781 0 1 0 14.78 8 6.79 6.79 0 0 0 8 1.175Zm.078 7.516V7.212l3.675-.052c.044.131.044.262.044.385a4.471 4.471 0 0 1-.166 1.706 3.5 3.5 0 0 1-1.461 1.917 3.815 3.815 0 0 1-1.75.525c-.361.026-.724 0-1.077-.08a3.816 3.816 0 0 1-1.837-.962A3.5 3.5 0 0 1 4.7 9.54a3.693 3.693 0 0 1-.325-1.02 2.524 2.524 0 0 1-.06-.468v-.595c.03-.268.092-.533.184-.787a3.824 3.824 0 0 1 4.095-2.538 3.5 3.5 0 0 1 1.802.762l.228.192-1.103 1.085A2.1 2.1 0 0 0 7.93 5.62a2.091 2.091 0 0 0-1.225.455 2.336 2.336 0 0 0-.945 1.75c-.018.298.03.597.14.875.085.231.203.45.35.648.315.419.767.716 1.277.84.318.08.648.095.971.043.337-.046.658-.172.937-.367a1.75 1.75 0 0 0 .726-1.085V8.69H8.078Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_923_545"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconSocialGoogleCircleFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSocialGoogleCircleFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--googleCircleFilled', '', null, 'IconSocialGoogleCircleFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--googleCircleFilled', '', null, 'IconSocialGoogleCircleFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--googleCircleFilled');
         this.root.append(svg);
     }