@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/dist/IconPaymentMobilePay.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--mobilePay"><path fill="#5A78FF" d="m1.753 12.207.458-1.456a.048.048 0 0 1 .043-.037h.23c.02.003.038.017.045.037l.356.919c.007.018.025.02.032 0l.354-.92a.057.057 0 0 1 .045-.036h.23c.02.002.038.017.043.037l.448 1.457c.01.029-.006.05-.033.05H3.73a.04.04 0 0 1-.04-.032l-.292-.947c-.004-.018-.024-.018-.031 0l-.343.94c-.011.027-.027.039-.05.039h-.16c-.025 0-.038-.014-.047-.04l-.354-.938c-.007-.019-.025-.019-.03 0l-.297.946a.04.04 0 0 1-.043.031h-.257c-.027 0-.045-.018-.034-.05Zm2.372-.52c0-.337.257-.598.604-.598.35 0 .605.26.605.599 0 .336-.255.599-.605.599a.59.59 0 0 1-.604-.6Zm.902 0c0-.176-.133-.317-.298-.317-.162 0-.297.14-.297.318 0 .175.135.318.297.318.165 0 .298-.143.298-.318Zm.848.477c-.023-.018-.043-.01-.043.02v.03a.043.043 0 0 1-.04.043h-.213a.044.044 0 0 1-.042-.043v-1.456c0-.024.02-.043.042-.044h.224c.023.001.04.02.04.044v.415c0 .03.02.038.052.016a.493.493 0 0 1 .295-.1c.31 0 .546.263.546.599 0 .336-.241.599-.555.599a.46.46 0 0 1-.306-.123Zm.554-.476c0-.177-.133-.318-.3-.318-.162 0-.295.139-.295.318 0 .177.131.315.296.315.166 0 .3-.14.3-.315Zm.494-.867c0-.095.077-.172.171-.172a.172.172 0 0 1 0 .345.175.175 0 0 1-.17-.173Zm.016 1.393v-1.053c0-.023.018-.042.04-.043h.224c.023.001.042.02.043.043v1.053c-.001.024-.02.043-.043.043h-.224a.043.043 0 0 1-.04-.043Zm.558-.342v-1.114c0-.023.017-.043.04-.044h.223c.024.001.043.02.043.044v1.12c0 .073.032.12.11.12a.043.043 0 0 1 .044.044v.186a.042.042 0 0 1-.043.04c-.298 0-.417-.097-.417-.396Zm.541-.18c0-.345.253-.603.59-.603.337 0 .583.263.583.608 0 .04-.012.075-.052.075h-.776c-.02 0-.027.011-.025.03.016.129.129.224.275.224a.275.275 0 0 0 .215-.098.09.09 0 0 1 .072-.036h.207c.036 0 .052.025.039.061-.075.193-.287.334-.542.334a.57.57 0 0 1-.586-.595Zm.823-.104c.016 0 .023-.007.02-.025a.262.262 0 0 0-.514-.007c-.004.016-.002.032.018.032h.476Zm.537.626v-1.456c0-.023.017-.043.04-.044h.71c.325 0 .546.191.546.511 0 .313-.25.517-.561.517h-.377a.037.037 0 0 0-.03.012.038.038 0 0 0-.01.032v.428c-.001.024-.02.043-.043.044h-.235a.043.043 0 0 1-.04-.044Zm.735-.735c.155 0 .241-.134.241-.252 0-.125-.084-.242-.241-.242h-.38c-.026 0-.037.013-.037.04v.413c0 .028.01.041.038.041h.379Zm.667.209c0-.345.257-.6.559-.6.128 0 .219.05.3.117.02.018.043.015.043-.012v-.034a.04.04 0 0 1 .04-.04h.212c.023 0 .042.019.043.043v.75c0 .057.02.082.059.084a.04.04 0 0 1 .038.037v.197a.038.038 0 0 1-.038.039c-.15 0-.237-.043-.287-.13-.013-.022-.03-.027-.052-.004a.496.496 0 0 1-.363.152c-.302 0-.554-.256-.554-.6Zm.902 0c0-.18-.131-.318-.296-.318-.167 0-.297.14-.297.318 0 .175.13.318.297.318.165 0 .296-.141.296-.318Zm.5.969v-.184a.042.042 0 0 1 .043-.04c.149 0 .293-.08.325-.219a.127.127 0 0 0-.01-.09l-.414-.944c-.014-.037.009-.062.036-.062h.223c.023 0 .036.018.045.041l.26.604c.017.047.047.045.067-.002l.248-.606c.01-.023.02-.037.043-.037h.214a.04.04 0 0 1 .034.017.04.04 0 0 1 .004.038l-.426 1.019c-.155.37-.32.508-.649.508a.045.045 0 0 1-.043-.043Zm1.382-1.226v-.235c0-.003 0-.005-.002-.007a.009.009 0 0 0-.007-.003h-.081c-.007 0-.011-.002-.011-.01v-.046c0-.003 0-.006.003-.009a.011.011 0 0 1 .008-.003h.261a.01.01 0 0 1 .009.003.01.01 0 0 1 .003.009v.045c0 .01-.005.011-.012.011h-.083c-.005 0-.007.005-.007.01v.236a.014.014 0 0 1-.003.01.013.013 0 0 1-.01.003h-.057a.013.013 0 0 1-.01-.014Zm.18-.004.095-.3a.012.012 0 0 1 .014-.009h.05c.005 0 .01.004.013.01l.065.174c.005.007.007.007.011 0l.068-.175a.013.013 0 0 1 .014-.009h.05c.005 0 .011.003.013.01l.092.299c.002.011 0 .018-.011.018h-.063c-.007 0-.01-.004-.011-.009l-.055-.175a.005.005 0 0 0-.004-.003.005.005 0 0 0-.005.003l-.06.173c-.005.007-.01.011-.016.011h-.036a.015.015 0 0 1-.016-.011l-.063-.17a.005.005 0 0 0-.005-.004.005.005 0 0 0-.004.004l-.052.172c-.005.007-.007.01-.014.01h-.058c-.011 0-.016-.008-.011-.02ZM7.163 9.203a.505.505 0 0 1-.467-.313L4.956 4.66a.508.508 0 0 1 .272-.663l1.824-.76a.501.501 0 0 1 .658.275l1.74 4.229a.508.508 0 0 1-.272.662l-1.823.76a.5.5 0 0 1-.192.039Zm.082-5.73a.23.23 0 0 0-.09.018l-1.823.76a.233.233 0 0 0-.126.305l1.741 4.23c.05.119.185.175.304.126l1.823-.76a.233.233 0 0 0 .126-.306L7.46 3.617a.233.233 0 0 0-.215-.144Z"></path><path fill="url(#prefix__paint0_linear_3973_4581)" d="m7.826 3.792-.251.104.688 1.675.25-.105-.687-1.674Z" style="mix-blend-mode:multiply"></path><path fill="url(#prefix__paint1_linear_3973_4581)" d="m9.084 7.565.25-.105-.778-1.895-.251.105.779 1.895Z" style="mix-blend-mode:multiply"></path><path fill="#5A78FF" d="M8.768 6.309c-.522.217-.957.517-1.242.879L6.79 5.402a3.104 3.104 0 0 1 1.242-.88c.521-.217 1.048-.322 1.496-.261l.735 1.786a3.085 3.085 0 0 0-1.496.262Z"></path><path fill="url(#prefix__paint2_linear_3973_4581)" d="M8.768 6.309c-.522.217-.957.517-1.242.879L6.79 5.402a3.104 3.104 0 0 1 1.242-.88c.521-.217 1.048-.322 1.496-.261l.735 1.786a3.085 3.085 0 0 0-1.496.262Z" style="mix-blend-mode:multiply"></path><path fill="url(#prefix__paint3_linear_3973_4581)" d="M8.768 6.309c-.522.217-.957.517-1.242.879L6.79 5.402a3.104 3.104 0 0 1 1.242-.88c.521-.217 1.048-.322 1.496-.261l.735 1.786a3.085 3.085 0 0 0-1.496.262Z" style="mix-blend-mode:multiply"></path><path fill="#5A78FF" d="M9.007 6.853c-.564 0-1.08.11-1.481.334V5.381a3.088 3.088 0 0 1 1.481-.334c.565 0 1.092.106 1.482.334v1.806a3.086 3.086 0 0 0-1.482-.334Z"></path><defs><linearGradient id="prefix__paint0_linear_3973_4581" x1="7.843" x2="8.107" y1="10.42" y2="3.138" gradientUnits="userSpaceOnUse"><stop stop-color="#504678"></stop><stop offset=".302" stop-color="#504678" stop-opacity=".616"></stop><stop offset=".608" stop-color="#504678" stop-opacity=".283"></stop><stop offset=".852" stop-color="#504678" stop-opacity=".076"></stop><stop offset="1" stop-color="#504678" stop-opacity="0"></stop></linearGradient><linearGradient id="prefix__paint1_linear_3973_4581" x1="7.843" x2="8.107" y1="10.42" y2="3.138" gradientUnits="userSpaceOnUse"><stop stop-color="#504678"></stop><stop offset=".302" stop-color="#504678" stop-opacity=".616"></stop><stop offset=".608" stop-color="#504678" stop-opacity=".283"></stop><stop offset=".852" stop-color="#504678" stop-opacity=".076"></stop><stop offset="1" stop-color="#504678" stop-opacity="0"></stop></linearGradient><linearGradient id="prefix__paint2_linear_3973_4581" x1="3.463" x2="8.084" y1="9.502" y2="6.01" gradientUnits="userSpaceOnUse"><stop stop-color="#504678"></stop><stop offset=".179" stop-color="#504678" stop-opacity=".872"></stop><stop offset=".526" stop-color="#504678" stop-opacity=".536"></stop><stop offset="1" stop-color="#504678" stop-opacity="0"></stop></linearGradient><linearGradient id="prefix__paint3_linear_3973_4581" x1="7.715" x2="7.536" y1="6.522" y2="4.931" gradientUnits="userSpaceOnUse"><stop stop-color="#504678"></stop><stop offset=".643" stop-color="#504678" stop-opacity=".332"></stop><stop offset="1" stop-color="#504678" stop-opacity="0"></stop></linearGradient></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--mobilePay"><path fill="#5A78FF" d="m1.753 12.207.458-1.456a.048.048 0 0 1 .043-.037h.23c.02.003.038.017.045.037l.356.919c.007.018.025.02.032 0l.354-.92a.057.057 0 0 1 .045-.036h.23c.02.002.038.017.043.037l.448 1.457c.01.029-.006.05-.033.05H3.73a.04.04 0 0 1-.04-.032l-.292-.947c-.004-.018-.024-.018-.031 0l-.343.94c-.011.027-.027.039-.05.039h-.16c-.025 0-.038-.014-.047-.04l-.354-.938c-.007-.019-.025-.019-.03 0l-.297.946a.04.04 0 0 1-.043.031h-.257c-.027 0-.045-.018-.034-.05Zm2.372-.52c0-.337.257-.598.604-.598.35 0 .605.26.605.599 0 .336-.255.599-.605.599a.59.59 0 0 1-.604-.6Zm.902 0c0-.176-.133-.317-.298-.317-.162 0-.297.14-.297.318 0 .175.135.318.297.318.165 0 .298-.143.298-.318Zm.848.477c-.023-.018-.043-.01-.043.02v.03a.043.043 0 0 1-.04.043h-.213a.044.044 0 0 1-.042-.043v-1.456c0-.024.02-.043.042-.044h.224c.023.001.04.02.04.044v.415c0 .03.02.038.052.016a.493.493 0 0 1 .295-.1c.31 0 .546.263.546.599 0 .336-.241.599-.555.599a.46.46 0 0 1-.306-.123Zm.554-.476c0-.177-.133-.318-.3-.318-.162 0-.295.139-.295.318 0 .177.131.315.296.315.166 0 .3-.14.3-.315Zm.494-.867c0-.095.077-.172.171-.172a.172.172 0 0 1 0 .345.175.175 0 0 1-.17-.173Zm.016 1.393v-1.053c0-.023.018-.042.04-.043h.224c.023.001.042.02.043.043v1.053c-.001.024-.02.043-.043.043h-.224a.043.043 0 0 1-.04-.043Zm.558-.342v-1.114c0-.023.017-.043.04-.044h.223c.024.001.043.02.043.044v1.12c0 .073.032.12.11.12a.043.043 0 0 1 .044.044v.186a.042.042 0 0 1-.043.04c-.298 0-.417-.097-.417-.396Zm.541-.18c0-.345.253-.603.59-.603.337 0 .583.263.583.608 0 .04-.012.075-.052.075h-.776c-.02 0-.027.011-.025.03.016.129.129.224.275.224a.275.275 0 0 0 .215-.098.09.09 0 0 1 .072-.036h.207c.036 0 .052.025.039.061-.075.193-.287.334-.542.334a.57.57 0 0 1-.586-.595Zm.823-.104c.016 0 .023-.007.02-.025a.262.262 0 0 0-.514-.007c-.004.016-.002.032.018.032h.476Zm.537.626v-1.456c0-.023.017-.043.04-.044h.71c.325 0 .546.191.546.511 0 .313-.25.517-.561.517h-.377a.037.037 0 0 0-.03.012.038.038 0 0 0-.01.032v.428c-.001.024-.02.043-.043.044h-.235a.043.043 0 0 1-.04-.044Zm.735-.735c.155 0 .241-.134.241-.252 0-.125-.084-.242-.241-.242h-.38c-.026 0-.037.013-.037.04v.413c0 .028.01.041.038.041h.379Zm.667.209c0-.345.257-.6.559-.6.128 0 .219.05.3.117.02.018.043.015.043-.012v-.034a.04.04 0 0 1 .04-.04h.212c.023 0 .042.019.043.043v.75c0 .057.02.082.059.084a.04.04 0 0 1 .038.037v.197a.038.038 0 0 1-.038.039c-.15 0-.237-.043-.287-.13-.013-.022-.03-.027-.052-.004a.496.496 0 0 1-.363.152c-.302 0-.554-.256-.554-.6Zm.902 0c0-.18-.131-.318-.296-.318-.167 0-.297.14-.297.318 0 .175.13.318.297.318.165 0 .296-.141.296-.318Zm.5.969v-.184a.042.042 0 0 1 .043-.04c.149 0 .293-.08.325-.219a.127.127 0 0 0-.01-.09l-.414-.944c-.014-.037.009-.062.036-.062h.223c.023 0 .036.018.045.041l.26.604c.017.047.047.045.067-.002l.248-.606c.01-.023.02-.037.043-.037h.214a.04.04 0 0 1 .034.017.04.04 0 0 1 .004.038l-.426 1.019c-.155.37-.32.508-.649.508a.045.045 0 0 1-.043-.043Zm1.382-1.226v-.235c0-.003 0-.005-.002-.007a.009.009 0 0 0-.007-.003h-.081c-.007 0-.011-.002-.011-.01v-.046c0-.003 0-.006.003-.009a.011.011 0 0 1 .008-.003h.261a.01.01 0 0 1 .009.003.01.01 0 0 1 .003.009v.045c0 .01-.005.011-.012.011h-.083c-.005 0-.007.005-.007.01v.236a.014.014 0 0 1-.003.01.013.013 0 0 1-.01.003h-.057a.013.013 0 0 1-.01-.014Zm.18-.004.095-.3a.012.012 0 0 1 .014-.009h.05c.005 0 .01.004.013.01l.065.174c.005.007.007.007.011 0l.068-.175a.013.013 0 0 1 .014-.009h.05c.005 0 .011.003.013.01l.092.299c.002.011 0 .018-.011.018h-.063c-.007 0-.01-.004-.011-.009l-.055-.175a.005.005 0 0 0-.004-.003.005.005 0 0 0-.005.003l-.06.173c-.005.007-.01.011-.016.011h-.036a.015.015 0 0 1-.016-.011l-.063-.17a.005.005 0 0 0-.005-.004.005.005 0 0 0-.004.004l-.052.172c-.005.007-.007.01-.014.01h-.058c-.011 0-.016-.008-.011-.02ZM7.163 9.203a.505.505 0 0 1-.467-.313L4.956 4.66a.508.508 0 0 1 .272-.663l1.824-.76a.501.501 0 0 1 .658.275l1.74 4.229a.508.508 0 0 1-.272.662l-1.823.76a.5.5 0 0 1-.192.039Zm.082-5.73a.23.23 0 0 0-.09.018l-1.823.76a.233.233 0 0 0-.126.305l1.741 4.23c.05.119.185.175.304.126l1.823-.76a.233.233 0 0 0 .126-.306L7.46 3.617a.233.233 0 0 0-.215-.144Z"></path><path fill="url(#prefix__paint0_linear_3973_4581)" d="m7.826 3.792-.251.104.688 1.675.25-.105-.687-1.674Z" style="mix-blend-mode:multiply"></path><path fill="url(#prefix__paint1_linear_3973_4581)" d="m9.084 7.565.25-.105-.778-1.895-.251.105.779 1.895Z" style="mix-blend-mode:multiply"></path><path fill="#5A78FF" d="M8.768 6.309c-.522.217-.957.517-1.242.879L6.79 5.402a3.104 3.104 0 0 1 1.242-.88c.521-.217 1.048-.322 1.496-.261l.735 1.786a3.085 3.085 0 0 0-1.496.262Z"></path><path fill="url(#prefix__paint2_linear_3973_4581)" d="M8.768 6.309c-.522.217-.957.517-1.242.879L6.79 5.402a3.104 3.104 0 0 1 1.242-.88c.521-.217 1.048-.322 1.496-.261l.735 1.786a3.085 3.085 0 0 0-1.496.262Z" style="mix-blend-mode:multiply"></path><path fill="url(#prefix__paint3_linear_3973_4581)" d="M8.768 6.309c-.522.217-.957.517-1.242.879L6.79 5.402a3.104 3.104 0 0 1 1.242-.88c.521-.217 1.048-.322 1.496-.261l.735 1.786a3.085 3.085 0 0 0-1.496.262Z" style="mix-blend-mode:multiply"></path><path fill="#5A78FF" d="M9.007 6.853c-.564 0-1.08.11-1.481.334V5.381a3.088 3.088 0 0 1 1.481-.334c.565 0 1.092.106 1.482.334v1.806a3.086 3.086 0 0 0-1.482-.334Z"></path><defs><linearGradient id="prefix__paint0_linear_3973_4581" x1="7.843" x2="8.107" y1="10.42" y2="3.138" gradientUnits="userSpaceOnUse"><stop stop-color="#504678"></stop><stop offset=".302" stop-color="#504678" stop-opacity=".616"></stop><stop offset=".608" stop-color="#504678" stop-opacity=".283"></stop><stop offset=".852" stop-color="#504678" stop-opacity=".076"></stop><stop offset="1" stop-color="#504678" stop-opacity="0"></stop></linearGradient><linearGradient id="prefix__paint1_linear_3973_4581" x1="7.843" x2="8.107" y1="10.42" y2="3.138" gradientUnits="userSpaceOnUse"><stop stop-color="#504678"></stop><stop offset=".302" stop-color="#504678" stop-opacity=".616"></stop><stop offset=".608" stop-color="#504678" stop-opacity=".283"></stop><stop offset=".852" stop-color="#504678" stop-opacity=".076"></stop><stop offset="1" stop-color="#504678" stop-opacity="0"></stop></linearGradient><linearGradient id="prefix__paint2_linear_3973_4581" x1="3.463" x2="8.084" y1="9.502" y2="6.01" gradientUnits="userSpaceOnUse"><stop stop-color="#504678"></stop><stop offset=".179" stop-color="#504678" stop-opacity=".872"></stop><stop offset=".526" stop-color="#504678" stop-opacity=".536"></stop><stop offset="1" stop-color="#504678" stop-opacity="0"></stop></linearGradient><linearGradient id="prefix__paint3_linear_3973_4581" x1="7.715" x2="7.536" y1="6.522" y2="4.931" gradientUnits="userSpaceOnUse"><stop stop-color="#504678"></stop><stop offset=".643" stop-color="#504678" stop-opacity=".332"></stop><stop offset="1" stop-color="#504678" stop-opacity="0"></stop></linearGradient></defs></svg>';
 
 class IconPaymentMobilePay extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPaymentMobilePay extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--mobilePay', '', null, 'IconPaymentMobilePay');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--mobilePay', '', null, 'IconPaymentMobilePay');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--mobilePay');
         this.root.append(svg);
     }

package/dist/IconPaymentPaypal.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--paypal"><path fill="#253B80" fill-rule="evenodd" d="m5.838 13.312.204-1.299-.454-.012H3.415l1.507-9.573a.135.135 0 0 1 .042-.075.11.11 0 0 1 .079-.029h3.662c1.215 0 2.056.254 2.493.753.204.233.337.479.4.75.066.283.066.62 0 1.032v.295l.2.117c.174.091.312.195.416.316.175.2.291.454.337.758.05.312.033.678-.05 1.098a3.949 3.949 0 0 1-.45 1.245 2.574 2.574 0 0 1-.711.782c-.27.192-.595.341-.962.433a4.816 4.816 0 0 1-1.198.137h-.288a.875.875 0 0 0-.557.204.873.873 0 0 0-.292.52l-.02.117-.362 2.285-.017.083c-.004.025-.013.038-.021.05-.008.008-.025.013-.037.013h-1.76.012Z" clip-rule="evenodd"></path><path fill="#179BD7" fill-rule="evenodd" d="m12.002 4.917-.038.216C11.482 7.614 9.83 8.471 7.72 8.471H6.645a.523.523 0 0 0-.516.441l-.55 3.492-.153.99a.275.275 0 0 0 .27.317h1.907a.46.46 0 0 0 .453-.387l.021-.096.358-2.276.025-.125a.457.457 0 0 1 .454-.387H9.2c1.848 0 3.292-.75 3.716-2.922.175-.907.084-1.665-.383-2.197a1.798 1.798 0 0 0-.52-.404" clip-rule="evenodd"></path><path fill="#222D65" fill-rule="evenodd" d="M11.494 4.717c-.075-.02-.15-.041-.229-.058a4.117 4.117 0 0 0-.241-.046 6.114 6.114 0 0 0-.95-.07h-2.87a.468.468 0 0 0-.2.045.453.453 0 0 0-.254.342L6.138 8.8l-.017.113a.523.523 0 0 1 .516-.442h1.074c2.11 0 3.762-.857 4.245-3.338l.038-.216a2.256 2.256 0 0 0-.396-.166.825.825 0 0 0-.108-.034" clip-rule="evenodd"></path><path fill="#253B80" fill-rule="evenodd" d="M6.754 5.105a.453.453 0 0 1 .254-.341.468.468 0 0 1 .2-.046h2.871c.341 0 .658.02.949.07.083.013.162.03.241.046.08.017.154.038.23.059.037.012.074.02.107.033.142.046.275.104.396.166.146-.915 0-1.54-.495-2.106-.546-.62-1.532-.886-2.793-.886H5.047a.52.52 0 0 0-.516.441l-1.527 9.672a.313.313 0 0 0 .312.363h2.26L6.754 5.1v.004Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--paypal"><path fill="#253B80" fill-rule="evenodd" d="m5.838 13.312.204-1.299-.454-.012H3.415l1.507-9.573a.135.135 0 0 1 .042-.075.11.11 0 0 1 .079-.029h3.662c1.215 0 2.056.254 2.493.753.204.233.337.479.4.75.066.283.066.62 0 1.032v.295l.2.117c.174.091.312.195.416.316.175.2.291.454.337.758.05.312.033.678-.05 1.098a3.949 3.949 0 0 1-.45 1.245 2.574 2.574 0 0 1-.711.782c-.27.192-.595.341-.962.433a4.816 4.816 0 0 1-1.198.137h-.288a.875.875 0 0 0-.557.204.873.873 0 0 0-.292.52l-.02.117-.362 2.285-.017.083c-.004.025-.013.038-.021.05-.008.008-.025.013-.037.013h-1.76.012Z" clip-rule="evenodd"></path><path fill="#179BD7" fill-rule="evenodd" d="m12.002 4.917-.038.216C11.482 7.614 9.83 8.471 7.72 8.471H6.645a.523.523 0 0 0-.516.441l-.55 3.492-.153.99a.275.275 0 0 0 .27.317h1.907a.46.46 0 0 0 .453-.387l.021-.096.358-2.276.025-.125a.457.457 0 0 1 .454-.387H9.2c1.848 0 3.292-.75 3.716-2.922.175-.907.084-1.665-.383-2.197a1.798 1.798 0 0 0-.52-.404" clip-rule="evenodd"></path><path fill="#222D65" fill-rule="evenodd" d="M11.494 4.717c-.075-.02-.15-.041-.229-.058a4.117 4.117 0 0 0-.241-.046 6.114 6.114 0 0 0-.95-.07h-2.87a.468.468 0 0 0-.2.045.453.453 0 0 0-.254.342L6.138 8.8l-.017.113a.523.523 0 0 1 .516-.442h1.074c2.11 0 3.762-.857 4.245-3.338l.038-.216a2.256 2.256 0 0 0-.396-.166.825.825 0 0 0-.108-.034" clip-rule="evenodd"></path><path fill="#253B80" fill-rule="evenodd" d="M6.754 5.105a.453.453 0 0 1 .254-.341.468.468 0 0 1 .2-.046h2.871c.341 0 .658.02.949.07.083.013.162.03.241.046.08.017.154.038.23.059.037.012.074.02.107.033.142.046.275.104.396.166.146-.915 0-1.54-.495-2.106-.546-.62-1.532-.886-2.793-.886H5.047a.52.52 0 0 0-.516.441l-1.527 9.672a.313.313 0 0 0 .312.363h2.26L6.754 5.1v.004Z" clip-rule="evenodd"></path></svg>';
 
 class IconPaymentPaypal extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPaymentPaypal extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--paypal', '', null, 'IconPaymentPaypal');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--paypal', '', null, 'IconPaymentPaypal');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--paypal');
         this.root.append(svg);
     }

package/dist/IconPaymentPayu.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--payu"><path fill="#9FC603" d="M1.866 6.88s.018-.017.026-.035a.45.45 0 0 1 .447-.359c.428-.017.866-.043 1.295.018.498.079.743.341.813.849.027.2.027.402-.017.603-.096.455-.403.718-.893.762-.358.035-.717.008-1.085.017-.078 0-.105.018-.105.105v.893c0 .096.018.21-.096.253a.362.362 0 0 1-.385-.078V6.88Zm.49.788v.55c0 .053.009.08.07.08.35 0 .691.008 1.041-.018.324-.026.49-.201.508-.525v-.262c-.018-.35-.193-.534-.543-.543-.288-.009-.577 0-.866 0-.149 0-.201.053-.201.21v.516l-.009-.008Z"></path><path fill="#9FC603" d="M13.346 4.946c.079.149.035.307.027.464 0 .044-.053.053-.088.053h-.315c-.044 0-.088 0-.088-.053 0-.157-.043-.315.027-.464h.446-.009Z"></path><path fill="#9EC602" d="M12.856 7.256v1.217c0 .192.009.385-.035.568-.096.447-.376.735-.796.884a2.495 2.495 0 0 1-1.558.018c-.56-.167-.866-.578-.875-1.182-.017-.647 0-1.295 0-1.951 0-.219.08-.297.29-.324.157-.017.323-.017.49.009.14.026.192.079.218.219.009.052.009.105.009.157v1.777c0 .35.131.48.472.525a2 2 0 0 0 .324 0c.298-.035.446-.184.446-.482V6.854c0-.271.079-.35.35-.368h.149v.49c0 .28.009.289.28.289h.21l.026-.009Z"></path><path fill="#9FC603" d="M8.14 10.039h-.079c-.324.052-.542-.07-.656-.376-.096-.245-.149-.508-.219-.762-.122-.437-.236-.866-.359-1.303-.008-.044-.026-.088-.026-.132 0-.052.018-.087.061-.113a.304.304 0 0 1 .43.175c.122.437.244.883.358 1.32.052.202.105.403.166.605.044.14.105.175.236.183.167 0 .237-.052.29-.262l.34-1.418.105-.428c.044-.175.28-.263.438-.167.07.044.061.114.044.184-.07.298-.149.595-.219.893l-.42 1.67a1.585 1.585 0 0 1-.219.517c-.21.324-.525.464-.901.438-.053 0-.079-.027-.105-.062-.018-.035-.026-.07-.035-.105-.044-.175-.018-.21.157-.245.377-.061.543-.219.63-.595l-.017-.017Z"></path><path fill="#9FC603" d="M6.626 8.656c0 .263.026.525-.026.779-.053.245-.193.42-.429.499a1.763 1.763 0 0 1-1.216.026c-.35-.114-.525-.402-.516-.779.017-.385.192-.621.568-.717.158-.044.315-.061.473-.061h.586c.079 0 .105-.027.096-.105V8.06c-.008-.183-.096-.297-.27-.35-.246-.078-.5-.052-.745-.026-.087 0-.175.026-.262.044-.105.017-.158-.026-.175-.131-.018-.22.017-.272.236-.307.368-.061.735-.078 1.094.027.376.105.569.34.586.735v.603Zm-.464.394v-.061c0-.201 0-.201-.2-.201-.246 0-.5-.018-.736.035-.21.052-.306.175-.306.393 0 .21.105.333.306.385.158.044.324.035.481.018.35-.044.455-.166.455-.516V9.05Z"></path><path fill="#9FC603" d="M12.357 6.469v-.096c0-.097.053-.15.15-.15h.717c.105 0 .149.062.157.167v.7c0 .114-.061.166-.175.166h-.35V6.75c0-.158-.079-.236-.236-.263-.087-.017-.175-.008-.262-.017Z"></path><path fill="#9FC603" d="M14.134 5.856v.254c0 .079-.035.123-.114.123h-.516c-.079 0-.123-.044-.123-.132v-.507c0-.088.044-.131.131-.131h.5c.078 0 .122.035.122.122v.271Z"></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--payu"><path fill="#9FC603" d="M1.866 6.88s.018-.017.026-.035a.45.45 0 0 1 .447-.359c.428-.017.866-.043 1.295.018.498.079.743.341.813.849.027.2.027.402-.017.603-.096.455-.403.718-.893.762-.358.035-.717.008-1.085.017-.078 0-.105.018-.105.105v.893c0 .096.018.21-.096.253a.362.362 0 0 1-.385-.078V6.88Zm.49.788v.55c0 .053.009.08.07.08.35 0 .691.008 1.041-.018.324-.026.49-.201.508-.525v-.262c-.018-.35-.193-.534-.543-.543-.288-.009-.577 0-.866 0-.149 0-.201.053-.201.21v.516l-.009-.008Z"></path><path fill="#9FC603" d="M13.346 4.946c.079.149.035.307.027.464 0 .044-.053.053-.088.053h-.315c-.044 0-.088 0-.088-.053 0-.157-.043-.315.027-.464h.446-.009Z"></path><path fill="#9EC602" d="M12.856 7.256v1.217c0 .192.009.385-.035.568-.096.447-.376.735-.796.884a2.495 2.495 0 0 1-1.558.018c-.56-.167-.866-.578-.875-1.182-.017-.647 0-1.295 0-1.951 0-.219.08-.297.29-.324.157-.017.323-.017.49.009.14.026.192.079.218.219.009.052.009.105.009.157v1.777c0 .35.131.48.472.525a2 2 0 0 0 .324 0c.298-.035.446-.184.446-.482V6.854c0-.271.079-.35.35-.368h.149v.49c0 .28.009.289.28.289h.21l.026-.009Z"></path><path fill="#9FC603" d="M8.14 10.039h-.079c-.324.052-.542-.07-.656-.376-.096-.245-.149-.508-.219-.762-.122-.437-.236-.866-.359-1.303-.008-.044-.026-.088-.026-.132 0-.052.018-.087.061-.113a.304.304 0 0 1 .43.175c.122.437.244.883.358 1.32.052.202.105.403.166.605.044.14.105.175.236.183.167 0 .237-.052.29-.262l.34-1.418.105-.428c.044-.175.28-.263.438-.167.07.044.061.114.044.184-.07.298-.149.595-.219.893l-.42 1.67a1.585 1.585 0 0 1-.219.517c-.21.324-.525.464-.901.438-.053 0-.079-.027-.105-.062-.018-.035-.026-.07-.035-.105-.044-.175-.018-.21.157-.245.377-.061.543-.219.63-.595l-.017-.017Z"></path><path fill="#9FC603" d="M6.626 8.656c0 .263.026.525-.026.779-.053.245-.193.42-.429.499a1.763 1.763 0 0 1-1.216.026c-.35-.114-.525-.402-.516-.779.017-.385.192-.621.568-.717.158-.044.315-.061.473-.061h.586c.079 0 .105-.027.096-.105V8.06c-.008-.183-.096-.297-.27-.35-.246-.078-.5-.052-.745-.026-.087 0-.175.026-.262.044-.105.017-.158-.026-.175-.131-.018-.22.017-.272.236-.307.368-.061.735-.078 1.094.027.376.105.569.34.586.735v.603Zm-.464.394v-.061c0-.201 0-.201-.2-.201-.246 0-.5-.018-.736.035-.21.052-.306.175-.306.393 0 .21.105.333.306.385.158.044.324.035.481.018.35-.044.455-.166.455-.516V9.05Z"></path><path fill="#9FC603" d="M12.357 6.469v-.096c0-.097.053-.15.15-.15h.717c.105 0 .149.062.157.167v.7c0 .114-.061.166-.175.166h-.35V6.75c0-.158-.079-.236-.236-.263-.087-.017-.175-.008-.262-.017Z"></path><path fill="#9FC603" d="M14.134 5.856v.254c0 .079-.035.123-.114.123h-.516c-.079 0-.123-.044-.123-.132v-.507c0-.088.044-.131.131-.131h.5c.078 0 .122.035.122.122v.271Z"></path></svg>';
 
 class IconPaymentPayu extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPaymentPayu extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--payu', '', null, 'IconPaymentPayu');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--payu', '', null, 'IconPaymentPayu');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--payu');
         this.root.append(svg);
     }

package/dist/IconPaymentPostFinance.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--postFinance"><path fill="#FC0" fill-rule="evenodd" d="M2 14h12V2H2v12Z" clip-rule="evenodd"></path><path fill="red" fill-rule="evenodd" d="M11.23 6.8c.13-.688.291-1.348.416-2.017-.037-.005-.055-.014-.074-.014H9.006c-.083 0-.106.037-.125.116L8.355 7.34c-.004.032-.023.102-.023.102h.683c.014-.056.286-1.311.411-1.902.028-.134.032-.134.17-.134.36 0 1.168.005 1.224.01l-.434 2.03h2.036c0 .037-.162.785-.227 1.136-.018.106-.069.129-.166.129h-1.768c-.138 0-.138 0-.166.138l-.346 1.616c-.032.156-.032.156-.19.156H8.389c-.213 0-.217 0-.263.208-.033.139-.06.282-.093.434.065 0 1.445.01 2.096.01.138 0 .138 0 .17-.134.084-.379.333-1.551.383-1.773h1.865c.194 0 .166.014.208-.17.157-.725.489-2.304.498-2.387h-2.03l.009-.009Z" clip-rule="evenodd"></path><path fill="#fff" fill-rule="evenodd" d="m2.803 9.666-.341 1.592h4.68l.373-1.592H2.803Z" clip-rule="evenodd"></path><path fill="#000" fill-rule="evenodd" d="M5.812 7.377c-.143-.346-.433-.522-.789-.559-.318-.032-.641-.023-.964-.027h-.296c-.208.964-.554 2.538-.757 3.498h.776c.032-.134.166-.886.193-1.015.019-.083.051-.116.134-.116.162 0 .328 0 .49-.009.489-.032.867-.258 1.112-.683.194-.346.254-.715.101-1.09ZM4.525 8.512c-.125.01-.25 0-.388 0l.203-.978c.014-.065.042-.106.12-.102.11.01.222 0 .332.01.199.018.319.143.333.341.032.41-.194.688-.605.725l.005.004Z" clip-rule="evenodd"></path><path fill="#000" fill-rule="evenodd" d="M6.482 6.805h-.074l-.01.046c-.106.475-.216.997-.313 1.472-.111.522-.3 1.435-.406 1.966h.775c.078-.355.185-.867.258-1.218l.028-.106c.032 0 .679.004.937 0l.01-.056c.045-.184.078-.35.124-.558h-.928c.046-.222.097-.637.139-.84l.013-.079h.984s.009-.023.013-.05c.047-.18.088-.374.13-.554v-.033H6.49l-.01.01Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--postFinance"><path fill="#FC0" fill-rule="evenodd" d="M2 14h12V2H2v12Z" clip-rule="evenodd"></path><path fill="red" fill-rule="evenodd" d="M11.23 6.8c.13-.688.291-1.348.416-2.017-.037-.005-.055-.014-.074-.014H9.006c-.083 0-.106.037-.125.116L8.355 7.34c-.004.032-.023.102-.023.102h.683c.014-.056.286-1.311.411-1.902.028-.134.032-.134.17-.134.36 0 1.168.005 1.224.01l-.434 2.03h2.036c0 .037-.162.785-.227 1.136-.018.106-.069.129-.166.129h-1.768c-.138 0-.138 0-.166.138l-.346 1.616c-.032.156-.032.156-.19.156H8.389c-.213 0-.217 0-.263.208-.033.139-.06.282-.093.434.065 0 1.445.01 2.096.01.138 0 .138 0 .17-.134.084-.379.333-1.551.383-1.773h1.865c.194 0 .166.014.208-.17.157-.725.489-2.304.498-2.387h-2.03l.009-.009Z" clip-rule="evenodd"></path><path fill="#fff" fill-rule="evenodd" d="m2.803 9.666-.341 1.592h4.68l.373-1.592H2.803Z" clip-rule="evenodd"></path><path fill="#000" fill-rule="evenodd" d="M5.812 7.377c-.143-.346-.433-.522-.789-.559-.318-.032-.641-.023-.964-.027h-.296c-.208.964-.554 2.538-.757 3.498h.776c.032-.134.166-.886.193-1.015.019-.083.051-.116.134-.116.162 0 .328 0 .49-.009.489-.032.867-.258 1.112-.683.194-.346.254-.715.101-1.09ZM4.525 8.512c-.125.01-.25 0-.388 0l.203-.978c.014-.065.042-.106.12-.102.11.01.222 0 .332.01.199.018.319.143.333.341.032.41-.194.688-.605.725l.005.004Z" clip-rule="evenodd"></path><path fill="#000" fill-rule="evenodd" d="M6.482 6.805h-.074l-.01.046c-.106.475-.216.997-.313 1.472-.111.522-.3 1.435-.406 1.966h.775c.078-.355.185-.867.258-1.218l.028-.106c.032 0 .679.004.937 0l.01-.056c.045-.184.078-.35.124-.558h-.928c.046-.222.097-.637.139-.84l.013-.079h.984s.009-.023.013-.05c.047-.18.088-.374.13-.554v-.033H6.49l-.01.01Z" clip-rule="evenodd"></path></svg>';
 
 class IconPaymentPostFinance extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPaymentPostFinance extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--postFinance', '', null, 'IconPaymentPostFinance');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--postFinance', '', null, 'IconPaymentPostFinance');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--postFinance');
         this.root.append(svg);
     }

package/dist/IconPaymentSodexo.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--sodexo"><path fill="#fff" d="M14.5 4h-13v8h13V4Z"></path><path fill="#2F3B96" d="m7.724 7.336-.127.603c-.05.248-.201.405-.504.405-.352 0-.445-.214-.36-.512.11-.43.463-.562.99-.496Zm.554-.869-.379.034-.117.587c-.143-.008-.185-.008-.352-.008-.52 0-.983.214-1.1.72-.11.454.15.811.73.811.59 0 .85-.305.942-.728l.276-1.416Zm-4.032.893c-.546-.05-1.015 0-1.025.174-.008.274.899.042.882.538-.026.744-1.293.571-1.604.48l.059-.224c.538.083 1.108.091 1.126-.198.016-.314-.899-.034-.882-.538.016-.373.588-.58 1.52-.446l-.076.214Zm1.471.506a.634.634 0 0 1-.62.504c-.311 0-.446-.175-.37-.504a.644.644 0 0 1 .63-.512c.284-.01.436.196.36.512Zm-.319-.77c-.546 0-.975.306-1.083.77-.11.464.185.77.723.77s.975-.314 1.084-.77c.108-.456-.187-.77-.724-.77Zm6.257 1.53h-.47A8.604 8.604 0 0 1 9.95 7.112h.345c.386.514 1.36 1.514 1.36 1.514Zm.495-3.01.218-.446.059.454.445-.157-.309.389.336.256-.453.042-.016.462-.254-.347-.36.331.134-.462-.428-.058.41-.232-.167-.405.385.173Zm.917 2.25a.644.644 0 0 1-.63.512c-.311 0-.454-.183-.37-.512a.664.664 0 0 1 .64-.522c.292 0 .443.206.36.522Zm-.32-.778c-.554 0-.992.314-1.1.778-.11.462.185.785.739.785s.991-.313 1.1-.785c.109-.472-.185-.778-.74-.778Z"></path><path fill="#EC2024" d="M9.597 8.493c.891-.488 1.663-1.232 2.209-1.877-.395 1.208-1.344 1.869-2.209 1.877Z"></path><path fill="#2F3B96" d="M9.245 7.32c.167 0 .26.058.26.174 0 .306-.613.29-.883.232.101-.25.345-.416.623-.406Zm.63.157c0-.224-.185-.389-.588-.389-.663 0-1.1.422-1.1.95 0 .34.286.621.814.621.21 0 .42-.057.605-.174-.462.05-1.026 0-1.026-.48v-.058c.623.133 1.295-.024 1.295-.47Z"></path><path fill="#E9444E" d="M4.34 9.34v.718c0 .046.01.078.028.096.018.017.049.027.091.027h.265v.185h-.36c-.089 0-.155-.024-.2-.073a.287.287 0 0 1-.069-.205v-.747h.245Z"></path><path fill="#E9444E" d="M4.84 9.618h.238v.467c0 .041.008.07.026.085a.092.092 0 0 0 .059.022c.029 0 .055-.01.078-.029.023-.019.044-.038.063-.057l.034-.034v-.458h.24v.75h-.24v-.132l-.04.043a.445.445 0 0 1-.095.072.269.269 0 0 1-.133.029.25.25 0 0 1-.166-.056c-.043-.037-.065-.102-.065-.198v-.504Z"></path><path fill="#E9444E" d="M5.767 9.618h.24v.134l.041-.043a.399.399 0 0 1 .093-.072.276.276 0 0 1 .135-.029c.066 0 .122.018.166.054.043.037.065.101.065.192v.514h-.24v-.467c0-.042-.007-.07-.025-.085a.092.092 0 0 0-.059-.022c-.029 0-.055.01-.078.028a.448.448 0 0 0-.063.06l-.034.032v.457h-.24v-.753Z"></path><path fill="#E9444E" d="M6.656 9.936c0-.112.04-.194.116-.248a.45.45 0 0 1 .27-.08c.048 0 .098.005.15.014a.48.48 0 0 1 .134.044v.23h-.192v-.09a.236.236 0 0 0-.046-.01c-.016-.002-.03-.004-.045-.004a.151.151 0 0 0-.104.035c-.028.024-.042.061-.042.109v.1c0 .055.014.095.042.12.028.026.068.04.122.04a.669.669 0 0 0 .123-.012c.043-.008.08-.016.116-.026h.011v.173a.963.963 0 0 1-.271.048.48.48 0 0 1-.273-.072c-.072-.048-.108-.13-.108-.243v-.128h-.003Z"></path><path fill="#E9444E" d="M7.472 9.34h.239v.412l.042-.043a.399.399 0 0 1 .093-.072.276.276 0 0 1 .134-.029.25.25 0 0 1 .166.056c.044.037.065.102.065.198v.506h-.239v-.467c0-.042-.008-.07-.026-.085a.092.092 0 0 0-.058-.022c-.03 0-.055.01-.078.028a.448.448 0 0 0-.064.06l-.034.032v.457h-.24v-1.03Z"></path><path fill="#E9444E" d="M8.769 9.34h.414c.122 0 .215.03.275.089.06.057.09.147.09.269 0 .12-.034.214-.1.281-.067.067-.163.101-.286.101h-.15v.288H8.77V9.341Zm.242.554h.114c.071 0 .118-.017.143-.05a.25.25 0 0 0 .035-.148c0-.062-.013-.107-.039-.133-.026-.025-.071-.038-.135-.038h-.118v.37Z"></path><path fill="#E9444E" d="M9.64 10.003a.34.34 0 0 1 .131-.28.457.457 0 0 1 .296-.104h.33v.749h-.239v-.118l-.058.044a.494.494 0 0 1-.101.061.319.319 0 0 1-.13.024.235.235 0 0 1-.163-.06c-.044-.04-.066-.106-.066-.197v-.119Zm.516.079v-.288h-.066a.212.212 0 0 0-.151.056.19.19 0 0 0-.06.147v.088c0 .043.008.072.025.086a.094.094 0 0 0 .062.023c.03 0 .057-.01.086-.03l.07-.054.034-.028Z"></path><path fill="#E9444E" d="M10.555 10.173h.01c.038.008.082.014.13.019.046.005.087.008.121.008.03 0 .062-.003.098-.011.035-.008.052-.024.052-.05 0-.017-.012-.032-.033-.041a.326.326 0 0 0-.063-.021l-.117-.026a.31.31 0 0 1-.146-.07c-.036-.034-.054-.08-.054-.143a.18.18 0 0 1 .117-.179.645.645 0 0 1 .257-.051 1.144 1.144 0 0 1 .243.027v.173h-.011c-.034-.005-.07-.011-.109-.014a.957.957 0 0 0-.12-.007.31.31 0 0 0-.086.011c-.028.008-.042.024-.042.048 0 .018.01.03.029.039.02.006.039.013.058.017l.101.024c.059.012.11.034.156.066.045.032.068.083.068.154 0 .096-.042.16-.127.19a.755.755 0 0 1-.27.046 1.048 1.048 0 0 1-.262-.022v-.187Z"></path><path fill="#E9444E" d="M11.32 10.173h.011c.038.008.082.014.129.019.047.005.087.008.121.008.03 0 .062-.003.098-.011.036-.008.052-.024.052-.05 0-.017-.011-.032-.033-.041a.324.324 0 0 0-.063-.021l-.117-.026a.31.31 0 0 1-.146-.07c-.036-.034-.054-.08-.054-.143a.18.18 0 0 1 .117-.179.644.644 0 0 1 .257-.051 1.143 1.143 0 0 1 .244.027v.173h-.012c-.034-.005-.07-.011-.108-.014a.957.957 0 0 0-.12-.007.311.311 0 0 0-.087.011c-.027.008-.042.024-.042.048 0 .018.01.03.03.039.019.006.038.013.058.017l.1.024c.059.012.11.034.156.066s.069.083.069.154c0 .096-.043.16-.127.19a.755.755 0 0 1-.271.046 1.05 1.05 0 0 1-.262-.022v-.187Z"></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--sodexo"><path fill="#fff" d="M14.5 4h-13v8h13V4Z"></path><path fill="#2F3B96" d="m7.724 7.336-.127.603c-.05.248-.201.405-.504.405-.352 0-.445-.214-.36-.512.11-.43.463-.562.99-.496Zm.554-.869-.379.034-.117.587c-.143-.008-.185-.008-.352-.008-.52 0-.983.214-1.1.72-.11.454.15.811.73.811.59 0 .85-.305.942-.728l.276-1.416Zm-4.032.893c-.546-.05-1.015 0-1.025.174-.008.274.899.042.882.538-.026.744-1.293.571-1.604.48l.059-.224c.538.083 1.108.091 1.126-.198.016-.314-.899-.034-.882-.538.016-.373.588-.58 1.52-.446l-.076.214Zm1.471.506a.634.634 0 0 1-.62.504c-.311 0-.446-.175-.37-.504a.644.644 0 0 1 .63-.512c.284-.01.436.196.36.512Zm-.319-.77c-.546 0-.975.306-1.083.77-.11.464.185.77.723.77s.975-.314 1.084-.77c.108-.456-.187-.77-.724-.77Zm6.257 1.53h-.47A8.604 8.604 0 0 1 9.95 7.112h.345c.386.514 1.36 1.514 1.36 1.514Zm.495-3.01.218-.446.059.454.445-.157-.309.389.336.256-.453.042-.016.462-.254-.347-.36.331.134-.462-.428-.058.41-.232-.167-.405.385.173Zm.917 2.25a.644.644 0 0 1-.63.512c-.311 0-.454-.183-.37-.512a.664.664 0 0 1 .64-.522c.292 0 .443.206.36.522Zm-.32-.778c-.554 0-.992.314-1.1.778-.11.462.185.785.739.785s.991-.313 1.1-.785c.109-.472-.185-.778-.74-.778Z"></path><path fill="#EC2024" d="M9.597 8.493c.891-.488 1.663-1.232 2.209-1.877-.395 1.208-1.344 1.869-2.209 1.877Z"></path><path fill="#2F3B96" d="M9.245 7.32c.167 0 .26.058.26.174 0 .306-.613.29-.883.232.101-.25.345-.416.623-.406Zm.63.157c0-.224-.185-.389-.588-.389-.663 0-1.1.422-1.1.95 0 .34.286.621.814.621.21 0 .42-.057.605-.174-.462.05-1.026 0-1.026-.48v-.058c.623.133 1.295-.024 1.295-.47Z"></path><path fill="#E9444E" d="M4.34 9.34v.718c0 .046.01.078.028.096.018.017.049.027.091.027h.265v.185h-.36c-.089 0-.155-.024-.2-.073a.287.287 0 0 1-.069-.205v-.747h.245Z"></path><path fill="#E9444E" d="M4.84 9.618h.238v.467c0 .041.008.07.026.085a.092.092 0 0 0 .059.022c.029 0 .055-.01.078-.029.023-.019.044-.038.063-.057l.034-.034v-.458h.24v.75h-.24v-.132l-.04.043a.445.445 0 0 1-.095.072.269.269 0 0 1-.133.029.25.25 0 0 1-.166-.056c-.043-.037-.065-.102-.065-.198v-.504Z"></path><path fill="#E9444E" d="M5.767 9.618h.24v.134l.041-.043a.399.399 0 0 1 .093-.072.276.276 0 0 1 .135-.029c.066 0 .122.018.166.054.043.037.065.101.065.192v.514h-.24v-.467c0-.042-.007-.07-.025-.085a.092.092 0 0 0-.059-.022c-.029 0-.055.01-.078.028a.448.448 0 0 0-.063.06l-.034.032v.457h-.24v-.753Z"></path><path fill="#E9444E" d="M6.656 9.936c0-.112.04-.194.116-.248a.45.45 0 0 1 .27-.08c.048 0 .098.005.15.014a.48.48 0 0 1 .134.044v.23h-.192v-.09a.236.236 0 0 0-.046-.01c-.016-.002-.03-.004-.045-.004a.151.151 0 0 0-.104.035c-.028.024-.042.061-.042.109v.1c0 .055.014.095.042.12.028.026.068.04.122.04a.669.669 0 0 0 .123-.012c.043-.008.08-.016.116-.026h.011v.173a.963.963 0 0 1-.271.048.48.48 0 0 1-.273-.072c-.072-.048-.108-.13-.108-.243v-.128h-.003Z"></path><path fill="#E9444E" d="M7.472 9.34h.239v.412l.042-.043a.399.399 0 0 1 .093-.072.276.276 0 0 1 .134-.029.25.25 0 0 1 .166.056c.044.037.065.102.065.198v.506h-.239v-.467c0-.042-.008-.07-.026-.085a.092.092 0 0 0-.058-.022c-.03 0-.055.01-.078.028a.448.448 0 0 0-.064.06l-.034.032v.457h-.24v-1.03Z"></path><path fill="#E9444E" d="M8.769 9.34h.414c.122 0 .215.03.275.089.06.057.09.147.09.269 0 .12-.034.214-.1.281-.067.067-.163.101-.286.101h-.15v.288H8.77V9.341Zm.242.554h.114c.071 0 .118-.017.143-.05a.25.25 0 0 0 .035-.148c0-.062-.013-.107-.039-.133-.026-.025-.071-.038-.135-.038h-.118v.37Z"></path><path fill="#E9444E" d="M9.64 10.003a.34.34 0 0 1 .131-.28.457.457 0 0 1 .296-.104h.33v.749h-.239v-.118l-.058.044a.494.494 0 0 1-.101.061.319.319 0 0 1-.13.024.235.235 0 0 1-.163-.06c-.044-.04-.066-.106-.066-.197v-.119Zm.516.079v-.288h-.066a.212.212 0 0 0-.151.056.19.19 0 0 0-.06.147v.088c0 .043.008.072.025.086a.094.094 0 0 0 .062.023c.03 0 .057-.01.086-.03l.07-.054.034-.028Z"></path><path fill="#E9444E" d="M10.555 10.173h.01c.038.008.082.014.13.019.046.005.087.008.121.008.03 0 .062-.003.098-.011.035-.008.052-.024.052-.05 0-.017-.012-.032-.033-.041a.326.326 0 0 0-.063-.021l-.117-.026a.31.31 0 0 1-.146-.07c-.036-.034-.054-.08-.054-.143a.18.18 0 0 1 .117-.179.645.645 0 0 1 .257-.051 1.144 1.144 0 0 1 .243.027v.173h-.011c-.034-.005-.07-.011-.109-.014a.957.957 0 0 0-.12-.007.31.31 0 0 0-.086.011c-.028.008-.042.024-.042.048 0 .018.01.03.029.039.02.006.039.013.058.017l.101.024c.059.012.11.034.156.066.045.032.068.083.068.154 0 .096-.042.16-.127.19a.755.755 0 0 1-.27.046 1.048 1.048 0 0 1-.262-.022v-.187Z"></path><path fill="#E9444E" d="M11.32 10.173h.011c.038.008.082.014.129.019.047.005.087.008.121.008.03 0 .062-.003.098-.011.036-.008.052-.024.052-.05 0-.017-.011-.032-.033-.041a.324.324 0 0 0-.063-.021l-.117-.026a.31.31 0 0 1-.146-.07c-.036-.034-.054-.08-.054-.143a.18.18 0 0 1 .117-.179.644.644 0 0 1 .257-.051 1.143 1.143 0 0 1 .244.027v.173h-.012c-.034-.005-.07-.011-.108-.014a.957.957 0 0 0-.12-.007.311.311 0 0 0-.087.011c-.027.008-.042.024-.042.048 0 .018.01.03.03.039.019.006.038.013.058.017l.1.024c.059.012.11.034.156.066s.069.083.069.154c0 .096-.043.16-.127.19a.755.755 0 0 1-.271.046 1.05 1.05 0 0 1-.262-.022v-.187Z"></path></svg>';
 
 class IconPaymentSodexo extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPaymentSodexo extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sodexo', '', null, 'IconPaymentSodexo');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sodexo', '', null, 'IconPaymentSodexo');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sodexo');
         this.root.append(svg);
     }

package/dist/IconPaymentSofort.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--sofort"><path fill="#EF809F" d="M13.889 12.375H2.11a.676.676 0 0 1-.674-.682V4.308c0-.377.307-.683.683-.683h11.76c.376 0 .682.306.682.683v7.385a.682.682 0 0 1-.673.682Z"></path><path fill="#fff" d="M5.375 11.447c.298 0 .525-.2.525-.49 0-.27-.193-.385-.429-.455-.149-.043-.245-.078-.245-.183 0-.088.061-.158.167-.158.087 0 .148.053.2.132l.246-.158a.47.47 0 0 0-.438-.254c-.297 0-.49.21-.49.464 0 .201.123.35.412.438.157.043.262.078.262.2 0 .123-.088.193-.21.193-.131 0-.236-.087-.298-.166l-.2.201a.617.617 0 0 0 .498.245m1.199 0a.566.566 0 0 1-.569-.56c0-.306.254-.56.569-.56.315 0 .569.254.569.56 0 .306-.254.56-.57.56Zm0-.28a.275.275 0 0 0 .271-.28.275.275 0 0 0-.271-.28.275.275 0 0 0-.271.28c0 .158.122.28.27.28Zm1.304-.997v-.28h-.044c-.359 0-.543.245-.543.525v1.006h.298v-.438c0-.148.113-.253.28-.253v-.28a.383.383 0 0 0-.28.105v-.114c0-.184.122-.271.288-.262m.648 1.277a.566.566 0 0 1-.569-.56c0-.306.254-.56.569-.56.315 0 .569.254.569.56 0 .306-.254.56-.569.56Zm0-.28a.27.27 0 0 0 .271-.28.275.275 0 0 0-.271-.28.275.275 0 0 0-.271.28c0 .158.122.28.271.28Zm1.024-.683v-.122H9.26v1.059h.297v-.482c0-.175.105-.27.28-.27v-.316c-.13 0-.227.044-.288.14m.761.394v-.262a.37.37 0 0 0 .28.104v-.28c-.158 0-.28-.113-.28-.253v-.167h-.298v.875c0 .28.175.525.543.525h.044v-.28c-.167 0-.289-.078-.289-.262Zm.639.56a.204.204 0 0 0 .201-.201.198.198 0 0 0-.201-.201.198.198 0 0 0-.201.2c0 .114.087.202.2.202Z"></path><path fill="#fff" d="M7.527 7.694a.227.227 0 0 1 0 .332l-.017.018a.227.227 0 0 1-.332 0l-.526-.517c-.148-.148-.166-.323-.07-.42L6.6 7.09a.215.215 0 0 1 .289-.018c.043.035.096.027.131-.017s.026-.096-.017-.131a.404.404 0 0 0-.543.035l-.018.017c-.166.175-.14.473.08.683l.524.525a.436.436 0 0 0 .604 0l.018-.018a.434.434 0 0 0 0-.595.095.095 0 0 0-.132 0 .095.095 0 0 0 0 .131m-.315-2.817.219 1.768c0 .052.052.087.105.078.053 0 .088-.052.079-.105L7.405 4.85c-.035-.157.052-.324.175-.35.07-.018.14 0 .201.035a.253.253 0 0 1 .114.166l.376 1.602c.009.052.061.078.114.07.053-.01.079-.062.07-.114l-.376-1.593a.502.502 0 0 0-.193-.288.428.428 0 0 0-.341-.062c-.228.053-.385.315-.324.56"></path><path fill="#fff" d="m9.19 6.95.429-2.118a.45.45 0 0 0-.315-.524.468.468 0 0 0-.569.332l-.473 1.61c-.017.053.018.105.062.114.043.008.105-.018.114-.061l.472-1.61a.287.287 0 0 1 .341-.202c.123.035.202.167.175.307l-.428 2.117c-.01.053.026.105.07.114.052 0 .104-.026.113-.079M8.114 8.989c-.674 0-1.234-.49-1.234-1.199a.097.097 0 0 0-.096-.096.097.097 0 0 0-.096.096c0 .814.656 1.382 1.426 1.382a.097.097 0 0 0 .096-.096.097.097 0 0 0-.096-.096M7.78 7.326a.236.236 0 0 1-.096.131h-.017c-.106.088-.254.062-.333-.052l-.411-.612c-.114-.176-.097-.35.008-.43l.018-.017c.14-.079.254-.017.376.158l.342.516s.087.053.13.026c.045-.026.053-.087.027-.131l-.341-.516c-.175-.245-.385-.359-.639-.21l-.026.017c-.202.14-.228.438-.061.683l.41.612a.423.423 0 0 0 .587.114l.018-.018a.421.421 0 0 0 .166-.236.088.088 0 0 0-.07-.114c-.053-.017-.096.018-.114.07"></path><path fill="#fff" d="M8.411 7.65c-.192.114-.315.315-.332.63 0 .053.035.096.087.096.053 0 .096-.035.096-.087.018-.28.123-.438.298-.499a.673.673 0 0 1 .289-.035h.026c.123.026.158-.157.035-.184l-.726-.166c-.341-.096-.394-.219-.333-.429.027-.087.079-.14.167-.157a.586.586 0 0 1 .175 0h.034l1.103.253h.018s.034.027.052.044c.07.079.114.228.096.473-.07.857-.472 1.391-1.417 1.382a.097.097 0 0 0-.097.097c0 .052.044.096.097.096 1.067 0 1.531-.613 1.61-1.558.026-.297-.027-.498-.14-.612a.31.31 0 0 0-.184-.105l-1.094-.254s-.026 0-.052-.009a.62.62 0 0 0-.254 0 .384.384 0 0 0-.306.289c-.088.306 0 .542.464.665l.262.061.026.009Z"></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--sofort"><path fill="#EF809F" d="M13.889 12.375H2.11a.676.676 0 0 1-.674-.682V4.308c0-.377.307-.683.683-.683h11.76c.376 0 .682.306.682.683v7.385a.682.682 0 0 1-.673.682Z"></path><path fill="#fff" d="M5.375 11.447c.298 0 .525-.2.525-.49 0-.27-.193-.385-.429-.455-.149-.043-.245-.078-.245-.183 0-.088.061-.158.167-.158.087 0 .148.053.2.132l.246-.158a.47.47 0 0 0-.438-.254c-.297 0-.49.21-.49.464 0 .201.123.35.412.438.157.043.262.078.262.2 0 .123-.088.193-.21.193-.131 0-.236-.087-.298-.166l-.2.201a.617.617 0 0 0 .498.245m1.199 0a.566.566 0 0 1-.569-.56c0-.306.254-.56.569-.56.315 0 .569.254.569.56 0 .306-.254.56-.57.56Zm0-.28a.275.275 0 0 0 .271-.28.275.275 0 0 0-.271-.28.275.275 0 0 0-.271.28c0 .158.122.28.27.28Zm1.304-.997v-.28h-.044c-.359 0-.543.245-.543.525v1.006h.298v-.438c0-.148.113-.253.28-.253v-.28a.383.383 0 0 0-.28.105v-.114c0-.184.122-.271.288-.262m.648 1.277a.566.566 0 0 1-.569-.56c0-.306.254-.56.569-.56.315 0 .569.254.569.56 0 .306-.254.56-.569.56Zm0-.28a.27.27 0 0 0 .271-.28.275.275 0 0 0-.271-.28.275.275 0 0 0-.271.28c0 .158.122.28.271.28Zm1.024-.683v-.122H9.26v1.059h.297v-.482c0-.175.105-.27.28-.27v-.316c-.13 0-.227.044-.288.14m.761.394v-.262a.37.37 0 0 0 .28.104v-.28c-.158 0-.28-.113-.28-.253v-.167h-.298v.875c0 .28.175.525.543.525h.044v-.28c-.167 0-.289-.078-.289-.262Zm.639.56a.204.204 0 0 0 .201-.201.198.198 0 0 0-.201-.201.198.198 0 0 0-.201.2c0 .114.087.202.2.202Z"></path><path fill="#fff" d="M7.527 7.694a.227.227 0 0 1 0 .332l-.017.018a.227.227 0 0 1-.332 0l-.526-.517c-.148-.148-.166-.323-.07-.42L6.6 7.09a.215.215 0 0 1 .289-.018c.043.035.096.027.131-.017s.026-.096-.017-.131a.404.404 0 0 0-.543.035l-.018.017c-.166.175-.14.473.08.683l.524.525a.436.436 0 0 0 .604 0l.018-.018a.434.434 0 0 0 0-.595.095.095 0 0 0-.132 0 .095.095 0 0 0 0 .131m-.315-2.817.219 1.768c0 .052.052.087.105.078.053 0 .088-.052.079-.105L7.405 4.85c-.035-.157.052-.324.175-.35.07-.018.14 0 .201.035a.253.253 0 0 1 .114.166l.376 1.602c.009.052.061.078.114.07.053-.01.079-.062.07-.114l-.376-1.593a.502.502 0 0 0-.193-.288.428.428 0 0 0-.341-.062c-.228.053-.385.315-.324.56"></path><path fill="#fff" d="m9.19 6.95.429-2.118a.45.45 0 0 0-.315-.524.468.468 0 0 0-.569.332l-.473 1.61c-.017.053.018.105.062.114.043.008.105-.018.114-.061l.472-1.61a.287.287 0 0 1 .341-.202c.123.035.202.167.175.307l-.428 2.117c-.01.053.026.105.07.114.052 0 .104-.026.113-.079M8.114 8.989c-.674 0-1.234-.49-1.234-1.199a.097.097 0 0 0-.096-.096.097.097 0 0 0-.096.096c0 .814.656 1.382 1.426 1.382a.097.097 0 0 0 .096-.096.097.097 0 0 0-.096-.096M7.78 7.326a.236.236 0 0 1-.096.131h-.017c-.106.088-.254.062-.333-.052l-.411-.612c-.114-.176-.097-.35.008-.43l.018-.017c.14-.079.254-.017.376.158l.342.516s.087.053.13.026c.045-.026.053-.087.027-.131l-.341-.516c-.175-.245-.385-.359-.639-.21l-.026.017c-.202.14-.228.438-.061.683l.41.612a.423.423 0 0 0 .587.114l.018-.018a.421.421 0 0 0 .166-.236.088.088 0 0 0-.07-.114c-.053-.017-.096.018-.114.07"></path><path fill="#fff" d="M8.411 7.65c-.192.114-.315.315-.332.63 0 .053.035.096.087.096.053 0 .096-.035.096-.087.018-.28.123-.438.298-.499a.673.673 0 0 1 .289-.035h.026c.123.026.158-.157.035-.184l-.726-.166c-.341-.096-.394-.219-.333-.429.027-.087.079-.14.167-.157a.586.586 0 0 1 .175 0h.034l1.103.253h.018s.034.027.052.044c.07.079.114.228.096.473-.07.857-.472 1.391-1.417 1.382a.097.097 0 0 0-.097.097c0 .052.044.096.097.096 1.067 0 1.531-.613 1.61-1.558.026-.297-.027-.498-.14-.612a.31.31 0 0 0-.184-.105l-1.094-.254s-.026 0-.052-.009a.62.62 0 0 0-.254 0 .384.384 0 0 0-.306.289c-.088.306 0 .542.464.665l.262.061.026.009Z"></path></svg>';
 
 class IconPaymentSofort extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPaymentSofort extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sofort', '', null, 'IconPaymentSofort');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--sofort', '', null, 'IconPaymentSofort');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--sofort');
         this.root.append(svg);
     }

package/dist/IconPaymentTwint.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--twint"><rect width="12" height="12" x="2" y="2" fill="#000"></rect><path fill="#fff" d="M12.75 10.077h-1.713v.412h.615v1.76h.485v-1.76h.613v-.412Zm-7.784 0H3.25v.412h.615v1.76h.485v-1.76h.616v-.412Zm4.96-.068c-.54 0-.84.346-.84.848v1.393h.48v-1.404c0-.218.128-.386.365-.386s.363.2.363.386v1.404h.48v-1.393c.002-.502-.308-.848-.848-.848Zm-1.81.068v2.173h.48v-2.173h-.48Zm-1.627.86.015.098.452 1.215h.195l.613-2.173h-.472L7 11.219l-.018.123-.024-.123-.391-1.142H6.41l-.39 1.142-.024.123-.016-.123-.292-1.142h-.474l.612 2.173h.196l.451-1.215.016-.097Z"></path><path fill="#fff" d="M10.355 7.616a.238.238 0 0 1-.109.186L8.152 9.02a.24.24 0 0 1-.217 0L5.84 7.802a.237.237 0 0 1-.108-.186V5.18c0-.069.048-.152.108-.186l2.095-1.218a.24.24 0 0 1 .217 0l2.095 1.218c.06.034.108.117.108.186v2.436Z"></path><path fill="url(#prefix__paint0_radial_3973_4725)" d="m9.136 6.404-.548.807-.28-.431.323-.485a.638.638 0 0 0 .04-.65.67.67 0 0 0-1.219 0 .627.627 0 0 0 .037.641s.18.264.329.488l.242.354.366.563c.003.002.06.091.162.091.097 0 .157-.089.166-.097L9.61 6.41h-.474v-.006Zm-1.076.02s-.142-.218-.237-.37a.272.272 0 0 1 .237-.409c.226 0 .337.245.237.408-.091.153-.237.37-.237.37Z"></path><path fill="url(#prefix__paint1_radial_3973_4725)" d="m7.535 7.185-.537-.758s-.142-.219-.236-.37a.272.272 0 0 1 .316-.397l.189-.348A.68.68 0 0 0 7 5.255a.674.674 0 0 0-.61.39.627.627 0 0 0 .037.641l.939 1.399c.008.011.068.1.168.1s.157-.086.166-.097l.282-.434-.242-.359-.206.29Z"></path><defs><radialGradient id="prefix__paint0_radial_3973_4725" cx="0" cy="0" r="1" gradientTransform="matrix(10.7623 0 0 9.6294 5.383 4.495)" gradientUnits="userSpaceOnUse"><stop stop-color="#FC0"></stop><stop offset=".092" stop-color="#FFC800"></stop><stop offset=".174" stop-color="#FFBD00"></stop><stop offset=".253" stop-color="#FFAB00"></stop><stop offset=".33" stop-color="#FF9100"></stop><stop offset=".405" stop-color="#FF7000"></stop><stop offset=".479" stop-color="#FF4700"></stop><stop offset=".55" stop-color="#FF1800"></stop><stop offset=".582" stop-color="red"></stop><stop offset="1" stop-color="red"></stop></radialGradient><radialGradient id="prefix__paint1_radial_3973_4725" cx="0" cy="0" r="1" gradientTransform="matrix(2.31436 0 0 3.52162 6.36 5.622)" gradientUnits="userSpaceOnUse"><stop stop-color="#00B4E6"></stop><stop offset=".201" stop-color="#00B0E3"></stop><stop offset=".39" stop-color="#01A5DB"></stop><stop offset=".574" stop-color="#0292CD"></stop><stop offset=".755" stop-color="#0377BA"></stop><stop offset=".932" stop-color="#0455A1"></stop><stop offset="1" stop-color="#054696"></stop></radialGradient></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--twint"><rect width="12" height="12" x="2" y="2" fill="#000"></rect><path fill="#fff" d="M12.75 10.077h-1.713v.412h.615v1.76h.485v-1.76h.613v-.412Zm-7.784 0H3.25v.412h.615v1.76h.485v-1.76h.616v-.412Zm4.96-.068c-.54 0-.84.346-.84.848v1.393h.48v-1.404c0-.218.128-.386.365-.386s.363.2.363.386v1.404h.48v-1.393c.002-.502-.308-.848-.848-.848Zm-1.81.068v2.173h.48v-2.173h-.48Zm-1.627.86.015.098.452 1.215h.195l.613-2.173h-.472L7 11.219l-.018.123-.024-.123-.391-1.142H6.41l-.39 1.142-.024.123-.016-.123-.292-1.142h-.474l.612 2.173h.196l.451-1.215.016-.097Z"></path><path fill="#fff" d="M10.355 7.616a.238.238 0 0 1-.109.186L8.152 9.02a.24.24 0 0 1-.217 0L5.84 7.802a.237.237 0 0 1-.108-.186V5.18c0-.069.048-.152.108-.186l2.095-1.218a.24.24 0 0 1 .217 0l2.095 1.218c.06.034.108.117.108.186v2.436Z"></path><path fill="url(#prefix__paint0_radial_3973_4725)" d="m9.136 6.404-.548.807-.28-.431.323-.485a.638.638 0 0 0 .04-.65.67.67 0 0 0-1.219 0 .627.627 0 0 0 .037.641s.18.264.329.488l.242.354.366.563c.003.002.06.091.162.091.097 0 .157-.089.166-.097L9.61 6.41h-.474v-.006Zm-1.076.02s-.142-.218-.237-.37a.272.272 0 0 1 .237-.409c.226 0 .337.245.237.408-.091.153-.237.37-.237.37Z"></path><path fill="url(#prefix__paint1_radial_3973_4725)" d="m7.535 7.185-.537-.758s-.142-.219-.236-.37a.272.272 0 0 1 .316-.397l.189-.348A.68.68 0 0 0 7 5.255a.674.674 0 0 0-.61.39.627.627 0 0 0 .037.641l.939 1.399c.008.011.068.1.168.1s.157-.086.166-.097l.282-.434-.242-.359-.206.29Z"></path><defs><radialGradient id="prefix__paint0_radial_3973_4725" cx="0" cy="0" r="1" gradientTransform="matrix(10.7623 0 0 9.6294 5.383 4.495)" gradientUnits="userSpaceOnUse"><stop stop-color="#FC0"></stop><stop offset=".092" stop-color="#FFC800"></stop><stop offset=".174" stop-color="#FFBD00"></stop><stop offset=".253" stop-color="#FFAB00"></stop><stop offset=".33" stop-color="#FF9100"></stop><stop offset=".405" stop-color="#FF7000"></stop><stop offset=".479" stop-color="#FF4700"></stop><stop offset=".55" stop-color="#FF1800"></stop><stop offset=".582" stop-color="red"></stop><stop offset="1" stop-color="red"></stop></radialGradient><radialGradient id="prefix__paint1_radial_3973_4725" cx="0" cy="0" r="1" gradientTransform="matrix(2.31436 0 0 3.52162 6.36 5.622)" gradientUnits="userSpaceOnUse"><stop stop-color="#00B4E6"></stop><stop offset=".201" stop-color="#00B0E3"></stop><stop offset=".39" stop-color="#01A5DB"></stop><stop offset=".574" stop-color="#0292CD"></stop><stop offset=".755" stop-color="#0377BA"></stop><stop offset=".932" stop-color="#0455A1"></stop><stop offset="1" stop-color="#054696"></stop></radialGradient></defs></svg>';
 
 class IconPaymentTwint extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPaymentTwint extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--twint', '', null, 'IconPaymentTwint');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--twint', '', null, 'IconPaymentTwint');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--twint');
         this.root.append(svg);
     }

package/dist/IconPaymentVvv.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--vvv"><g clip-path="url(#prefix__clip0_3973_5794)"><mask id="prefix__mask0_3973_5794" width="12" height="12" x="2" y="2" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#fff" d="M12.373 2H3.627C2.728 2 2 2.728 2 3.627v8.746C2 13.272 2.728 14 3.627 14h8.746c.899 0 1.627-.728 1.627-1.627V3.627C14 2.728 13.272 2 12.373 2Z"></path></mask><g mask="url(#prefix__mask0_3973_5794)"><path fill="url(#prefix__paint0_linear_3973_5794)" d="M-2.625.982h20.676V15.32H-2.625V.982Z"></path></g><mask id="prefix__mask1_3973_5794" width="12" height="12" x="2" y="2" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#fff" d="M12.373 2H3.627C2.728 2 2 2.728 2 3.627v8.746C2 13.272 2.728 14 3.627 14h8.746c.899 0 1.627-.728 1.627-1.627V3.627C14 2.728 13.272 2 12.373 2Z"></path></mask><g mask="url(#prefix__mask1_3973_5794)"><path fill="url(#prefix__paint1_linear_3973_5794)" d="m25.997 1.343-8.161 14.135a2.551 2.551 0 0 1-4.42 0L7.813 5.776l2.567-4.433h15.618Z"></path></g><mask id="prefix__mask2_3973_5794" width="12" height="12" x="2" y="2" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#fff" d="M12.373 2H3.627C2.728 2 2 2.728 2 3.627v8.746C2 13.272 2.728 14 3.627 14h8.746c.899 0 1.627-.728 1.627-1.627V3.627C14 2.728 13.272 2 12.373 2Z"></path></mask><g mask="url(#prefix__mask2_3973_5794)"><path fill="url(#prefix__paint2_linear_3973_5794)" d="M10.38 1.343 7.811 5.776 5.257 1.343h5.122Z"></path></g><mask id="prefix__mask3_3973_5794" width="12" height="12" x="2" y="2" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#fff" d="M12.373 2H3.627C2.728 2 2 2.728 2 3.627v8.746C2 13.272 2.728 14 3.627 14h8.746c.899 0 1.627-.728 1.627-1.627V3.627C14 2.728 13.272 2 12.373 2Z"></path></mask><g mask="url(#prefix__mask3_3973_5794)"><path fill="url(#prefix__paint3_linear_3973_5794)" d="m5.257 1.343 2.555 4.433-2.562 4.431a2.336 2.336 0 0 1-4.045 0l-5.118-8.864h9.17Z"></path></g><mask id="prefix__mask4_3973_5794" width="12" height="12" x="2" y="2" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#fff" d="M12.373 2H3.627C2.728 2 2 2.728 2 3.627v8.746C2 13.272 2.728 14 3.627 14h8.746c.899 0 1.627-.728 1.627-1.627V3.627C14 2.728 13.272 2 12.373 2Z"></path></mask><g mask="url(#prefix__mask4_3973_5794)"><path fill="url(#prefix__paint4_linear_3973_5794)" d="M2.506 22.3h10.486a1.536 1.536 0 0 0 1.33-2.304l-5.242-9.08a1.536 1.536 0 0 0-2.662 0l-5.242 9.08a1.536 1.536 0 0 0 1.33 2.305Z"></path></g><mask id="prefix__mask5_3973_5794" width="12" height="12" x="2" y="2" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#fff" d="M12.373 2H3.627C2.728 2 2 2.728 2 3.627v8.746C2 13.272 2.728 14 3.627 14h8.746c.899 0 1.627-.728 1.627-1.627V3.627C14 2.728 13.272 2 12.373 2Z"></path></mask><g mask="url(#prefix__mask5_3973_5794)"><path fill="url(#prefix__paint5_linear_3973_5794)" d="M-11.597 22.656H1.676a1.945 1.945 0 0 0 1.684-2.918L-3.276 8.244a1.945 1.945 0 0 0-3.369 0l-6.636 11.494a1.945 1.945 0 0 0 1.684 2.918Z"></path></g><path fill="#fff" d="M11.485 4.086H4.1a1.082 1.082 0 0 0-.937 1.623l3.692 6.395a1.082 1.082 0 0 0 1.874 0l3.692-6.395a1.082 1.082 0 0 0-.937-1.623Z"></path><path fill="#273680" d="M11.832 5.42c-.457.793-.915 1.585-1.373 2.375a.435.435 0 0 1-.765-.007L8.336 5.422a.437.437 0 1 1 .754-.442c.32.552.635 1.105.953 1.658l.038.062.33-.57c.223-.383.442-.766.665-1.146a.436.436 0 1 1 .756.436ZM9.553 9.36c-.296.517-.596 1.033-.894 1.55l-.474.818c-.193.333-.6.335-.792.002-.45-.782-.898-1.564-1.346-2.347a.438.438 0 0 1 .048-.528.418.418 0 0 1 .504-.099c.078.04.144.098.19.171.32.544.632 1.092.946 1.638l.056.095.269-.463c.242-.417.482-.836.726-1.252A.434.434 0 0 1 9.5 8.87c.12.136.14.331.053.49ZM5.113 7.81 4.3 6.391c-.181-.315-.364-.63-.543-.946a.436.436 0 1 1 .752-.443c.318.55.635 1.102.951 1.653l.043.073.485-.838c.172-.298.343-.597.518-.894a.437.437 0 1 1 .752.445l-1.26 2.18c-.039.064-.075.13-.114.195a.437.437 0 0 1-.77-.005Z"></path></g><defs><linearGradient id="prefix__paint0_linear_3973_5794" x1="11.78" x2="-3.5" y1="7.753" y2="10.867" gradientUnits="userSpaceOnUse"><stop offset=".002" stop-color="#81CFF4"></stop><stop offset=".467" stop-color="#0998D5"></stop><stop offset="1" stop-color="#273680"></stop></linearGradient><linearGradient id="prefix__paint1_linear_3973_5794" x1="15.307" x2="18.027" y1=".484" y2="7.569" gradientUnits="userSpaceOnUse"><stop stop-color="#0998D5"></stop><stop offset="1" stop-color="#273680"></stop></linearGradient><linearGradient id="prefix__paint2_linear_3973_5794" x1="8.626" x2="8.049" y1="5.158" y2="1.485" gradientUnits="userSpaceOnUse"><stop stop-color="#E20E7E"></stop><stop offset=".005" stop-color="#E20E7E"></stop><stop offset="1" stop-color="#6E237F"></stop></linearGradient><linearGradient id="prefix__paint3_linear_3973_5794" x1="5.148" x2="1.466" y1="8.922" y2=".644" gradientUnits="userSpaceOnUse"><stop stop-color="#FABE03"></stop><stop offset=".47" stop-color="#EE8906"></stop><stop offset="1" stop-color="#E64516"></stop></linearGradient><linearGradient id="prefix__paint4_linear_3973_5794" x1="501.324" x2="585.581" y1="1233.94" y2="1796.99" gradientUnits="userSpaceOnUse"><stop stop-color="#97C02B"></stop><stop offset=".998" stop-color="#06863B"></stop><stop offset="1" stop-color="#06863B"></stop></linearGradient><linearGradient id="prefix__paint5_linear_3973_5794" x1=".015" x2="-1.568" y1="12.849" y2="15.362" gradientUnits="userSpaceOnUse"><stop stop-color="#EE8906"></stop><stop offset="1" stop-color="#E64516"></stop></linearGradient><clipPath id="prefix__clip0_3973_5794"><rect width="12" height="12" fill="#fff" 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 16 16" class="c-pieIcon c-pieIcon--vvv"><g clip-path="url(#prefix__clip0_3973_5794)"><mask id="prefix__mask0_3973_5794" width="12" height="12" x="2" y="2" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#fff" d="M12.373 2H3.627C2.728 2 2 2.728 2 3.627v8.746C2 13.272 2.728 14 3.627 14h8.746c.899 0 1.627-.728 1.627-1.627V3.627C14 2.728 13.272 2 12.373 2Z"></path></mask><g mask="url(#prefix__mask0_3973_5794)"><path fill="url(#prefix__paint0_linear_3973_5794)" d="M-2.625.982h20.676V15.32H-2.625V.982Z"></path></g><mask id="prefix__mask1_3973_5794" width="12" height="12" x="2" y="2" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#fff" d="M12.373 2H3.627C2.728 2 2 2.728 2 3.627v8.746C2 13.272 2.728 14 3.627 14h8.746c.899 0 1.627-.728 1.627-1.627V3.627C14 2.728 13.272 2 12.373 2Z"></path></mask><g mask="url(#prefix__mask1_3973_5794)"><path fill="url(#prefix__paint1_linear_3973_5794)" d="m25.997 1.343-8.161 14.135a2.551 2.551 0 0 1-4.42 0L7.813 5.776l2.567-4.433h15.618Z"></path></g><mask id="prefix__mask2_3973_5794" width="12" height="12" x="2" y="2" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#fff" d="M12.373 2H3.627C2.728 2 2 2.728 2 3.627v8.746C2 13.272 2.728 14 3.627 14h8.746c.899 0 1.627-.728 1.627-1.627V3.627C14 2.728 13.272 2 12.373 2Z"></path></mask><g mask="url(#prefix__mask2_3973_5794)"><path fill="url(#prefix__paint2_linear_3973_5794)" d="M10.38 1.343 7.811 5.776 5.257 1.343h5.122Z"></path></g><mask id="prefix__mask3_3973_5794" width="12" height="12" x="2" y="2" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#fff" d="M12.373 2H3.627C2.728 2 2 2.728 2 3.627v8.746C2 13.272 2.728 14 3.627 14h8.746c.899 0 1.627-.728 1.627-1.627V3.627C14 2.728 13.272 2 12.373 2Z"></path></mask><g mask="url(#prefix__mask3_3973_5794)"><path fill="url(#prefix__paint3_linear_3973_5794)" d="m5.257 1.343 2.555 4.433-2.562 4.431a2.336 2.336 0 0 1-4.045 0l-5.118-8.864h9.17Z"></path></g><mask id="prefix__mask4_3973_5794" width="12" height="12" x="2" y="2" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#fff" d="M12.373 2H3.627C2.728 2 2 2.728 2 3.627v8.746C2 13.272 2.728 14 3.627 14h8.746c.899 0 1.627-.728 1.627-1.627V3.627C14 2.728 13.272 2 12.373 2Z"></path></mask><g mask="url(#prefix__mask4_3973_5794)"><path fill="url(#prefix__paint4_linear_3973_5794)" d="M2.506 22.3h10.486a1.536 1.536 0 0 0 1.33-2.304l-5.242-9.08a1.536 1.536 0 0 0-2.662 0l-5.242 9.08a1.536 1.536 0 0 0 1.33 2.305Z"></path></g><mask id="prefix__mask5_3973_5794" width="12" height="12" x="2" y="2" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#fff" d="M12.373 2H3.627C2.728 2 2 2.728 2 3.627v8.746C2 13.272 2.728 14 3.627 14h8.746c.899 0 1.627-.728 1.627-1.627V3.627C14 2.728 13.272 2 12.373 2Z"></path></mask><g mask="url(#prefix__mask5_3973_5794)"><path fill="url(#prefix__paint5_linear_3973_5794)" d="M-11.597 22.656H1.676a1.945 1.945 0 0 0 1.684-2.918L-3.276 8.244a1.945 1.945 0 0 0-3.369 0l-6.636 11.494a1.945 1.945 0 0 0 1.684 2.918Z"></path></g><path fill="#fff" d="M11.485 4.086H4.1a1.082 1.082 0 0 0-.937 1.623l3.692 6.395a1.082 1.082 0 0 0 1.874 0l3.692-6.395a1.082 1.082 0 0 0-.937-1.623Z"></path><path fill="#273680" d="M11.832 5.42c-.457.793-.915 1.585-1.373 2.375a.435.435 0 0 1-.765-.007L8.336 5.422a.437.437 0 1 1 .754-.442c.32.552.635 1.105.953 1.658l.038.062.33-.57c.223-.383.442-.766.665-1.146a.436.436 0 1 1 .756.436ZM9.553 9.36c-.296.517-.596 1.033-.894 1.55l-.474.818c-.193.333-.6.335-.792.002-.45-.782-.898-1.564-1.346-2.347a.438.438 0 0 1 .048-.528.418.418 0 0 1 .504-.099c.078.04.144.098.19.171.32.544.632 1.092.946 1.638l.056.095.269-.463c.242-.417.482-.836.726-1.252A.434.434 0 0 1 9.5 8.87c.12.136.14.331.053.49ZM5.113 7.81 4.3 6.391c-.181-.315-.364-.63-.543-.946a.436.436 0 1 1 .752-.443c.318.55.635 1.102.951 1.653l.043.073.485-.838c.172-.298.343-.597.518-.894a.437.437 0 1 1 .752.445l-1.26 2.18c-.039.064-.075.13-.114.195a.437.437 0 0 1-.77-.005Z"></path></g><defs><linearGradient id="prefix__paint0_linear_3973_5794" x1="11.78" x2="-3.5" y1="7.753" y2="10.867" gradientUnits="userSpaceOnUse"><stop offset=".002" stop-color="#81CFF4"></stop><stop offset=".467" stop-color="#0998D5"></stop><stop offset="1" stop-color="#273680"></stop></linearGradient><linearGradient id="prefix__paint1_linear_3973_5794" x1="15.307" x2="18.027" y1=".484" y2="7.569" gradientUnits="userSpaceOnUse"><stop stop-color="#0998D5"></stop><stop offset="1" stop-color="#273680"></stop></linearGradient><linearGradient id="prefix__paint2_linear_3973_5794" x1="8.626" x2="8.049" y1="5.158" y2="1.485" gradientUnits="userSpaceOnUse"><stop stop-color="#E20E7E"></stop><stop offset=".005" stop-color="#E20E7E"></stop><stop offset="1" stop-color="#6E237F"></stop></linearGradient><linearGradient id="prefix__paint3_linear_3973_5794" x1="5.148" x2="1.466" y1="8.922" y2=".644" gradientUnits="userSpaceOnUse"><stop stop-color="#FABE03"></stop><stop offset=".47" stop-color="#EE8906"></stop><stop offset="1" stop-color="#E64516"></stop></linearGradient><linearGradient id="prefix__paint4_linear_3973_5794" x1="501.324" x2="585.581" y1="1233.94" y2="1796.99" gradientUnits="userSpaceOnUse"><stop stop-color="#97C02B"></stop><stop offset=".998" stop-color="#06863B"></stop><stop offset="1" stop-color="#06863B"></stop></linearGradient><linearGradient id="prefix__paint5_linear_3973_5794" x1=".015" x2="-1.568" y1="12.849" y2="15.362" gradientUnits="userSpaceOnUse"><stop stop-color="#EE8906"></stop><stop offset="1" stop-color="#E64516"></stop></linearGradient><clipPath id="prefix__clip0_3973_5794"><rect width="12" height="12" fill="#fff" transform="translate(2 2)"></rect></clipPath></defs></svg>';
 
 class IconPaymentVvv extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPaymentVvv extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--vvv', '', null, 'IconPaymentVvv');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--vvv', '', null, 'IconPaymentVvv');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--vvv');
         this.root.append(svg);
     }

package/dist/IconPeanuts.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--peanuts"><path d="M10.345 4.5a.438.438 0 1 0 0-.875.438.438 0 0 0 0 .875Z"></path><path d="M11.063 6.25a.438.438 0 1 0 0-.875.438.438 0 0 0 0 .875Z"></path><path d="M9.313 6.128a.437.437 0 1 0 0-.875.437.437 0 0 0 0 .875Z"></path><path d="M5.585 14.781h-.499a4.375 4.375 0 0 1-3.211-2.091A4.323 4.323 0 0 1 1.945 8a4.375 4.375 0 0 1 2.73-1.829A2.161 2.161 0 0 0 6.311 4.57c.035-.164.082-.325.14-.481a4.279 4.279 0 0 1 7.473-1.155 4.375 4.375 0 0 1 .411 4.559 3.719 3.719 0 0 1-1.33 1.522 4.996 4.996 0 0 1-1.566.683A2.424 2.424 0 0 0 9.75 11.5a4.375 4.375 0 0 1-4.2 3.246l.035.035Zm4.891-12.25a2.824 2.824 0 0 0-.464 0 3.01 3.01 0 0 0-2.423 2.31 3.5 3.5 0 0 1-2.625 2.625 3.027 3.027 0 0 0-2.437 2.905A3.01 3.01 0 0 0 2.969 12a3.045 3.045 0 0 0 4.76.577c.377-.377.646-.848.779-1.365a3.71 3.71 0 0 1 2.625-2.791 3.745 3.745 0 0 0 1.163-.507 2.45 2.45 0 0 0 .875-.972 3.08 3.08 0 0 0-.271-3.22 3.01 3.01 0 0 0-2.424-1.19Z"></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--peanuts"><path d="M10.345 4.5a.438.438 0 1 0 0-.875.438.438 0 0 0 0 .875Z"></path><path d="M11.063 6.25a.438.438 0 1 0 0-.875.438.438 0 0 0 0 .875Z"></path><path d="M9.313 6.128a.437.437 0 1 0 0-.875.437.437 0 0 0 0 .875Z"></path><path d="M5.585 14.781h-.499a4.375 4.375 0 0 1-3.211-2.091A4.323 4.323 0 0 1 1.945 8a4.375 4.375 0 0 1 2.73-1.829A2.161 2.161 0 0 0 6.311 4.57c.035-.164.082-.325.14-.481a4.279 4.279 0 0 1 7.473-1.155 4.375 4.375 0 0 1 .411 4.559 3.719 3.719 0 0 1-1.33 1.522 4.996 4.996 0 0 1-1.566.683A2.424 2.424 0 0 0 9.75 11.5a4.375 4.375 0 0 1-4.2 3.246l.035.035Zm4.891-12.25a2.824 2.824 0 0 0-.464 0 3.01 3.01 0 0 0-2.423 2.31 3.5 3.5 0 0 1-2.625 2.625 3.027 3.027 0 0 0-2.437 2.905A3.01 3.01 0 0 0 2.969 12a3.045 3.045 0 0 0 4.76.577c.377-.377.646-.848.779-1.365a3.71 3.71 0 0 1 2.625-2.791 3.745 3.745 0 0 0 1.163-.507 2.45 2.45 0 0 0 .875-.972 3.08 3.08 0 0 0-.271-3.22 3.01 3.01 0 0 0-2.424-1.19Z"></path></svg>';
 
 class IconPeanuts extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPeanuts extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--peanuts', '', null, 'IconPeanuts');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--peanuts', '', null, 'IconPeanuts');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--peanuts');
         this.root.append(svg);
     }

package/dist/IconPeanutsLarge.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--peanutsLarge"><path d="M11.852 27.375c-.27 0-.55 0-.83-.044a7.271 7.271 0 0 1-5.347-3.456 7.193 7.193 0 0 1 .149-7.726 7.192 7.192 0 0 1 4.524-3.037 3.947 3.947 0 0 0 3.027-2.94c.064-.27.143-.535.236-.796A7.105 7.105 0 0 1 25.957 7.46a7.307 7.307 0 0 1 .683 7.56 6.125 6.125 0 0 1-2.196 2.511 8.46 8.46 0 0 1-2.625 1.129 4.375 4.375 0 0 0-3.028 3.343 7.202 7.202 0 0 1-7 5.372h.061ZM7.25 17.155A5.425 5.425 0 0 0 7.162 23a5.469 5.469 0 0 0 8.55 1.041 5.433 5.433 0 0 0 1.408-2.459 6.125 6.125 0 0 1 4.314-4.602 6.712 6.712 0 0 0 2.056-.875 4.375 4.375 0 0 0 1.558-1.75 5.513 5.513 0 0 0-.49-5.775 5.347 5.347 0 0 0-9.328 1.382 3.974 3.974 0 0 0-.184.604 5.73 5.73 0 0 1-4.375 4.261 5.434 5.434 0 0 0-3.421 2.328Z"></path><path d="M21.25 9.875a.875.875 0 1 0 0-1.75.875.875 0 0 0 0 1.75Z"></path><path d="M22.125 13.375a.875.875 0 1 0 0-1.75.875.875 0 0 0 0 1.75Z"></path><path d="M18.625 12.5a.875.875 0 1 0 0-1.75.875.875 0 0 0 0 1.75Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--peanutsLarge"><path d="M11.852 27.375c-.27 0-.55 0-.83-.044a7.271 7.271 0 0 1-5.347-3.456 7.193 7.193 0 0 1 .149-7.726 7.192 7.192 0 0 1 4.524-3.037 3.947 3.947 0 0 0 3.027-2.94c.064-.27.143-.535.236-.796A7.105 7.105 0 0 1 25.957 7.46a7.307 7.307 0 0 1 .683 7.56 6.125 6.125 0 0 1-2.196 2.511 8.46 8.46 0 0 1-2.625 1.129 4.375 4.375 0 0 0-3.028 3.343 7.202 7.202 0 0 1-7 5.372h.061ZM7.25 17.155A5.425 5.425 0 0 0 7.162 23a5.469 5.469 0 0 0 8.55 1.041 5.433 5.433 0 0 0 1.408-2.459 6.125 6.125 0 0 1 4.314-4.602 6.712 6.712 0 0 0 2.056-.875 4.375 4.375 0 0 0 1.558-1.75 5.513 5.513 0 0 0-.49-5.775 5.347 5.347 0 0 0-9.328 1.382 3.974 3.974 0 0 0-.184.604 5.73 5.73 0 0 1-4.375 4.261 5.434 5.434 0 0 0-3.421 2.328Z"></path><path d="M21.25 9.875a.875.875 0 1 0 0-1.75.875.875 0 0 0 0 1.75Z"></path><path d="M22.125 13.375a.875.875 0 1 0 0-1.75.875.875 0 0 0 0 1.75Z"></path><path d="M18.625 12.5a.875.875 0 1 0 0-1.75.875.875 0 0 0 0 1.75Z"></path></svg>';
 
 class IconPeanutsLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPeanutsLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--peanutsLarge', '', null, 'IconPeanutsLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--peanutsLarge', '', null, 'IconPeanutsLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--peanutsLarge');
         this.root.append(svg);
     }

package/dist/IconPercentage.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--percentage"><g clip-path="url(#prefix__clip0_15_528)"><path d="M10.835 2.75 3.58 13.25h1.593l7.262-10.5h-1.601Z"></path><path d="M12.375 7.869a2.625 2.625 0 0 0-2.625 2.756 2.625 2.625 0 0 0 5.25 0 2.625 2.625 0 0 0-2.625-2.756Zm0 4.2a1.313 1.313 0 0 1-1.348-1.444 1.313 1.313 0 0 1 2.625 0 1.313 1.313 0 0 1-1.277 1.444Z"></path><path d="M6.197 5.375a2.625 2.625 0 0 0-2.572-2.756A2.625 2.625 0 0 0 1 5.375a2.625 2.625 0 0 0 2.625 2.756 2.625 2.625 0 0 0 2.572-2.756Zm-3.92 0a1.313 1.313 0 1 1 2.625 0 1.313 1.313 0 0 1-2.625 0Z"></path></g><defs><clipPath id="prefix__clip0_15_528"><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--percentage"><g clip-path="url(#prefix__clip0_15_528)"><path d="M10.835 2.75 3.58 13.25h1.593l7.262-10.5h-1.601Z"></path><path d="M12.375 7.869a2.625 2.625 0 0 0-2.625 2.756 2.625 2.625 0 0 0 5.25 0 2.625 2.625 0 0 0-2.625-2.756Zm0 4.2a1.313 1.313 0 0 1-1.348-1.444 1.313 1.313 0 0 1 2.625 0 1.313 1.313 0 0 1-1.277 1.444Z"></path><path d="M6.197 5.375a2.625 2.625 0 0 0-2.572-2.756A2.625 2.625 0 0 0 1 5.375a2.625 2.625 0 0 0 2.625 2.756 2.625 2.625 0 0 0 2.572-2.756Zm-3.92 0a1.313 1.313 0 1 1 2.625 0 1.313 1.313 0 0 1-2.625 0Z"></path></g><defs><clipPath id="prefix__clip0_15_528"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconPercentage extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPercentage extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--percentage', '', null, 'IconPercentage');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--percentage', '', null, 'IconPercentage');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--percentage');
         this.root.append(svg);
     }

package/dist/IconPercentageLarge.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--percentageLarge"><path d="M23 16c-3.001 0-4.375 2.494-4.375 4.813 0 2.318 1.374 4.812 4.375 4.812s4.375-2.494 4.375-4.813C27.375 18.494 26.01 16 23 16Zm0 7.875c-2.555 0-2.625-2.747-2.625-3.063 0-.315.07-3.062 2.625-3.062s2.625 2.747 2.625 3.063c0 .315-.07 3.062-2.625 3.062Z"></path><path d="M22.16 6.375 7.766 25.625h2.188l14.393-19.25H22.16Z"></path><path d="M9 16c3.01 0 4.375-2.494 4.375-4.813 0-2.318-1.365-4.812-4.375-4.812s-4.375 2.494-4.375 4.813C4.625 13.505 5.999 16 9 16Zm0-7.875c2.555 0 2.625 2.748 2.625 3.063 0 .314-.07 3.062-2.625 3.062s-2.625-2.748-2.625-3.063c0-.314.07-3.062 2.625-3.062Z"></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--percentageLarge"><path d="M23 16c-3.001 0-4.375 2.494-4.375 4.813 0 2.318 1.374 4.812 4.375 4.812s4.375-2.494 4.375-4.813C27.375 18.494 26.01 16 23 16Zm0 7.875c-2.555 0-2.625-2.747-2.625-3.063 0-.315.07-3.062 2.625-3.062s2.625 2.747 2.625 3.063c0 .315-.07 3.062-2.625 3.062Z"></path><path d="M22.16 6.375 7.766 25.625h2.188l14.393-19.25H22.16Z"></path><path d="M9 16c3.01 0 4.375-2.494 4.375-4.813 0-2.318-1.365-4.812-4.375-4.812s-4.375 2.494-4.375 4.813C4.625 13.505 5.999 16 9 16Zm0-7.875c2.555 0 2.625 2.748 2.625 3.063 0 .314-.07 3.062-2.625 3.062s-2.625-2.748-2.625-3.063c0-.314.07-3.062 2.625-3.062Z"></path></svg>';
 
 class IconPercentageLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPercentageLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--percentageLarge', '', null, 'IconPercentageLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--percentageLarge', '', null, 'IconPercentageLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--percentageLarge');
         this.root.append(svg);
     }

package/dist/IconPetSupplies.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--petSupplies"><path d="M5.637 8.787c0 .307-.2.552-.446.552-.245 0-.446-.245-.446-.552 0-.306.201-.55.446-.55s.446.244.446.55Z"></path><path d="M7.055 10.432v.018h-.018a.124.124 0 0 1 .018.053.758.758 0 0 1 .052.28.881.881 0 0 1-1.373.735.881.881 0 0 1-1.374-.735c0-.097.026-.193.052-.28l.027-.053v-.018c.157-.42.673-.735 1.303-.735.63 0 1.155.316 1.313.736Z"></path><path d="M4.176 10.144c.247 0 .446-.247.446-.552 0-.304-.2-.55-.446-.55s-.446.246-.446.55c0 .305.2.552.446.552Z"></path><path d="M6.784 8.787c0 .307-.202.552-.447.552s-.446-.245-.446-.552c0-.306.201-.55.446-.55s.447.244.447.55Z"></path><path d="M7.352 9.041c-.245 0-.446.245-.446.551 0 .307.201.552.446.552s.447-.245.447-.552c0-.306-.202-.55-.447-.55Z"></path><path fill-rule="evenodd" d="M14.221 8.219a1.665 1.665 0 0 1-1.277.481v.009a2.791 2.791 0 0 1 1.837 2.616c0 1.54-1.251 2.8-2.8 2.8a2.79 2.79 0 0 1-1.872-.726v.726h-8.69V4.692c0-1.146.937-2.082 2.083-2.082h4.524a2.08 2.08 0 0 1 2.083 2.074 1.8 1.8 0 0 1 .253-.324c.64-.639 1.76-.639 2.398 0 .271.271.429.612.472.989.36.043.71.192.99.472a1.706 1.706 0 0 1 0 2.398Zm-3.036-2.59c.131.656-.035 1.268-.455 1.688l-.009-.008-.612.542v1.225l1.137-1.216c.429-.429 1.041-.604 1.698-.473a.38.38 0 0 0 .34-.105.383.383 0 0 0 0-.533.392.392 0 0 0-.533 0 .66.66 0 0 1-.927 0 .66.66 0 0 1 0-.928.375.375 0 0 0 0-.534.392.392 0 0 0-.534 0 .38.38 0 0 0-.105.342ZM8.026 3.922H3.502c-.428 0-.77.35-.77.77v.657h6.064v-.657c0-.428-.35-.77-.77-.77Zm-5.294 2.74v6.15h6.064v-6.15H2.732Zm7.753 4.663a1.486 1.486 0 1 0 2.975 0c0-.823-.665-1.488-1.488-1.488-.822 0-1.487.665-1.487 1.488Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--petSupplies"><path d="M5.637 8.787c0 .307-.2.552-.446.552-.245 0-.446-.245-.446-.552 0-.306.201-.55.446-.55s.446.244.446.55Z"></path><path d="M7.055 10.432v.018h-.018a.124.124 0 0 1 .018.053.758.758 0 0 1 .052.28.881.881 0 0 1-1.373.735.881.881 0 0 1-1.374-.735c0-.097.026-.193.052-.28l.027-.053v-.018c.157-.42.673-.735 1.303-.735.63 0 1.155.316 1.313.736Z"></path><path d="M4.176 10.144c.247 0 .446-.247.446-.552 0-.304-.2-.55-.446-.55s-.446.246-.446.55c0 .305.2.552.446.552Z"></path><path d="M6.784 8.787c0 .307-.202.552-.447.552s-.446-.245-.446-.552c0-.306.201-.55.446-.55s.447.244.447.55Z"></path><path d="M7.352 9.041c-.245 0-.446.245-.446.551 0 .307.201.552.446.552s.447-.245.447-.552c0-.306-.202-.55-.447-.55Z"></path><path fill-rule="evenodd" d="M14.221 8.219a1.665 1.665 0 0 1-1.277.481v.009a2.791 2.791 0 0 1 1.837 2.616c0 1.54-1.251 2.8-2.8 2.8a2.79 2.79 0 0 1-1.872-.726v.726h-8.69V4.692c0-1.146.937-2.082 2.083-2.082h4.524a2.08 2.08 0 0 1 2.083 2.074 1.8 1.8 0 0 1 .253-.324c.64-.639 1.76-.639 2.398 0 .271.271.429.612.472.989.36.043.71.192.99.472a1.706 1.706 0 0 1 0 2.398Zm-3.036-2.59c.131.656-.035 1.268-.455 1.688l-.009-.008-.612.542v1.225l1.137-1.216c.429-.429 1.041-.604 1.698-.473a.38.38 0 0 0 .34-.105.383.383 0 0 0 0-.533.392.392 0 0 0-.533 0 .66.66 0 0 1-.927 0 .66.66 0 0 1 0-.928.375.375 0 0 0 0-.534.392.392 0 0 0-.534 0 .38.38 0 0 0-.105.342ZM8.026 3.922H3.502c-.428 0-.77.35-.77.77v.657h6.064v-.657c0-.428-.35-.77-.77-.77Zm-5.294 2.74v6.15h6.064v-6.15H2.732Zm7.753 4.663a1.486 1.486 0 1 0 2.975 0c0-.823-.665-1.488-1.488-1.488-.822 0-1.487.665-1.487 1.488Z" clip-rule="evenodd"></path></svg>';
 
 class IconPetSupplies extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPetSupplies extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--petSupplies', '', null, 'IconPetSupplies');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--petSupplies', '', null, 'IconPetSupplies');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--petSupplies');
         this.root.append(svg);
     }

package/dist/IconPetSuppliesLarge.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--petSuppliesLarge"><path d="M11.713 16.49c0 .525-.35.954-.78.954-.428 0-.778-.429-.778-.954 0-.525.35-.954.779-.954.429 0 .779.429.779.954Z"></path><path d="M14.171 19.351v.027l-.008.008.011.036c.008.02.015.038.015.06.052.15.087.307.087.482a1.533 1.533 0 0 1-2.389 1.269 1.533 1.533 0 0 1-2.389-1.269c0-.175.036-.333.088-.49l.027-.088.017-.035c.271-.735 1.181-1.277 2.266-1.277s1.995.542 2.275 1.277Z"></path><path d="M9.936 17.872c0-.524-.35-.953-.779-.953-.428 0-.778.428-.778.953 0 .526.35.954.778.954.43 0 .78-.428.78-.954Z"></path><path d="M13.699 16.49c0 .525-.35.954-.779.954-.429 0-.779-.429-.779-.954 0-.525.35-.954.78-.954.428 0 .778.429.778.954Z"></path><path d="M14.696 16.91c-.428 0-.778.429-.778.954 0 .525.35.953.778.953.429 0 .779-.428.779-.953 0-.525-.35-.954-.779-.954Z"></path><path fill-rule="evenodd" d="m23.271 17.829-.315.332v.009c2.442.105 4.402 2.039 4.402 4.585a4.617 4.617 0 0 1-4.612 4.611c-1.426 0-2.677-.656-3.526-1.671v1.671H4.634V10.488a2.633 2.633 0 0 1 2.625-2.626h9.354a2.633 2.633 0 0 1 2.625 2.626v4.007l.42-.367c.262-.272.227-.744.174-.998a2.577 2.577 0 0 1 .71-2.328 2.588 2.588 0 0 1 3.665 0c.464.473.71 1.077.744 1.69a2.57 2.57 0 0 1 1.689.743 2.588 2.588 0 0 1 0 3.666 2.6 2.6 0 0 1-2.328.709c-.262-.052-.735-.087-1.04.219Zm-1.732-5.04c.201 1.015-.062 1.969-.7 2.607v.018l-1.61 1.409v2.773l2.791-2.975c.656-.665 1.61-.918 2.625-.726.28.053.56-.035.761-.236a.845.845 0 0 0 0-1.199.845.845 0 0 0-1.198 0 .871.871 0 1 1-1.234-1.234.845.845 0 0 0 0-1.199.845.845 0 0 0-1.199 0 .847.847 0 0 0-.236.762Zm-4.944-3.185H7.259a.878.878 0 0 0-.875.875v.761H17.47v-.761a.878.878 0 0 0-.875-.875ZM6.384 12.999v12.617H17.47V13H6.384Zm16.362 6.886a2.868 2.868 0 0 0-2.861 2.861h-.009c0 1.05.578 1.96 1.418 2.459.113-1.032.665-2.065 1.549-2.826.7-.604 1.522-.98 2.345-1.094a2.849 2.849 0 0 0-2.442-1.4Zm.271 5.661v.035l-.008.009a2.839 2.839 0 0 0 2.555-2.573c-.525.035-1.103.272-1.584.692-.586.507-.963 1.216-.963 1.837Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--petSuppliesLarge"><path d="M11.713 16.49c0 .525-.35.954-.78.954-.428 0-.778-.429-.778-.954 0-.525.35-.954.779-.954.429 0 .779.429.779.954Z"></path><path d="M14.171 19.351v.027l-.008.008.011.036c.008.02.015.038.015.06.052.15.087.307.087.482a1.533 1.533 0 0 1-2.389 1.269 1.533 1.533 0 0 1-2.389-1.269c0-.175.036-.333.088-.49l.027-.088.017-.035c.271-.735 1.181-1.277 2.266-1.277s1.995.542 2.275 1.277Z"></path><path d="M9.936 17.872c0-.524-.35-.953-.779-.953-.428 0-.778.428-.778.953 0 .526.35.954.778.954.43 0 .78-.428.78-.954Z"></path><path d="M13.699 16.49c0 .525-.35.954-.779.954-.429 0-.779-.429-.779-.954 0-.525.35-.954.78-.954.428 0 .778.429.778.954Z"></path><path d="M14.696 16.91c-.428 0-.778.429-.778.954 0 .525.35.953.778.953.429 0 .779-.428.779-.953 0-.525-.35-.954-.779-.954Z"></path><path fill-rule="evenodd" d="m23.271 17.829-.315.332v.009c2.442.105 4.402 2.039 4.402 4.585a4.617 4.617 0 0 1-4.612 4.611c-1.426 0-2.677-.656-3.526-1.671v1.671H4.634V10.488a2.633 2.633 0 0 1 2.625-2.626h9.354a2.633 2.633 0 0 1 2.625 2.626v4.007l.42-.367c.262-.272.227-.744.174-.998a2.577 2.577 0 0 1 .71-2.328 2.588 2.588 0 0 1 3.665 0c.464.473.71 1.077.744 1.69a2.57 2.57 0 0 1 1.689.743 2.588 2.588 0 0 1 0 3.666 2.6 2.6 0 0 1-2.328.709c-.262-.052-.735-.087-1.04.219Zm-1.732-5.04c.201 1.015-.062 1.969-.7 2.607v.018l-1.61 1.409v2.773l2.791-2.975c.656-.665 1.61-.918 2.625-.726.28.053.56-.035.761-.236a.845.845 0 0 0 0-1.199.845.845 0 0 0-1.198 0 .871.871 0 1 1-1.234-1.234.845.845 0 0 0 0-1.199.845.845 0 0 0-1.199 0 .847.847 0 0 0-.236.762Zm-4.944-3.185H7.259a.878.878 0 0 0-.875.875v.761H17.47v-.761a.878.878 0 0 0-.875-.875ZM6.384 12.999v12.617H17.47V13H6.384Zm16.362 6.886a2.868 2.868 0 0 0-2.861 2.861h-.009c0 1.05.578 1.96 1.418 2.459.113-1.032.665-2.065 1.549-2.826.7-.604 1.522-.98 2.345-1.094a2.849 2.849 0 0 0-2.442-1.4Zm.271 5.661v.035l-.008.009a2.839 2.839 0 0 0 2.555-2.573c-.525.035-1.103.272-1.584.692-.586.507-.963 1.216-.963 1.837Z" clip-rule="evenodd"></path></svg>';
 
 class IconPetSuppliesLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPetSuppliesLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--petSuppliesLarge', '', null, 'IconPetSuppliesLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--petSuppliesLarge', '', null, 'IconPetSuppliesLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--petSuppliesLarge');
         this.root.append(svg);
     }

package/dist/IconPharmacy.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--pharmacy"><path d="M4.842 7.711h1.312v.928h.928V9.95h-.928v.928H4.842V9.95h-.92V8.64h.92V7.71Z"></path><path fill-rule="evenodd" d="m12.892 5.926.113.114 1.47 1.872-.06 4.42c0 .463-.185.91-.526 1.25-.35.35-.814.543-1.304.543H10.31c-.446 0-.875-.166-1.207-.464-.306.289-.691.464-1.103.464H2.995a1.58 1.58 0 0 1-1.163-.516 1.776 1.776 0 0 1-.464-1.339l.472-6.737a1.515 1.515 0 0 1-.55-1.164V4.28c0-.84.682-1.531 1.53-1.531h5.364c.84 0 1.531.683 1.531 1.531v.088c0 .463-.218.884-.55 1.163l.104 1.462.919-1.033c.026-.026.079-.07.079-.07v-1.26h2.625v1.295Zm-1.313.726a.542.542 0 0 0-.411.175V6.82L9.794 8.367v.342h3.36V8.35l-1.181-1.505a.506.506 0 0 0-.394-.192ZM2.82 4.063a.217.217 0 0 0-.218.22v.087c0 .122.096.219.218.219h5.364a.217.217 0 0 0 .219-.22v-.087a.217.217 0 0 0-.219-.218H2.82ZM8 12.805a.297.297 0 0 0 .21-.097v.01a.485.485 0 0 0 .114-.35l-.446-6.423H3.127l-.447 6.422a.485.485 0 0 0 .114.35.293.293 0 0 0 .21.088H8Zm4.585 0c.15 0 .28-.053.377-.149h-.01a.478.478 0 0 0 .14-.332l.036-2.293H9.794v2.284c0 .131.053.254.14.341a.508.508 0 0 0 .376.149h2.275Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--pharmacy"><path d="M4.842 7.711h1.312v.928h.928V9.95h-.928v.928H4.842V9.95h-.92V8.64h.92V7.71Z"></path><path fill-rule="evenodd" d="m12.892 5.926.113.114 1.47 1.872-.06 4.42c0 .463-.185.91-.526 1.25-.35.35-.814.543-1.304.543H10.31c-.446 0-.875-.166-1.207-.464-.306.289-.691.464-1.103.464H2.995a1.58 1.58 0 0 1-1.163-.516 1.776 1.776 0 0 1-.464-1.339l.472-6.737a1.515 1.515 0 0 1-.55-1.164V4.28c0-.84.682-1.531 1.53-1.531h5.364c.84 0 1.531.683 1.531 1.531v.088c0 .463-.218.884-.55 1.163l.104 1.462.919-1.033c.026-.026.079-.07.079-.07v-1.26h2.625v1.295Zm-1.313.726a.542.542 0 0 0-.411.175V6.82L9.794 8.367v.342h3.36V8.35l-1.181-1.505a.506.506 0 0 0-.394-.192ZM2.82 4.063a.217.217 0 0 0-.218.22v.087c0 .122.096.219.218.219h5.364a.217.217 0 0 0 .219-.22v-.087a.217.217 0 0 0-.219-.218H2.82ZM8 12.805a.297.297 0 0 0 .21-.097v.01a.485.485 0 0 0 .114-.35l-.446-6.423H3.127l-.447 6.422a.485.485 0 0 0 .114.35.293.293 0 0 0 .21.088H8Zm4.585 0c.15 0 .28-.053.377-.149h-.01a.478.478 0 0 0 .14-.332l.036-2.293H9.794v2.284c0 .131.053.254.14.341a.508.508 0 0 0 .376.149h2.275Z" clip-rule="evenodd"></path></svg>';
 
 class IconPharmacy extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPharmacy extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pharmacy', '', null, 'IconPharmacy');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pharmacy', '', null, 'IconPharmacy');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pharmacy');
         this.root.append(svg);
     }