@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/dist/IconRibbonSuccess.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--ribbonSuccess"><path d="M13.696 12.043a7.37 7.37 0 0 1-1.522-2.013c.096-.309.144-.63.14-.954a2.08 2.08 0 0 1 .061-.577c.099-.154.216-.295.35-.42a2.04 2.04 0 0 0 .752-1.392 2.039 2.039 0 0 0-.752-1.39 2.207 2.207 0 0 1-.35-.42 2.057 2.057 0 0 1-.053-.57 2.04 2.04 0 0 0-.446-1.487c-.417-.34-.952-.5-1.487-.446a2.056 2.056 0 0 1-.569-.053 2.205 2.205 0 0 1-.42-.35A2.039 2.039 0 0 0 8 1.22a2.039 2.039 0 0 0-1.391.752 2.205 2.205 0 0 1-.42.35 2.057 2.057 0 0 1-.569.053 2.039 2.039 0 0 0-1.487.446 2.03 2.03 0 0 0-.447 1.479c.007.194-.014.389-.061.577a2.205 2.205 0 0 1-.35.42 2.039 2.039 0 0 0-.744 1.391 2.039 2.039 0 0 0 .753 1.392c.133.125.251.266.35.42.044.186.061.377.052.569-.004.326.043.65.14.962a7.368 7.368 0 0 1-1.522 2.013l-.648.603 3.947 2.301.358-.367a11.2 11.2 0 0 0 1.75-2.476c.1.03.203.048.306.052.104-.005.207-.022.307-.052a11.2 11.2 0 0 0 1.75 2.476l.358.367 3.947-2.3-.683-.604ZM4.23 6.25c.258-.25.466-.547.612-.875.115-.338.168-.693.158-1.05-.01-.194.011-.39.061-.578.19-.056.388-.08.586-.07.357.011.713-.042 1.05-.157.31-.152.588-.36.823-.612.131-.123.393-.385.481-.385.088 0 .35.262.481.385.235.252.513.46.823.612.337.115.693.168 1.05.158.194-.009.389.012.577.06.057.19.08.389.07.587-.01.357.043.712.158 1.05.152.31.36.588.612.822.123.132.385.394.385.482 0 .087-.262.35-.385.481-.253.234-.46.513-.612.822A3.001 3.001 0 0 0 11 9.033c.01.195-.011.39-.061.578a1.75 1.75 0 0 1-.586.07 2.975 2.975 0 0 0-1.05.158c-.31.151-.588.36-.823.612-.131.123-.393.385-.481.385-.088 0-.35-.263-.481-.385a2.809 2.809 0 0 0-.823-.612 2.975 2.975 0 0 0-1.05-.158 1.96 1.96 0 0 1-.577-.061 1.75 1.75 0 0 1-.07-.586c.008-.351-.045-.7-.158-1.033a2.809 2.809 0 0 0-.612-.822c-.123-.132-.385-.394-.385-.482 0-.087.262-.358.385-.446Zm1.146 7-1.566-.875c.39-.45.733-.94 1.023-1.461.26.05.524.077.788.079.191-.01.383.008.569.052.146.095.281.207.402.332a10.666 10.666 0 0 1-1.216 1.873Zm5.25 0a10.045 10.045 0 0 1-1.234-1.899c.121-.126.256-.237.403-.332.186-.044.377-.062.569-.053.264-.001.528-.028.787-.079.295.531.643 1.03 1.041 1.488l-1.566.875Z"></path><path d="m9.06 5.44.708.706-2.122 2.122-.707-.707 2.122-2.122Z"></path><path d="m6.94 6.146 1.414 1.415-.708.707-1.414-1.414.707-.708Z"></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--ribbonSuccess"><path d="M13.696 12.043a7.37 7.37 0 0 1-1.522-2.013c.096-.309.144-.63.14-.954a2.08 2.08 0 0 1 .061-.577c.099-.154.216-.295.35-.42a2.04 2.04 0 0 0 .752-1.392 2.039 2.039 0 0 0-.752-1.39 2.207 2.207 0 0 1-.35-.42 2.057 2.057 0 0 1-.053-.57 2.04 2.04 0 0 0-.446-1.487c-.417-.34-.952-.5-1.487-.446a2.056 2.056 0 0 1-.569-.053 2.205 2.205 0 0 1-.42-.35A2.039 2.039 0 0 0 8 1.22a2.039 2.039 0 0 0-1.391.752 2.205 2.205 0 0 1-.42.35 2.057 2.057 0 0 1-.569.053 2.039 2.039 0 0 0-1.487.446 2.03 2.03 0 0 0-.447 1.479c.007.194-.014.389-.061.577a2.205 2.205 0 0 1-.35.42 2.039 2.039 0 0 0-.744 1.391 2.039 2.039 0 0 0 .753 1.392c.133.125.251.266.35.42.044.186.061.377.052.569-.004.326.043.65.14.962a7.368 7.368 0 0 1-1.522 2.013l-.648.603 3.947 2.301.358-.367a11.2 11.2 0 0 0 1.75-2.476c.1.03.203.048.306.052.104-.005.207-.022.307-.052a11.2 11.2 0 0 0 1.75 2.476l.358.367 3.947-2.3-.683-.604ZM4.23 6.25c.258-.25.466-.547.612-.875.115-.338.168-.693.158-1.05-.01-.194.011-.39.061-.578.19-.056.388-.08.586-.07.357.011.713-.042 1.05-.157.31-.152.588-.36.823-.612.131-.123.393-.385.481-.385.088 0 .35.262.481.385.235.252.513.46.823.612.337.115.693.168 1.05.158.194-.009.389.012.577.06.057.19.08.389.07.587-.01.357.043.712.158 1.05.152.31.36.588.612.822.123.132.385.394.385.482 0 .087-.262.35-.385.481-.253.234-.46.513-.612.822A3.001 3.001 0 0 0 11 9.033c.01.195-.011.39-.061.578a1.75 1.75 0 0 1-.586.07 2.975 2.975 0 0 0-1.05.158c-.31.151-.588.36-.823.612-.131.123-.393.385-.481.385-.088 0-.35-.263-.481-.385a2.809 2.809 0 0 0-.823-.612 2.975 2.975 0 0 0-1.05-.158 1.96 1.96 0 0 1-.577-.061 1.75 1.75 0 0 1-.07-.586c.008-.351-.045-.7-.158-1.033a2.809 2.809 0 0 0-.612-.822c-.123-.132-.385-.394-.385-.482 0-.087.262-.358.385-.446Zm1.146 7-1.566-.875c.39-.45.733-.94 1.023-1.461.26.05.524.077.788.079.191-.01.383.008.569.052.146.095.281.207.402.332a10.666 10.666 0 0 1-1.216 1.873Zm5.25 0a10.045 10.045 0 0 1-1.234-1.899c.121-.126.256-.237.403-.332.186-.044.377-.062.569-.053.264-.001.528-.028.787-.079.295.531.643 1.03 1.041 1.488l-1.566.875Z"></path><path d="m9.06 5.44.708.706-2.122 2.122-.707-.707 2.122-2.122Z"></path><path d="m6.94 6.146 1.414 1.415-.708.707-1.414-1.414.707-.708Z"></path></svg>';
 
 class IconRibbonSuccess extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRibbonSuccess extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--ribbonSuccess', '', null, 'IconRibbonSuccess');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--ribbonSuccess', '', null, 'IconRibbonSuccess');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--ribbonSuccess');
         this.root.append(svg);
     }

package/dist/IconRibbonSuccessLarge.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--ribbonSuccessLarge"><path d="M27.095 24.4a14.873 14.873 0 0 1-3.22-4.296c.227-.63.33-1.3.306-1.969a4.02 4.02 0 0 1 .157-1.26c.21-.361.472-.69.78-.971a3.702 3.702 0 0 0 1.382-2.529 3.7 3.7 0 0 0-1.383-2.485 4.096 4.096 0 0 1-.779-.971 4.018 4.018 0 0 1-.148-1.304 3.727 3.727 0 0 0-.762-2.625 3.727 3.727 0 0 0-2.625-.761 4.016 4.016 0 0 1-1.303-.193 4.095 4.095 0 0 1-.971-.778 3.7 3.7 0 0 0-2.53-1.383 3.702 3.702 0 0 0-2.484 1.383c-.282.307-.61.57-.972.778-.423.121-.863.171-1.303.149a3.693 3.693 0 0 0-2.625.761 3.692 3.692 0 0 0-.77 2.669c.022.44-.028.88-.149 1.304a4.095 4.095 0 0 1-.779.971A3.701 3.701 0 0 0 5.5 13.375a3.701 3.701 0 0 0 1.382 2.485c.311.295.574.638.779 1.015.12.424.171.864.149 1.304a5.25 5.25 0 0 0 .315 1.925 14.875 14.875 0 0 1-3.22 4.296l-1.313 1.225 4.918.814 2.389 3.159.726-.735a22.354 22.354 0 0 0 3.552-5.154 2.16 2.16 0 0 0 1.663 0 22.355 22.355 0 0 0 3.535 5.154l.717.726 2.389-3.159 4.926-.805-1.312-1.225Zm-16.056 2.468-1.55-2.048-2.195-.367a16.12 16.12 0 0 0 2.16-3.116 6.17 6.17 0 0 0 1.75.228c.44-.022.881.028 1.304.149.362.208.69.47.972.779l.201.192a21.232 21.232 0 0 1-2.642 4.183Zm3.692-5.618a5.057 5.057 0 0 0-1.514-1.146 5.25 5.25 0 0 0-1.942-.28c-.578 0-1.243 0-1.461-.254-.22-.254-.237-.875-.254-1.461a5.25 5.25 0 0 0-.28-1.943 5.058 5.058 0 0 0-1.155-1.522c-.403-.394-.875-.919-.875-1.269 0-.35.472-.875.875-1.269.477-.427.87-.94 1.155-1.514a5.25 5.25 0 0 0 .28-1.942c0-.578 0-1.234.254-1.461.253-.228.874-.237 1.46-.254a5.25 5.25 0 0 0 1.943-.28A5.058 5.058 0 0 0 14.731 5.5c.429-.411.875-.875 1.269-.875.393 0 .875.473 1.268.875.428.474.942.863 1.514 1.146a5.25 5.25 0 0 0 1.943.28c.577 0 1.242 0 1.461.254.219.254.236.875.254 1.461a5.25 5.25 0 0 0 .28 1.943 5.055 5.055 0 0 0 1.155 1.522c.411.429.875.875.875 1.269 0 .394-.473.875-.875 1.269a5.059 5.059 0 0 0-1.146 1.513 5.25 5.25 0 0 0-.28 1.943c0 .577 0 1.234-.254 1.461-.254.228-.875.236-1.462.254a5.25 5.25 0 0 0-1.942.28 5.056 5.056 0 0 0-1.523 1.155c-.428.411-.918.875-1.268.875s-.875-.473-1.269-.875Zm7.779 3.579-1.549 2.047a21.236 21.236 0 0 1-2.677-4.182l.2-.193c.296-.314.638-.58 1.016-.787.423-.121.864-.171 1.303-.149a5.922 5.922 0 0 0 1.75-.228 16.119 16.119 0 0 0 2.197 3.116l-2.24.376ZM20.06 11.38l-5.714 5.714-2.835-2.844 1.234-1.242 1.601 1.6 4.48-4.488 1.234 1.26Z"></path><path d="M27.095 24.4a14.873 14.873 0 0 1-3.22-4.296c.227-.63.33-1.3.306-1.969a4.02 4.02 0 0 1 .157-1.26c.21-.361.472-.69.78-.971a3.702 3.702 0 0 0 1.382-2.529 3.7 3.7 0 0 0-1.383-2.485 4.096 4.096 0 0 1-.779-.971 4.018 4.018 0 0 1-.148-1.304 3.727 3.727 0 0 0-.762-2.625 3.727 3.727 0 0 0-2.625-.761 4.016 4.016 0 0 1-1.303-.193 4.095 4.095 0 0 1-.971-.778 3.7 3.7 0 0 0-2.53-1.383 3.702 3.702 0 0 0-2.484 1.383c-.282.307-.61.57-.972.778-.423.121-.863.171-1.303.149a3.693 3.693 0 0 0-2.625.761 3.692 3.692 0 0 0-.77 2.669c.022.44-.028.88-.149 1.304a4.095 4.095 0 0 1-.779.971A3.701 3.701 0 0 0 5.5 13.375a3.701 3.701 0 0 0 1.382 2.485c.311.295.574.638.779 1.015.12.424.171.864.149 1.304a5.25 5.25 0 0 0 .315 1.925 14.875 14.875 0 0 1-3.22 4.296l-1.313 1.225 4.918.814 2.389 3.159.726-.735a22.354 22.354 0 0 0 3.552-5.154 2.16 2.16 0 0 0 1.663 0 22.355 22.355 0 0 0 3.535 5.154l.717.726 2.389-3.159 4.926-.805-1.312-1.225Zm-16.056 2.468-1.55-2.048-2.195-.367a16.12 16.12 0 0 0 2.16-3.116 6.17 6.17 0 0 0 1.75.228c.44-.022.881.028 1.304.149.362.208.69.47.972.779l.201.192a21.232 21.232 0 0 1-2.642 4.183Zm3.692-5.618a5.057 5.057 0 0 0-1.514-1.146 5.25 5.25 0 0 0-1.942-.28c-.578 0-1.243 0-1.461-.254-.22-.254-.237-.875-.254-1.461a5.25 5.25 0 0 0-.28-1.943 5.058 5.058 0 0 0-1.155-1.522c-.403-.394-.875-.919-.875-1.269 0-.35.472-.875.875-1.269.477-.427.87-.94 1.155-1.514a5.25 5.25 0 0 0 .28-1.942c0-.578 0-1.234.254-1.461.253-.228.874-.237 1.46-.254a5.25 5.25 0 0 0 1.943-.28A5.058 5.058 0 0 0 14.731 5.5c.429-.411.875-.875 1.269-.875.393 0 .875.473 1.268.875.428.474.942.863 1.514 1.146a5.25 5.25 0 0 0 1.943.28c.577 0 1.242 0 1.461.254.219.254.236.875.254 1.461a5.25 5.25 0 0 0 .28 1.943 5.055 5.055 0 0 0 1.155 1.522c.411.429.875.875.875 1.269 0 .394-.473.875-.875 1.269a5.059 5.059 0 0 0-1.146 1.513 5.25 5.25 0 0 0-.28 1.943c0 .577 0 1.234-.254 1.461-.254.228-.875.236-1.462.254a5.25 5.25 0 0 0-1.942.28 5.056 5.056 0 0 0-1.523 1.155c-.428.411-.918.875-1.268.875s-.875-.473-1.269-.875Zm7.779 3.579-1.549 2.047a21.236 21.236 0 0 1-2.677-4.182l.2-.193c.296-.314.638-.58 1.016-.787.423-.121.864-.171 1.303-.149a5.922 5.922 0 0 0 1.75-.228 16.119 16.119 0 0 0 2.197 3.116l-2.24.376ZM20.06 11.38l-5.714 5.714-2.835-2.844 1.234-1.242 1.601 1.6 4.48-4.488 1.234 1.26Z"></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--ribbonSuccessLarge"><path d="M27.095 24.4a14.873 14.873 0 0 1-3.22-4.296c.227-.63.33-1.3.306-1.969a4.02 4.02 0 0 1 .157-1.26c.21-.361.472-.69.78-.971a3.702 3.702 0 0 0 1.382-2.529 3.7 3.7 0 0 0-1.383-2.485 4.096 4.096 0 0 1-.779-.971 4.018 4.018 0 0 1-.148-1.304 3.727 3.727 0 0 0-.762-2.625 3.727 3.727 0 0 0-2.625-.761 4.016 4.016 0 0 1-1.303-.193 4.095 4.095 0 0 1-.971-.778 3.7 3.7 0 0 0-2.53-1.383 3.702 3.702 0 0 0-2.484 1.383c-.282.307-.61.57-.972.778-.423.121-.863.171-1.303.149a3.693 3.693 0 0 0-2.625.761 3.692 3.692 0 0 0-.77 2.669c.022.44-.028.88-.149 1.304a4.095 4.095 0 0 1-.779.971A3.701 3.701 0 0 0 5.5 13.375a3.701 3.701 0 0 0 1.382 2.485c.311.295.574.638.779 1.015.12.424.171.864.149 1.304a5.25 5.25 0 0 0 .315 1.925 14.875 14.875 0 0 1-3.22 4.296l-1.313 1.225 4.918.814 2.389 3.159.726-.735a22.354 22.354 0 0 0 3.552-5.154 2.16 2.16 0 0 0 1.663 0 22.355 22.355 0 0 0 3.535 5.154l.717.726 2.389-3.159 4.926-.805-1.312-1.225Zm-16.056 2.468-1.55-2.048-2.195-.367a16.12 16.12 0 0 0 2.16-3.116 6.17 6.17 0 0 0 1.75.228c.44-.022.881.028 1.304.149.362.208.69.47.972.779l.201.192a21.232 21.232 0 0 1-2.642 4.183Zm3.692-5.618a5.057 5.057 0 0 0-1.514-1.146 5.25 5.25 0 0 0-1.942-.28c-.578 0-1.243 0-1.461-.254-.22-.254-.237-.875-.254-1.461a5.25 5.25 0 0 0-.28-1.943 5.058 5.058 0 0 0-1.155-1.522c-.403-.394-.875-.919-.875-1.269 0-.35.472-.875.875-1.269.477-.427.87-.94 1.155-1.514a5.25 5.25 0 0 0 .28-1.942c0-.578 0-1.234.254-1.461.253-.228.874-.237 1.46-.254a5.25 5.25 0 0 0 1.943-.28A5.058 5.058 0 0 0 14.731 5.5c.429-.411.875-.875 1.269-.875.393 0 .875.473 1.268.875.428.474.942.863 1.514 1.146a5.25 5.25 0 0 0 1.943.28c.577 0 1.242 0 1.461.254.219.254.236.875.254 1.461a5.25 5.25 0 0 0 .28 1.943 5.055 5.055 0 0 0 1.155 1.522c.411.429.875.875.875 1.269 0 .394-.473.875-.875 1.269a5.059 5.059 0 0 0-1.146 1.513 5.25 5.25 0 0 0-.28 1.943c0 .577 0 1.234-.254 1.461-.254.228-.875.236-1.462.254a5.25 5.25 0 0 0-1.942.28 5.056 5.056 0 0 0-1.523 1.155c-.428.411-.918.875-1.268.875s-.875-.473-1.269-.875Zm7.779 3.579-1.549 2.047a21.236 21.236 0 0 1-2.677-4.182l.2-.193c.296-.314.638-.58 1.016-.787.423-.121.864-.171 1.303-.149a5.922 5.922 0 0 0 1.75-.228 16.119 16.119 0 0 0 2.197 3.116l-2.24.376ZM20.06 11.38l-5.714 5.714-2.835-2.844 1.234-1.242 1.601 1.6 4.48-4.488 1.234 1.26Z"></path><path d="M27.095 24.4a14.873 14.873 0 0 1-3.22-4.296c.227-.63.33-1.3.306-1.969a4.02 4.02 0 0 1 .157-1.26c.21-.361.472-.69.78-.971a3.702 3.702 0 0 0 1.382-2.529 3.7 3.7 0 0 0-1.383-2.485 4.096 4.096 0 0 1-.779-.971 4.018 4.018 0 0 1-.148-1.304 3.727 3.727 0 0 0-.762-2.625 3.727 3.727 0 0 0-2.625-.761 4.016 4.016 0 0 1-1.303-.193 4.095 4.095 0 0 1-.971-.778 3.7 3.7 0 0 0-2.53-1.383 3.702 3.702 0 0 0-2.484 1.383c-.282.307-.61.57-.972.778-.423.121-.863.171-1.303.149a3.693 3.693 0 0 0-2.625.761 3.692 3.692 0 0 0-.77 2.669c.022.44-.028.88-.149 1.304a4.095 4.095 0 0 1-.779.971A3.701 3.701 0 0 0 5.5 13.375a3.701 3.701 0 0 0 1.382 2.485c.311.295.574.638.779 1.015.12.424.171.864.149 1.304a5.25 5.25 0 0 0 .315 1.925 14.875 14.875 0 0 1-3.22 4.296l-1.313 1.225 4.918.814 2.389 3.159.726-.735a22.354 22.354 0 0 0 3.552-5.154 2.16 2.16 0 0 0 1.663 0 22.355 22.355 0 0 0 3.535 5.154l.717.726 2.389-3.159 4.926-.805-1.312-1.225Zm-16.056 2.468-1.55-2.048-2.195-.367a16.12 16.12 0 0 0 2.16-3.116 6.17 6.17 0 0 0 1.75.228c.44-.022.881.028 1.304.149.362.208.69.47.972.779l.201.192a21.232 21.232 0 0 1-2.642 4.183Zm3.692-5.618a5.057 5.057 0 0 0-1.514-1.146 5.25 5.25 0 0 0-1.942-.28c-.578 0-1.243 0-1.461-.254-.22-.254-.237-.875-.254-1.461a5.25 5.25 0 0 0-.28-1.943 5.058 5.058 0 0 0-1.155-1.522c-.403-.394-.875-.919-.875-1.269 0-.35.472-.875.875-1.269.477-.427.87-.94 1.155-1.514a5.25 5.25 0 0 0 .28-1.942c0-.578 0-1.234.254-1.461.253-.228.874-.237 1.46-.254a5.25 5.25 0 0 0 1.943-.28A5.058 5.058 0 0 0 14.731 5.5c.429-.411.875-.875 1.269-.875.393 0 .875.473 1.268.875.428.474.942.863 1.514 1.146a5.25 5.25 0 0 0 1.943.28c.577 0 1.242 0 1.461.254.219.254.236.875.254 1.461a5.25 5.25 0 0 0 .28 1.943 5.055 5.055 0 0 0 1.155 1.522c.411.429.875.875.875 1.269 0 .394-.473.875-.875 1.269a5.059 5.059 0 0 0-1.146 1.513 5.25 5.25 0 0 0-.28 1.943c0 .577 0 1.234-.254 1.461-.254.228-.875.236-1.462.254a5.25 5.25 0 0 0-1.942.28 5.056 5.056 0 0 0-1.523 1.155c-.428.411-.918.875-1.268.875s-.875-.473-1.269-.875Zm7.779 3.579-1.549 2.047a21.236 21.236 0 0 1-2.677-4.182l.2-.193c.296-.314.638-.58 1.016-.787.423-.121.864-.171 1.303-.149a5.922 5.922 0 0 0 1.75-.228 16.119 16.119 0 0 0 2.197 3.116l-2.24.376ZM20.06 11.38l-5.714 5.714-2.835-2.844 1.234-1.242 1.601 1.6 4.48-4.488 1.234 1.26Z"></path></svg>';
 
 class IconRibbonSuccessLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRibbonSuccessLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--ribbonSuccessLarge', '', null, 'IconRibbonSuccessLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--ribbonSuccessLarge', '', null, 'IconRibbonSuccessLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--ribbonSuccessLarge');
         this.root.append(svg);
     }

package/dist/IconRocketShip.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--rocketShip"><path d="m14.659 1.814-.097-.377-.376-.096A6.317 6.317 0 0 0 7.834 3.24L6.478 4.596a.21.21 0 0 1-.158.061H4.141a1.242 1.242 0 0 0-.98.368L1.954 6.25l7.796 7.752 1.207-1.198a1.277 1.277 0 0 0 .368-.954V9.636a.254.254 0 0 1 .061-.157l1.357-1.357a6.291 6.291 0 0 0 1.916-6.308Zm-2.87 5.381-1.357 1.356c-.282.29-.442.68-.446 1.085v2.24l-.28.272L3.818 6.25l.288-.28H6.32a1.522 1.522 0 0 0 1.085-.446l1.356-1.357a5.057 5.057 0 0 1 4.708-1.645 5.03 5.03 0 0 1-1.68 4.673Zm-.796-2.188a1.138 1.138 0 1 1-1.611 1.608 1.138 1.138 0 0 1 1.61-1.608ZM4.5 10.625 1.945 13.25 1 12.305 3.625 9.75l.875.875Zm.875.875.875.875-1.68 1.75-.945-.945 1.75-1.68Z"></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--rocketShip"><path d="m14.659 1.814-.097-.377-.376-.096A6.317 6.317 0 0 0 7.834 3.24L6.478 4.596a.21.21 0 0 1-.158.061H4.141a1.242 1.242 0 0 0-.98.368L1.954 6.25l7.796 7.752 1.207-1.198a1.277 1.277 0 0 0 .368-.954V9.636a.254.254 0 0 1 .061-.157l1.357-1.357a6.291 6.291 0 0 0 1.916-6.308Zm-2.87 5.381-1.357 1.356c-.282.29-.442.68-.446 1.085v2.24l-.28.272L3.818 6.25l.288-.28H6.32a1.522 1.522 0 0 0 1.085-.446l1.356-1.357a5.057 5.057 0 0 1 4.708-1.645 5.03 5.03 0 0 1-1.68 4.673Zm-.796-2.188a1.138 1.138 0 1 1-1.611 1.608 1.138 1.138 0 0 1 1.61-1.608ZM4.5 10.625 1.945 13.25 1 12.305 3.625 9.75l.875.875Zm.875.875.875.875-1.68 1.75-.945-.945 1.75-1.68Z"></path></svg>';
 
 class IconRocketShip extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRocketShip extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--rocketShip', '', null, 'IconRocketShip');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--rocketShip', '', null, 'IconRocketShip');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--rocketShip');
         this.root.append(svg);
     }

package/dist/IconRocketShipLarge.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--rocketShipLarge"><path d="m27.016 5.631-.131-.499-.499-.13c-4.121-1.05-7.875.07-11.138 3.342l-3.115 3.115a.708.708 0 0 1-.508.166H7.696a2.039 2.039 0 0 0-1.54.578l-1.951 1.986L17.75 27.742l1.951-1.95a2.021 2.021 0 0 0 .578-1.497v-3.981a.69.69 0 0 1 .201-.499l3.115-3.115c3.308-3.325 4.454-7.026 3.421-11.069Zm-4.646 9.835-3.115 3.159a2.433 2.433 0 0 0-.717 1.75v4.034a.288.288 0 0 1-.062.21l-.726.656L6.673 14.189l.717-.718a.34.34 0 0 1 .263-.061h3.972a2.467 2.467 0 0 0 1.75-.717l3.115-3.107c2.66-2.677 5.635-3.684 8.951-3.01.665 3.246-.341 6.16-3.071 8.89Zm-4.463-5.433a2.878 2.878 0 1 0 4.078 0 2.957 2.957 0 0 0-4.078 0Zm2.835 2.835a1.129 1.129 0 0 1-1.592-1.593 1.121 1.121 0 0 1 1.593 0 1.111 1.111 0 0 1 0 1.592ZM9.08 21.538l-3.833 3.833-1.242-1.242 3.832-3.833L9.08 21.54Zm1.382 1.383 1.243 1.243-2.52 2.52L7.94 25.44l2.52-2.52Z"></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--rocketShipLarge"><path d="m27.016 5.631-.131-.499-.499-.13c-4.121-1.05-7.875.07-11.138 3.342l-3.115 3.115a.708.708 0 0 1-.508.166H7.696a2.039 2.039 0 0 0-1.54.578l-1.951 1.986L17.75 27.742l1.951-1.95a2.021 2.021 0 0 0 .578-1.497v-3.981a.69.69 0 0 1 .201-.499l3.115-3.115c3.308-3.325 4.454-7.026 3.421-11.069Zm-4.646 9.835-3.115 3.159a2.433 2.433 0 0 0-.717 1.75v4.034a.288.288 0 0 1-.062.21l-.726.656L6.673 14.189l.717-.718a.34.34 0 0 1 .263-.061h3.972a2.467 2.467 0 0 0 1.75-.717l3.115-3.107c2.66-2.677 5.635-3.684 8.951-3.01.665 3.246-.341 6.16-3.071 8.89Zm-4.463-5.433a2.878 2.878 0 1 0 4.078 0 2.957 2.957 0 0 0-4.078 0Zm2.835 2.835a1.129 1.129 0 0 1-1.592-1.593 1.121 1.121 0 0 1 1.593 0 1.111 1.111 0 0 1 0 1.592ZM9.08 21.538l-3.833 3.833-1.242-1.242 3.832-3.833L9.08 21.54Zm1.382 1.383 1.243 1.243-2.52 2.52L7.94 25.44l2.52-2.52Z"></path></svg>';
 
 class IconRocketShipLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRocketShipLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--rocketShipLarge', '', null, 'IconRocketShipLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--rocketShipLarge', '', null, 'IconRocketShipLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--rocketShipLarge');
         this.root.append(svg);
     }

package/dist/IconRoutePin.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--routePin"><path d="M13.031 2.575a4.646 4.646 0 0 0-6.562 0 4.655 4.655 0 0 0 0 6.571l3.281 3.281 3.281-3.28a4.655 4.655 0 0 0 0-6.572Zm-.927 5.644L9.75 10.573 7.396 8.218a3.325 3.325 0 1 1 4.708 0Zm-1.076-2.442a1.277 1.277 0 1 1-2.555 0 1.277 1.277 0 0 1 2.554 0Zm-6.738 7.7 6.344.053v1.313L4.29 14.79a1.523 1.523 0 0 1-1.295-2.319l1.041-1.75a.21.21 0 0 0 0-.219.21.21 0 0 0-.192-.113H1V9.094h2.826a1.522 1.522 0 0 1 1.313 2.319l-1.042 1.75a.219.219 0 0 0 .193.332v-.018Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--routePin"><path d="M13.031 2.575a4.646 4.646 0 0 0-6.562 0 4.655 4.655 0 0 0 0 6.571l3.281 3.281 3.281-3.28a4.655 4.655 0 0 0 0-6.572Zm-.927 5.644L9.75 10.573 7.396 8.218a3.325 3.325 0 1 1 4.708 0Zm-1.076-2.442a1.277 1.277 0 1 1-2.555 0 1.277 1.277 0 0 1 2.554 0Zm-6.738 7.7 6.344.053v1.313L4.29 14.79a1.523 1.523 0 0 1-1.295-2.319l1.041-1.75a.21.21 0 0 0 0-.219.21.21 0 0 0-.192-.113H1V9.094h2.826a1.522 1.522 0 0 1 1.313 2.319l-1.042 1.75a.219.219 0 0 0 .193.332v-.018Z"></path></svg>';
 
 class IconRoutePin extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRoutePin extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--routePin', '', null, 'IconRoutePin');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--routePin', '', null, 'IconRoutePin');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--routePin');
         this.root.append(svg);
     }

package/dist/IconRoutePinLarge.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--routePinLarge"><path d="M26.631 6.375A8.848 8.848 0 0 0 14.12 18.887l6.256 6.222 6.256-6.257a8.864 8.864 0 0 0 0-12.477Zm-1.233 11.244-5.023 5.022-5.023-5.022a7.097 7.097 0 1 1 10.046 0Zm-5.023-8.742a3.85 3.85 0 1 0 0 7.701 3.85 3.85 0 0 0 0-7.7Zm0 5.942a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2ZM8.895 26.5l13.23.061v1.75L8.886 28.25a2.73 2.73 0 0 1-2.38-1.4 2.537 2.537 0 0 1 .079-2.625l2.196-3.5a.796.796 0 0 0 0-.831.954.954 0 0 0-.875-.481H2v-1.75h5.941a2.73 2.73 0 0 1 2.398 1.39 2.52 2.52 0 0 1-.079 2.626l-2.188 3.5a.77.77 0 0 0 0 .822.962.962 0 0 0 .823.499Z"></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--routePinLarge"><path d="M26.631 6.375A8.848 8.848 0 0 0 14.12 18.887l6.256 6.222 6.256-6.257a8.864 8.864 0 0 0 0-12.477Zm-1.233 11.244-5.023 5.022-5.023-5.022a7.097 7.097 0 1 1 10.046 0Zm-5.023-8.742a3.85 3.85 0 1 0 0 7.701 3.85 3.85 0 0 0 0-7.7Zm0 5.942a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2ZM8.895 26.5l13.23.061v1.75L8.886 28.25a2.73 2.73 0 0 1-2.38-1.4 2.537 2.537 0 0 1 .079-2.625l2.196-3.5a.796.796 0 0 0 0-.831.954.954 0 0 0-.875-.481H2v-1.75h5.941a2.73 2.73 0 0 1 2.398 1.39 2.52 2.52 0 0 1-.079 2.626l-2.188 3.5a.77.77 0 0 0 0 .822.962.962 0 0 0 .823.499Z"></path></svg>';
 
 class IconRoutePinLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRoutePinLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--routePinLarge', '', null, 'IconRoutePinLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--routePinLarge', '', null, 'IconRoutePinLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--routePinLarge');
         this.root.append(svg);
     }

package/dist/IconRss.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--rss"><path d="M5.034 2.96v1.312c.297 0 7.35.088 7.35 7.35h1.312c0-6.85-5.696-8.662-8.662-8.662Z"></path><path d="M5.034 7.326V8.64A2.984 2.984 0 0 1 8 11.623h1.313a4.296 4.296 0 0 0-4.28-4.297Z"></path><path d="M3.433 11.964a1.155 1.155 0 1 0 1.627 1.639 1.155 1.155 0 0 0-1.627-1.64Z"></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--rss"><path d="M5.034 2.96v1.312c.297 0 7.35.088 7.35 7.35h1.312c0-6.85-5.696-8.662-8.662-8.662Z"></path><path d="M5.034 7.326V8.64A2.984 2.984 0 0 1 8 11.623h1.313a4.296 4.296 0 0 0-4.28-4.297Z"></path><path d="M3.433 11.964a1.155 1.155 0 1 0 1.627 1.639 1.155 1.155 0 0 0-1.627-1.64Z"></path></svg>';
 
 class IconRss extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRss extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--rss', '', null, 'IconRss');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--rss', '', null, 'IconRss');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--rss');
         this.root.append(svg);
     }

package/dist/IconRssLarge.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--rssLarge"><path d="M8.762 21.355a1.312 1.312 0 1 0 1.853 1.86 1.312 1.312 0 0 0-1.853-1.86Z"></path><path d="M8.5 7v1.5a15 15 0 0 1 15 15H25A16.5 16.5 0 0 0 8.5 7Z"></path><path d="M9.25 11.807v1.5a9.458 9.458 0 0 1 9.442 9.443h1.5A10.957 10.957 0 0 0 9.25 11.807Z"></path><path d="M10 16.615v1.5A3.893 3.893 0 0 1 13.885 22h1.5A5.393 5.393 0 0 0 10 16.615Z"></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--rssLarge"><path d="M8.762 21.355a1.312 1.312 0 1 0 1.853 1.86 1.312 1.312 0 0 0-1.853-1.86Z"></path><path d="M8.5 7v1.5a15 15 0 0 1 15 15H25A16.5 16.5 0 0 0 8.5 7Z"></path><path d="M9.25 11.807v1.5a9.458 9.458 0 0 1 9.442 9.443h1.5A10.957 10.957 0 0 0 9.25 11.807Z"></path><path d="M10 16.615v1.5A3.893 3.893 0 0 1 13.885 22h1.5A5.393 5.393 0 0 0 10 16.615Z"></path></svg>';
 
 class IconRssLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRssLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--rssLarge', '', null, 'IconRssLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--rssLarge', '', null, 'IconRssLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--rssLarge');
         this.root.append(svg);
     }

package/dist/IconSalad.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--salad"><path d="M14.037 7.344c.082-.128.147-.267.193-.412a2.066 2.066 0 0 0-.236-1.837.236.236 0 0 1 0-.184 2.26 2.26 0 0 0 .14-.875 2.084 2.084 0 0 0-.875-1.592 1.943 1.943 0 0 0-2.354 0 .175.175 0 0 1-.105 0 1.75 1.75 0 0 0-.796-.14 1.969 1.969 0 0 0-1.558.875.315.315 0 0 1 0 .078 2.074 2.074 0 0 0-.971-.875 1.969 1.969 0 0 0-.875-.166.131.131 0 0 1-.131-.052 2.048 2.048 0 0 0-2.319-.867 2.126 2.126 0 0 0-1.4 1.295 2.327 2.327 0 0 0-.158.875.245.245 0 0 1-.087.228 2.249 2.249 0 0 0 0 3.57.228.228 0 0 1 .061.087H1.22v1.523a4.148 4.148 0 0 0 2.73 3.894l.262 1.137h7.578l.262-1.137a4.147 4.147 0 0 0 2.73-3.894V7.344h-.744ZM9.4 4.404a.875.875 0 0 1 .157-.473.648.648 0 0 1 .517-.306.708.708 0 0 1 .28.052 1.391 1.391 0 0 0 1.356-.157.656.656 0 0 1 .796 0 .804.804 0 0 1 .289.56.995.995 0 0 1-.061.359 1.533 1.533 0 0 0 .166 1.373.822.822 0 0 1 .088.7.69.69 0 0 1-.464.455 1.391 1.391 0 0 0-.621.377H10.8c.292-.404.555-.828.787-1.269l-1.163-.604a8.874 8.874 0 0 1-1.199 1.75 2.249 2.249 0 0 0-.446-1.549A1.619 1.619 0 0 0 9.4 4.404ZM3.319 6.197a.875.875 0 0 1-.35-.726.875.875 0 0 1 .35-.726 1.566 1.566 0 0 0 .612-1.313c.003-.128.027-.255.07-.376a.822.822 0 0 1 .499-.49.761.761 0 0 1 .875.333 1.488 1.488 0 0 0 1.277.656.796.796 0 0 1 .597.302c.082.098.141.213.174.337a.936.936 0 0 1 0 .56c-.141.397-.122.833.052 1.216.07.163.16.316.271.455a.928.928 0 0 1 .193.779v.131H6.915A4.559 4.559 0 0 1 5.909 5.27l-1.295.21c.127.653.357 1.283.682 1.864H3.922a1.531 1.531 0 0 0-.603-1.147Zm10.15 2.678a2.836 2.836 0 0 1-2.135 2.739l-.385.105-.201.875H5.253l-.202-.875-.385-.105a2.835 2.835 0 0 1-2.135-2.739v-.219H13.47v.219Z"></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--salad"><path d="M14.037 7.344c.082-.128.147-.267.193-.412a2.066 2.066 0 0 0-.236-1.837.236.236 0 0 1 0-.184 2.26 2.26 0 0 0 .14-.875 2.084 2.084 0 0 0-.875-1.592 1.943 1.943 0 0 0-2.354 0 .175.175 0 0 1-.105 0 1.75 1.75 0 0 0-.796-.14 1.969 1.969 0 0 0-1.558.875.315.315 0 0 1 0 .078 2.074 2.074 0 0 0-.971-.875 1.969 1.969 0 0 0-.875-.166.131.131 0 0 1-.131-.052 2.048 2.048 0 0 0-2.319-.867 2.126 2.126 0 0 0-1.4 1.295 2.327 2.327 0 0 0-.158.875.245.245 0 0 1-.087.228 2.249 2.249 0 0 0 0 3.57.228.228 0 0 1 .061.087H1.22v1.523a4.148 4.148 0 0 0 2.73 3.894l.262 1.137h7.578l.262-1.137a4.147 4.147 0 0 0 2.73-3.894V7.344h-.744ZM9.4 4.404a.875.875 0 0 1 .157-.473.648.648 0 0 1 .517-.306.708.708 0 0 1 .28.052 1.391 1.391 0 0 0 1.356-.157.656.656 0 0 1 .796 0 .804.804 0 0 1 .289.56.995.995 0 0 1-.061.359 1.533 1.533 0 0 0 .166 1.373.822.822 0 0 1 .088.7.69.69 0 0 1-.464.455 1.391 1.391 0 0 0-.621.377H10.8c.292-.404.555-.828.787-1.269l-1.163-.604a8.874 8.874 0 0 1-1.199 1.75 2.249 2.249 0 0 0-.446-1.549A1.619 1.619 0 0 0 9.4 4.404ZM3.319 6.197a.875.875 0 0 1-.35-.726.875.875 0 0 1 .35-.726 1.566 1.566 0 0 0 .612-1.313c.003-.128.027-.255.07-.376a.822.822 0 0 1 .499-.49.761.761 0 0 1 .875.333 1.488 1.488 0 0 0 1.277.656.796.796 0 0 1 .597.302c.082.098.141.213.174.337a.936.936 0 0 1 0 .56c-.141.397-.122.833.052 1.216.07.163.16.316.271.455a.928.928 0 0 1 .193.779v.131H6.915A4.559 4.559 0 0 1 5.909 5.27l-1.295.21c.127.653.357 1.283.682 1.864H3.922a1.531 1.531 0 0 0-.603-1.147Zm10.15 2.678a2.836 2.836 0 0 1-2.135 2.739l-.385.105-.201.875H5.253l-.202-.875-.385-.105a2.835 2.835 0 0 1-2.135-2.739v-.219H13.47v.219Z"></path></svg>';
 
 class IconSalad extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSalad extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--salad', '', null, 'IconSalad');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--salad', '', null, 'IconSalad');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--salad');
         this.root.append(svg);
     }

package/dist/IconSaladLarge.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--saladLarge"><path d="M27.235 16c.338-.321.606-.708.788-1.137a3.237 3.237 0 0 0-.482-3.238.516.516 0 0 1-.052-.551c.185-.45.274-.932.262-1.418a3.378 3.378 0 0 0-1.601-2.669 4.016 4.016 0 0 0-4.279 0 .875.875 0 0 1-.796 0 4.156 4.156 0 0 0-1.444-.21 3.806 3.806 0 0 0-2.887 1.383A3.351 3.351 0 0 0 16 10.277a.814.814 0 0 1-.42.64 3.588 3.588 0 0 0-.123-1.103 3.5 3.5 0 0 0-2.082-2.302 3.658 3.658 0 0 0-1.383-.262.63.63 0 0 1-.542-.228 3.5 3.5 0 0 0-6.125.657c-.18.444-.27.92-.263 1.4a.691.691 0 0 1-.27.586 3.5 3.5 0 0 0 0 5.731.674.674 0 0 1 .262.569H2.875v2.625a7.875 7.875 0 0 0 5.39 7.446l.508 2.214h14.454l.508-2.179a7.875 7.875 0 0 0 5.39-7.446V16h-1.89Zm-11.008-3.43a2.625 2.625 0 0 0 1.523-2.293c.007-.361.136-.71.367-.988a2.047 2.047 0 0 1 1.558-.709c.276-.011.552.027.814.114a2.625 2.625 0 0 0 2.336-.219 2.222 2.222 0 0 1 2.398 0A1.618 1.618 0 0 1 26 9.735c.01.237-.032.472-.122.691a2.25 2.25 0 0 0 .28 2.293 1.488 1.488 0 0 1 .236 1.531 1.9 1.9 0 0 1-1.339 1.085 2.52 2.52 0 0 0-1.233.7h-3.107a24.345 24.345 0 0 0 3.5-3.876l-1.426-.998a25.01 25.01 0 0 1-2.021 2.389 5.675 5.675 0 0 1-.088-1.899l-1.75-.28a6.797 6.797 0 0 0 .438 3.5c-.471.404-.965.781-1.479 1.129h-1.523v-.114a3.499 3.499 0 0 0-.717-2.905c.17-.165.365-.304.577-.411ZM5.78 13.97a1.75 1.75 0 0 1-.744-1.47 1.75 1.75 0 0 1 .744-1.435 2.415 2.415 0 0 0 1.015-2.021c-.007-.244.04-.486.14-.709a1.75 1.75 0 0 1 3.071-.315 2.38 2.38 0 0 0 2.039.98c.24-.002.477.043.7.131a1.75 1.75 0 0 1 1.033 1.146c.113.35.113.727 0 1.077a2.546 2.546 0 0 0 .087 1.942c.114.259.268.498.455.709a1.75 1.75 0 0 1 .402 1.514c0 .087-.043.166-.07.262a1.174 1.174 0 0 1-.104.21h-1.716c-1.636-2.143-2.082-5.784-2.082-5.827L9 10.365c.099.756.248 1.504.446 2.24a10.013 10.013 0 0 1-1.592-.796l-.928 1.479a14.002 14.002 0 0 0 3.211 1.417c.18.443.384.875.613 1.295H6.795a2.415 2.415 0 0 0-1.015-2.03Zm21.595 4.655a6.125 6.125 0 0 1-4.594 5.906l-.516.132-.429 1.837H10.164l-.429-1.837-.516-.132a6.125 6.125 0 0 1-4.594-5.906v-.875h22.75v.875Z"></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--saladLarge"><path d="M27.235 16c.338-.321.606-.708.788-1.137a3.237 3.237 0 0 0-.482-3.238.516.516 0 0 1-.052-.551c.185-.45.274-.932.262-1.418a3.378 3.378 0 0 0-1.601-2.669 4.016 4.016 0 0 0-4.279 0 .875.875 0 0 1-.796 0 4.156 4.156 0 0 0-1.444-.21 3.806 3.806 0 0 0-2.887 1.383A3.351 3.351 0 0 0 16 10.277a.814.814 0 0 1-.42.64 3.588 3.588 0 0 0-.123-1.103 3.5 3.5 0 0 0-2.082-2.302 3.658 3.658 0 0 0-1.383-.262.63.63 0 0 1-.542-.228 3.5 3.5 0 0 0-6.125.657c-.18.444-.27.92-.263 1.4a.691.691 0 0 1-.27.586 3.5 3.5 0 0 0 0 5.731.674.674 0 0 1 .262.569H2.875v2.625a7.875 7.875 0 0 0 5.39 7.446l.508 2.214h14.454l.508-2.179a7.875 7.875 0 0 0 5.39-7.446V16h-1.89Zm-11.008-3.43a2.625 2.625 0 0 0 1.523-2.293c.007-.361.136-.71.367-.988a2.047 2.047 0 0 1 1.558-.709c.276-.011.552.027.814.114a2.625 2.625 0 0 0 2.336-.219 2.222 2.222 0 0 1 2.398 0A1.618 1.618 0 0 1 26 9.735c.01.237-.032.472-.122.691a2.25 2.25 0 0 0 .28 2.293 1.488 1.488 0 0 1 .236 1.531 1.9 1.9 0 0 1-1.339 1.085 2.52 2.52 0 0 0-1.233.7h-3.107a24.345 24.345 0 0 0 3.5-3.876l-1.426-.998a25.01 25.01 0 0 1-2.021 2.389 5.675 5.675 0 0 1-.088-1.899l-1.75-.28a6.797 6.797 0 0 0 .438 3.5c-.471.404-.965.781-1.479 1.129h-1.523v-.114a3.499 3.499 0 0 0-.717-2.905c.17-.165.365-.304.577-.411ZM5.78 13.97a1.75 1.75 0 0 1-.744-1.47 1.75 1.75 0 0 1 .744-1.435 2.415 2.415 0 0 0 1.015-2.021c-.007-.244.04-.486.14-.709a1.75 1.75 0 0 1 3.071-.315 2.38 2.38 0 0 0 2.039.98c.24-.002.477.043.7.131a1.75 1.75 0 0 1 1.033 1.146c.113.35.113.727 0 1.077a2.546 2.546 0 0 0 .087 1.942c.114.259.268.498.455.709a1.75 1.75 0 0 1 .402 1.514c0 .087-.043.166-.07.262a1.174 1.174 0 0 1-.104.21h-1.716c-1.636-2.143-2.082-5.784-2.082-5.827L9 10.365c.099.756.248 1.504.446 2.24a10.013 10.013 0 0 1-1.592-.796l-.928 1.479a14.002 14.002 0 0 0 3.211 1.417c.18.443.384.875.613 1.295H6.795a2.415 2.415 0 0 0-1.015-2.03Zm21.595 4.655a6.125 6.125 0 0 1-4.594 5.906l-.516.132-.429 1.837H10.164l-.429-1.837-.516-.132a6.125 6.125 0 0 1-4.594-5.906v-.875h22.75v.875Z"></path></svg>';
 
 class IconSaladLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSaladLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--saladLarge', '', null, 'IconSaladLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--saladLarge', '', null, 'IconSaladLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--saladLarge');
         this.root.append(svg);
     }

package/dist/IconSandwich.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--sandwich"><path d="M13.906 5.375a3.15 3.15 0 0 0-3.001-3.281c-.494.001-.98.13-1.409.376a2.844 2.844 0 0 0-2.896.061 2.774 2.774 0 0 0-1.505-.437 3.15 3.15 0 0 0-3.001 3.281v1.531h11.812V5.375Zm-1.312.219H3.406v-.219a1.846 1.846 0 0 1 1.689-1.969c.393 0 .77.155 1.05.429l.455.438.455-.438a1.496 1.496 0 0 1 2.012-.061l.42.367.43-.367c.276-.234.626-.364.988-.368a1.846 1.846 0 0 1 1.689 1.969v.219Zm1.82 1.75v1.312c-.832 0-.875.123-.945.289a1.513 1.513 0 0 1-1.234 1.05 1.95 1.95 0 0 1-1.803-.464c-.227-.175-.323-.245-.525-.245h-.096v.062a1.75 1.75 0 0 1-1.794.874 1.75 1.75 0 0 1-1.75-.874.49.49 0 0 0 0-.07h-.175c-.2 0-.297.07-.525.245a1.934 1.934 0 0 1-1.802.463 1.514 1.514 0 0 1-1.234-1.05c-.07-.166-.114-.288-.945-.288V7.344c1.435 0 1.89.429 2.161 1.129.08.192.08.192.298.245.219.052.446 0 .709-.22.372-.32.847-.496 1.338-.498a1.295 1.295 0 0 1 1.252.726c.087.167.14.245.656.245s.569-.078.665-.245A1.269 1.269 0 0 1 9.907 8c.495.009.97.195 1.34.525.262.21.367.289.708.219.341-.07.219-.053.297-.245.272-.726.727-1.155 2.162-1.155Zm-1.82 3.281h1.312v.875a1.54 1.54 0 0 1-1.531 1.531h-8.75A1.54 1.54 0 0 1 2.094 11.5v-.875h1.312v.875a.219.219 0 0 0 .219.219h8.75a.22.22 0 0 0 .219-.219v-.875Z"></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--sandwich"><path d="M13.906 5.375a3.15 3.15 0 0 0-3.001-3.281c-.494.001-.98.13-1.409.376a2.844 2.844 0 0 0-2.896.061 2.774 2.774 0 0 0-1.505-.437 3.15 3.15 0 0 0-3.001 3.281v1.531h11.812V5.375Zm-1.312.219H3.406v-.219a1.846 1.846 0 0 1 1.689-1.969c.393 0 .77.155 1.05.429l.455.438.455-.438a1.496 1.496 0 0 1 2.012-.061l.42.367.43-.367c.276-.234.626-.364.988-.368a1.846 1.846 0 0 1 1.689 1.969v.219Zm1.82 1.75v1.312c-.832 0-.875.123-.945.289a1.513 1.513 0 0 1-1.234 1.05 1.95 1.95 0 0 1-1.803-.464c-.227-.175-.323-.245-.525-.245h-.096v.062a1.75 1.75 0 0 1-1.794.874 1.75 1.75 0 0 1-1.75-.874.49.49 0 0 0 0-.07h-.175c-.2 0-.297.07-.525.245a1.934 1.934 0 0 1-1.802.463 1.514 1.514 0 0 1-1.234-1.05c-.07-.166-.114-.288-.945-.288V7.344c1.435 0 1.89.429 2.161 1.129.08.192.08.192.298.245.219.052.446 0 .709-.22.372-.32.847-.496 1.338-.498a1.295 1.295 0 0 1 1.252.726c.087.167.14.245.656.245s.569-.078.665-.245A1.269 1.269 0 0 1 9.907 8c.495.009.97.195 1.34.525.262.21.367.289.708.219.341-.07.219-.053.297-.245.272-.726.727-1.155 2.162-1.155Zm-1.82 3.281h1.312v.875a1.54 1.54 0 0 1-1.531 1.531h-8.75A1.54 1.54 0 0 1 2.094 11.5v-.875h1.312v.875a.219.219 0 0 0 .219.219h8.75a.22.22 0 0 0 .219-.219v-.875Z"></path></svg>';
 
 class IconSandwich extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSandwich extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sandwich', '', null, 'IconSandwich');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sandwich', '', null, 'IconSandwich');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sandwich');
         this.root.append(svg);
     }

package/dist/IconSandwichLarge.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--sandwichLarge"><path d="M28.836 15.125v1.75c-1.898 0-2.038.464-2.275 1.304a2.94 2.94 0 0 1-2.126 2.354 3.062 3.062 0 0 1-3.395-1.164c-.49-.517-.761-.788-1.234-.788-.289 0-.306 0-.542.569-.333.779-.875 2.091-3.264 2.091s-2.931-1.312-3.264-2.091c-.236-.525-.236-.525-.542-.525-.473 0-.744.271-1.234.788a3.062 3.062 0 0 1-3.395 1.163 2.94 2.94 0 0 1-2.126-2.354c-.236-.875-.376-1.303-2.275-1.303v-1.794c2.975 0 3.587 1.269 3.955 2.564.192.665.28.971.945 1.163.665.193.98 0 1.619-.682a3.342 3.342 0 0 1 2.51-1.295 2.188 2.188 0 0 1 2.153 1.628c.289.665.438 1.032 1.654 1.032s1.365-.367 1.654-1.032a2.187 2.187 0 0 1 2.152-1.628 3.343 3.343 0 0 1 2.511 1.339c.64.674.875.875 1.62.682.743-.192.752-.498.944-1.163.368-1.34.98-2.608 3.955-2.608ZM25.625 23a.875.875 0 0 1-.875.875H7.25A.875.875 0 0 1 6.375 23v-1.75h-1.75V23a2.625 2.625 0 0 0 2.625 2.625h17.5A2.625 2.625 0 0 0 27.375 23v-1.75h-1.75V23Zm-21-9.625v-1.531a5.582 5.582 0 0 1 8.584-4.594 5.46 5.46 0 0 1 2.983-.875c.99.003 1.962.266 2.818.761a5.556 5.556 0 0 1 8.365 4.708v1.531a.875.875 0 0 1-.875.875h-21a.875.875 0 0 1-.875-.875Zm1.75-.875h19.25v-.656a3.78 3.78 0 0 0-3.824-3.719 3.876 3.876 0 0 0-1.312.236c.31.38.565.802.761 1.252h-2.012a3.841 3.841 0 0 0-4.655-1.13c.274.35.509.728.7 1.13h-2.04A3.859 3.859 0 0 0 10.2 8.125a3.78 3.78 0 0 0-3.824 3.719v.656Z"></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--sandwichLarge"><path d="M28.836 15.125v1.75c-1.898 0-2.038.464-2.275 1.304a2.94 2.94 0 0 1-2.126 2.354 3.062 3.062 0 0 1-3.395-1.164c-.49-.517-.761-.788-1.234-.788-.289 0-.306 0-.542.569-.333.779-.875 2.091-3.264 2.091s-2.931-1.312-3.264-2.091c-.236-.525-.236-.525-.542-.525-.473 0-.744.271-1.234.788a3.062 3.062 0 0 1-3.395 1.163 2.94 2.94 0 0 1-2.126-2.354c-.236-.875-.376-1.303-2.275-1.303v-1.794c2.975 0 3.587 1.269 3.955 2.564.192.665.28.971.945 1.163.665.193.98 0 1.619-.682a3.342 3.342 0 0 1 2.51-1.295 2.188 2.188 0 0 1 2.153 1.628c.289.665.438 1.032 1.654 1.032s1.365-.367 1.654-1.032a2.187 2.187 0 0 1 2.152-1.628 3.343 3.343 0 0 1 2.511 1.339c.64.674.875.875 1.62.682.743-.192.752-.498.944-1.163.368-1.34.98-2.608 3.955-2.608ZM25.625 23a.875.875 0 0 1-.875.875H7.25A.875.875 0 0 1 6.375 23v-1.75h-1.75V23a2.625 2.625 0 0 0 2.625 2.625h17.5A2.625 2.625 0 0 0 27.375 23v-1.75h-1.75V23Zm-21-9.625v-1.531a5.582 5.582 0 0 1 8.584-4.594 5.46 5.46 0 0 1 2.983-.875c.99.003 1.962.266 2.818.761a5.556 5.556 0 0 1 8.365 4.708v1.531a.875.875 0 0 1-.875.875h-21a.875.875 0 0 1-.875-.875Zm1.75-.875h19.25v-.656a3.78 3.78 0 0 0-3.824-3.719 3.876 3.876 0 0 0-1.312.236c.31.38.565.802.761 1.252h-2.012a3.841 3.841 0 0 0-4.655-1.13c.274.35.509.728.7 1.13h-2.04A3.859 3.859 0 0 0 10.2 8.125a3.78 3.78 0 0 0-3.824 3.719v.656Z"></path></svg>';
 
 class IconSandwichLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSandwichLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sandwichLarge', '', null, 'IconSandwichLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sandwichLarge', '', null, 'IconSandwichLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sandwichLarge');
         this.root.append(svg);
     }

package/dist/IconSearch.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--search"><path d="M14.125 13.162 11.15 10.18a5.049 5.049 0 1 0-.936.936l2.948 3.01.963-.963Zm-7-2.318a3.718 3.718 0 1 1 3.719-3.719 3.728 3.728 0 0 1-3.72 3.719Z"></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--search"><path d="M14.125 13.162 11.15 10.18a5.049 5.049 0 1 0-.936.936l2.948 3.01.963-.963Zm-7-2.318a3.718 3.718 0 1 1 3.719-3.719 3.728 3.728 0 0 1-3.72 3.719Z"></path></svg>';
 
 class IconSearch extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSearch extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--search', '', null, 'IconSearch');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--search', '', null, 'IconSearch');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--search');
         this.root.append(svg);
     }

package/dist/IconSearchLarge.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--searchLarge"><path d="M27.996 26.754 23 21.766A10.972 10.972 0 1 0 21.766 23l4.988 4.988 1.242-1.234Zm-13.309-2.879a9.187 9.187 0 1 1 9.188-9.188 9.196 9.196 0 0 1-9.188 9.188Z"></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--searchLarge"><path d="M27.996 26.754 23 21.766A10.972 10.972 0 1 0 21.766 23l4.988 4.988 1.242-1.234Zm-13.309-2.879a9.187 9.187 0 1 1 9.188-9.188 9.196 9.196 0 0 1-9.188 9.188Z"></path></svg>';
 
 class IconSearchLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSearchLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--searchLarge', '', null, 'IconSearchLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--searchLarge', '', null, 'IconSearchLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--searchLarge');
         this.root.append(svg);
     }

package/dist/IconSend.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--send"><path d="M14.457 1.525a.937.937 0 0 0-.665-.271.665.665 0 0 0-.297.052L1.814 5.13a.936.936 0 0 0 0 1.75l2.047.875v4.454h4.305L9.13 14.3a.936.936 0 0 0 .83.516h.045a.945.945 0 0 0 .83-.621L14.65 2.558a.936.936 0 0 0 .061-.342.918.918 0 0 0-.254-.691ZM3.257 6.04l8.322-2.73-4.585 4.27-3.737-1.54Zm1.9 4.804V8.219l.778.324.726.332.263.578.638 1.4-2.406-.01Zm4.75 1.96L7.94 8.499l4.873-4.541-2.905 8.846Z"></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--send"><path d="M14.457 1.525a.937.937 0 0 0-.665-.271.665.665 0 0 0-.297.052L1.814 5.13a.936.936 0 0 0 0 1.75l2.047.875v4.454h4.305L9.13 14.3a.936.936 0 0 0 .83.516h.045a.945.945 0 0 0 .83-.621L14.65 2.558a.936.936 0 0 0 .061-.342.918.918 0 0 0-.254-.691ZM3.257 6.04l8.322-2.73-4.585 4.27-3.737-1.54Zm1.9 4.804V8.219l.778.324.726.332.263.578.638 1.4-2.406-.01Zm4.75 1.96L7.94 8.499l4.873-4.541-2.905 8.846Z"></path></svg>';
 
 class IconSend extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSend extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--send', '', null, 'IconSend');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--send', '', null, 'IconSend');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--send');
         this.root.append(svg);
     }

package/dist/IconSendLarge.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--sendLarge"><path d="M25.705 7.315a1.155 1.155 0 0 0-1.08-1.05 1.08 1.08 0 0 0-.488.052L5.5 12.43a1.178 1.178 0 0 0-.75 1.072 1.208 1.208 0 0 0 .75 1.118l3.75 1.552V22h6l2.108 4.59a1.2 1.2 0 0 0 1.064.652h.053a1.207 1.207 0 0 0 1.065-.795L25.645 7.87a1.17 1.17 0 0 0 .06-.555Zm-3.51 1.222-8.445 7.868-6.885-2.843 15.33-5.025ZM10.75 20.5v-3.705l1.785.75.832.345.3.652.908 1.958H10.75Zm7.628 4.71-3.556-7.763 8.783-8.197-5.227 15.96Z"></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--sendLarge"><path d="M25.705 7.315a1.155 1.155 0 0 0-1.08-1.05 1.08 1.08 0 0 0-.488.052L5.5 12.43a1.178 1.178 0 0 0-.75 1.072 1.208 1.208 0 0 0 .75 1.118l3.75 1.552V22h6l2.108 4.59a1.2 1.2 0 0 0 1.064.652h.053a1.207 1.207 0 0 0 1.065-.795L25.645 7.87a1.17 1.17 0 0 0 .06-.555Zm-3.51 1.222-8.445 7.868-6.885-2.843 15.33-5.025ZM10.75 20.5v-3.705l1.785.75.832.345.3.652.908 1.958H10.75Zm7.628 4.71-3.556-7.763 8.783-8.197-5.227 15.96Z"></path></svg>';
 
 class IconSendLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconSendLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sendLarge', '', null, 'IconSendLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sendLarge', '', null, 'IconSendLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sendLarge');
         this.root.append(svg);
     }

package/dist/IconServiceCharge.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--serviceCharge"><path d="M9.899 8.402s.008-.026.008-.035c0-.358-1.04-.656-2.327-.656-1.286 0-2.328.298-2.328.656 0 .01.01.027.01.035v4.857c0 .245 0 1.006 2.327 1.006s2.327-.753 2.327-1.076V8.41H9.89l.009-.009Zm-1.287.552v1.242c-.148.053-.49.123-1.006.123-.542 0-.901-.079-1.024-.132V8.963c.307.044.64.07.998.07.359 0 .717-.026 1.032-.07v-.008Zm-1.015 3.998c-.437 0-.787-.043-1.015-.087v-1.321c.35.07.727.087 1.024.087a5.22 5.22 0 0 0 1.006-.087v1.321a5.58 5.58 0 0 1-1.015.088Z"></path><path d="M13.696 5.751c0-.359-1.041-.656-2.327-.656-1.287 0-2.328.297-2.328.656 0 .009.009.018.009.035v7.306c0 1.12 1.934 1.182 2.327 1.182.394 0 2.328-.053 2.328-1.181V5.75h-.018.01Zm-3.325 3.176c.35.07.726.088 1.024.088.298 0 .656-.018 1.006-.088v1.27c-.149.052-.49.122-1.006.122-.543 0-.901-.079-1.024-.132V8.92v.008Zm2.03-2.59V7.58c-.149.052-.49.122-1.006.122-.543 0-.901-.078-1.024-.13V6.345c.306.044.639.07.998.07a7.66 7.66 0 0 0 1.032-.07v-.009Zm-1.015 6.624c-.446 0-.813-.07-1.015-.14v-1.268c.35.07.726.087 1.024.087.298 0 .656-.018 1.006-.088v1.26c-.201.07-.569.14-1.015.14v.01Z"></path><path d="M5.664 2.024 2.689 6.259h1.627L7.3 2.024H5.664Z"></path><path d="M3.135 3.686a.831.831 0 1 0 0-1.662.831.831 0 0 0 0 1.662Z"></path><path d="M6.775 6.381a.831.831 0 1 0 0-1.662.831.831 0 0 0 0 1.662Z"></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--serviceCharge"><path d="M9.899 8.402s.008-.026.008-.035c0-.358-1.04-.656-2.327-.656-1.286 0-2.328.298-2.328.656 0 .01.01.027.01.035v4.857c0 .245 0 1.006 2.327 1.006s2.327-.753 2.327-1.076V8.41H9.89l.009-.009Zm-1.287.552v1.242c-.148.053-.49.123-1.006.123-.542 0-.901-.079-1.024-.132V8.963c.307.044.64.07.998.07.359 0 .717-.026 1.032-.07v-.008Zm-1.015 3.998c-.437 0-.787-.043-1.015-.087v-1.321c.35.07.727.087 1.024.087a5.22 5.22 0 0 0 1.006-.087v1.321a5.58 5.58 0 0 1-1.015.088Z"></path><path d="M13.696 5.751c0-.359-1.041-.656-2.327-.656-1.287 0-2.328.297-2.328.656 0 .009.009.018.009.035v7.306c0 1.12 1.934 1.182 2.327 1.182.394 0 2.328-.053 2.328-1.181V5.75h-.018.01Zm-3.325 3.176c.35.07.726.088 1.024.088.298 0 .656-.018 1.006-.088v1.27c-.149.052-.49.122-1.006.122-.543 0-.901-.079-1.024-.132V8.92v.008Zm2.03-2.59V7.58c-.149.052-.49.122-1.006.122-.543 0-.901-.078-1.024-.13V6.345c.306.044.639.07.998.07a7.66 7.66 0 0 0 1.032-.07v-.009Zm-1.015 6.624c-.446 0-.813-.07-1.015-.14v-1.268c.35.07.726.087 1.024.087.298 0 .656-.018 1.006-.088v1.26c-.201.07-.569.14-1.015.14v.01Z"></path><path d="M5.664 2.024 2.689 6.259h1.627L7.3 2.024H5.664Z"></path><path d="M3.135 3.686a.831.831 0 1 0 0-1.662.831.831 0 0 0 0 1.662Z"></path><path d="M6.775 6.381a.831.831 0 1 0 0-1.662.831.831 0 0 0 0 1.662Z"></path></svg>';
 
 class IconServiceCharge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconServiceCharge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--serviceCharge', '', null, 'IconServiceCharge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--serviceCharge', '', null, 'IconServiceCharge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--serviceCharge');
         this.root.append(svg);
     }

package/dist/IconServiceChargeLarge.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--serviceChargeLarge"><path d="m7.355 12.727 3.911-5.556h2.135L9.49 12.727H7.355Z"></path><path fill-rule="evenodd" d="M26.622 12.553c0-.604-1.697-1.086-3.788-1.086-2.092 0-3.79.49-3.79 1.085v2.472c-.69-.208-1.666-.336-2.747-.336-2.091 0-3.789.49-3.789 1.085 0 .016.007.029.015.043l.012.026v3.02a10.902 10.902 0 0 0-2.205-.21c-2.091 0-3.789.49-3.789 1.084l.026 6.134c0 1.356 2.372 1.557 3.78 1.557.91 0 2.205-.087 3.028-.498.822.394 2.065.472 2.94.472.982 0 2.422-.1 3.214-.622.952.802 3.002.832 3.296.832.385 0 3.789-.052 3.789-1.82V12.552h.008Zm-5.8 5.94v-1.631c.669.163 1.43.206 2.02.206.595 0 1.365-.044 2.04-.21v1.645h-.01c-.14.087-.848.297-2.012.297-1.164 0-1.873-.21-2.013-.306h-.026Zm-.01 3.5v-1.65c.672.164 1.447.207 2.039.207.595 0 1.356-.044 2.03-.21v1.654c-.14.096-.849.306-2.012.306-1.164 0-1.873-.21-2.013-.306h-.044Zm4.07-6.973v-1.554c-.592.112-1.277.171-2.022.171-.753 0-1.453-.07-2.039-.175v1.55h.018c.14.095.848.306 2.012.306 1.164 0 1.873-.21 2.013-.298h.017Zm-2.04 10.841c-.98 0-1.723-.192-2.03-.341v-1.68c.683.175 1.462.219 2.057.219s1.347-.044 2.012-.201v1.67c-.306.15-1.05.342-2.039.342v-.009ZM12.37 22.046v-1.398c-.585.113-1.282.173-2.03.173-.753 0-1.444-.07-2.03-.175v1.392h.026c.14.096.849.306 2.012.306 1.164 0 1.873-.21 2.013-.298h.008Zm-2.022 3.623c-.936 0-1.662-.123-2.03-.228v-1.549c.665.167 1.435.21 2.021.21.587 0 1.366-.043 2.04-.21v1.558c-.368.105-1.103.236-2.04.236l.01-.017Zm8.015-.28c-.367.114-1.102.245-2.038.245-.937 0-1.672-.131-2.03-.245v-1.776c.682.175 1.46.218 2.056.218.595 0 1.347-.043 2.012-.201v1.759Zm0-3.623c-.14.097-.848.307-2.012.307-1.164 0-1.873-.21-2.013-.307h-.043v-1.653c.673.166 1.452.21 2.047.21.595 0 1.356-.044 2.03-.21v1.653h-.009Zm0-3.491h-.017c-.14.088-.849.298-2.013.298s-1.872-.21-2.012-.307h-.027v-1.592c.587.105 1.27.166 2.013.166.744 0 1.47-.07 2.065-.175v1.601l-.009.009Z" clip-rule="evenodd"></path><path d="M7.941 9.359a1.094 1.094 0 1 0 0-2.188 1.094 1.094 0 0 0 0 2.188Z"></path><path d="M13.803 11.8a1.094 1.094 0 1 1-2.187 0 1.094 1.094 0 0 1 2.188 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--serviceChargeLarge"><path d="m7.355 12.727 3.911-5.556h2.135L9.49 12.727H7.355Z"></path><path fill-rule="evenodd" d="M26.622 12.553c0-.604-1.697-1.086-3.788-1.086-2.092 0-3.79.49-3.79 1.085v2.472c-.69-.208-1.666-.336-2.747-.336-2.091 0-3.789.49-3.789 1.085 0 .016.007.029.015.043l.012.026v3.02a10.902 10.902 0 0 0-2.205-.21c-2.091 0-3.789.49-3.789 1.084l.026 6.134c0 1.356 2.372 1.557 3.78 1.557.91 0 2.205-.087 3.028-.498.822.394 2.065.472 2.94.472.982 0 2.422-.1 3.214-.622.952.802 3.002.832 3.296.832.385 0 3.789-.052 3.789-1.82V12.552h.008Zm-5.8 5.94v-1.631c.669.163 1.43.206 2.02.206.595 0 1.365-.044 2.04-.21v1.645h-.01c-.14.087-.848.297-2.012.297-1.164 0-1.873-.21-2.013-.306h-.026Zm-.01 3.5v-1.65c.672.164 1.447.207 2.039.207.595 0 1.356-.044 2.03-.21v1.654c-.14.096-.849.306-2.012.306-1.164 0-1.873-.21-2.013-.306h-.044Zm4.07-6.973v-1.554c-.592.112-1.277.171-2.022.171-.753 0-1.453-.07-2.039-.175v1.55h.018c.14.095.848.306 2.012.306 1.164 0 1.873-.21 2.013-.298h.017Zm-2.04 10.841c-.98 0-1.723-.192-2.03-.341v-1.68c.683.175 1.462.219 2.057.219s1.347-.044 2.012-.201v1.67c-.306.15-1.05.342-2.039.342v-.009ZM12.37 22.046v-1.398c-.585.113-1.282.173-2.03.173-.753 0-1.444-.07-2.03-.175v1.392h.026c.14.096.849.306 2.012.306 1.164 0 1.873-.21 2.013-.298h.008Zm-2.022 3.623c-.936 0-1.662-.123-2.03-.228v-1.549c.665.167 1.435.21 2.021.21.587 0 1.366-.043 2.04-.21v1.558c-.368.105-1.103.236-2.04.236l.01-.017Zm8.015-.28c-.367.114-1.102.245-2.038.245-.937 0-1.672-.131-2.03-.245v-1.776c.682.175 1.46.218 2.056.218.595 0 1.347-.043 2.012-.201v1.759Zm0-3.623c-.14.097-.848.307-2.012.307-1.164 0-1.873-.21-2.013-.307h-.043v-1.653c.673.166 1.452.21 2.047.21.595 0 1.356-.044 2.03-.21v1.653h-.009Zm0-3.491h-.017c-.14.088-.849.298-2.013.298s-1.872-.21-2.012-.307h-.027v-1.592c.587.105 1.27.166 2.013.166.744 0 1.47-.07 2.065-.175v1.601l-.009.009Z" clip-rule="evenodd"></path><path d="M7.941 9.359a1.094 1.094 0 1 0 0-2.188 1.094 1.094 0 0 0 0 2.188Z"></path><path d="M13.803 11.8a1.094 1.094 0 1 1-2.187 0 1.094 1.094 0 0 1 2.188 0Z"></path></svg>';
 
 class IconServiceChargeLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconServiceChargeLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--serviceChargeLarge', '', null, 'IconServiceChargeLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--serviceChargeLarge', '', null, 'IconServiceChargeLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--serviceChargeLarge');
         this.root.append(svg);
     }