@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/dist/IconOfferLarge.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--offerLarge"><path d="M22.125 5.211c.113-.169.242-.327.385-.472a3.369 3.369 0 0 1 4.76 0l1.242-1.234a5.136 5.136 0 0 0-7.245 0c-.43.44-.78.953-1.032 1.514l-4.156-.394a2.31 2.31 0 0 0-1.83.656L2.692 16.796l11.944 13.125 12.092-12.127a2.336 2.336 0 0 0 .648-1.873L26.369 5.64l-4.244-.429Zm3.377 11.375L14.696 27.375l-9.625-10.5L15.44 6.515a.586.586 0 0 1 .472-.14l3.877.385a5.25 5.25 0 0 0 .472 2.573A1.75 1.75 0 1 0 23 10.75a1.75 1.75 0 0 0-.516-1.242 3.35 3.35 0 0 1-.972-2.625l3.238.367.875 8.864a.577.577 0 0 1-.14.446l.017.026Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--offerLarge"><path d="M22.125 5.211c.113-.169.242-.327.385-.472a3.369 3.369 0 0 1 4.76 0l1.242-1.234a5.136 5.136 0 0 0-7.245 0c-.43.44-.78.953-1.032 1.514l-4.156-.394a2.31 2.31 0 0 0-1.83.656L2.692 16.796l11.944 13.125 12.092-12.127a2.336 2.336 0 0 0 .648-1.873L26.369 5.64l-4.244-.429Zm3.377 11.375L14.696 27.375l-9.625-10.5L15.44 6.515a.586.586 0 0 1 .472-.14l3.877.385a5.25 5.25 0 0 0 .472 2.573A1.75 1.75 0 1 0 23 10.75a1.75 1.75 0 0 0-.516-1.242 3.35 3.35 0 0 1-.972-2.625l3.238.367.875 8.864a.577.577 0 0 1-.14.446l.017.026Z"></path></svg>';
 
 class IconOfferLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconOfferLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--offerLarge', '', null, 'IconOfferLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--offerLarge', '', null, 'IconOfferLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--offerLarge');
         this.root.append(svg);
     }

package/dist/IconOfferStar.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--offerStar"><path d="M13.871 6.355a2.456 2.456 0 0 1-.472-.586c-.07-.26-.1-.528-.088-.796a2.467 2.467 0 0 0-.516-1.75 2.467 2.467 0 0 0-1.75-.517 2.626 2.626 0 0 1-.796-.087 2.283 2.283 0 0 1-.578-.473A2.45 2.45 0 0 0 8 1.22a2.45 2.45 0 0 0-1.654.875c-.165.188-.36.347-.577.472-.26.07-.528.1-.796.088a2.415 2.415 0 0 0-1.75.516 2.467 2.467 0 0 0-.517 1.75c.012.268-.018.537-.087.796a2.459 2.459 0 0 1-.473.587A2.415 2.415 0 0 0 1.22 8a2.415 2.415 0 0 0 .875 1.645c.186.17.346.368.472.586.07.26.1.528.088.796a2.467 2.467 0 0 0 .516 1.75c.496.39 1.122.575 1.75.517.268-.012.537.018.796.087.217.125.412.285.578.473a2.45 2.45 0 0 0 1.654.875 2.45 2.45 0 0 0 1.653-.875c.166-.188.36-.348.578-.473.26-.07.528-.099.796-.087a2.415 2.415 0 0 0 1.75-.517c.39-.495.574-1.122.516-1.75a2.621 2.621 0 0 1 .088-.796c.126-.218.286-.416.472-.586A2.415 2.415 0 0 0 14.676 8a2.415 2.415 0 0 0-.805-1.645Zm-.936 2.38a3.37 3.37 0 0 0-.753 1.015A3.503 3.503 0 0 0 12 11.019a1.89 1.89 0 0 1-.132.875 1.89 1.89 0 0 1-.875.131c-.43-.017-.86.045-1.268.184a3.367 3.367 0 0 0-.998.752c-.245.236-.551.534-.735.534-.183 0-.49-.297-.735-.534a3.368 3.368 0 0 0-1.006-.779A3.503 3.503 0 0 0 4.981 12a1.89 1.89 0 0 1-.875-.132 1.89 1.89 0 0 1-.131-.875 3.5 3.5 0 0 0-.158-1.242 3.369 3.369 0 0 0-.752-.998c-.236-.245-.534-.55-.534-.735 0-.183.298-.49.534-.734.314-.294.57-.644.752-1.033a3.5 3.5 0 0 0 .184-1.269 1.89 1.89 0 0 1 .131-.875 1.89 1.89 0 0 1 .876-.131 3.5 3.5 0 0 0 1.242-.158c.377-.186.715-.441.997-.752.245-.236.552-.534.736-.534.183 0 .49.298.734.534.294.314.644.57 1.033.752a3.5 3.5 0 0 0 1.269.184 1.89 1.89 0 0 1 .875.131c.112.278.157.578.131.876a3.5 3.5 0 0 0 .157 1.242c.187.377.442.715.753.997.236.245.534.552.534.736 0 .183-.298.507-.534.752ZM10.73 8A4.821 4.821 0 0 0 8 10.73 4.821 4.821 0 0 0 5.27 8 4.821 4.821 0 0 0 8 5.27 4.821 4.821 0 0 0 10.73 8Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--offerStar"><path d="M13.871 6.355a2.456 2.456 0 0 1-.472-.586c-.07-.26-.1-.528-.088-.796a2.467 2.467 0 0 0-.516-1.75 2.467 2.467 0 0 0-1.75-.517 2.626 2.626 0 0 1-.796-.087 2.283 2.283 0 0 1-.578-.473A2.45 2.45 0 0 0 8 1.22a2.45 2.45 0 0 0-1.654.875c-.165.188-.36.347-.577.472-.26.07-.528.1-.796.088a2.415 2.415 0 0 0-1.75.516 2.467 2.467 0 0 0-.517 1.75c.012.268-.018.537-.087.796a2.459 2.459 0 0 1-.473.587A2.415 2.415 0 0 0 1.22 8a2.415 2.415 0 0 0 .875 1.645c.186.17.346.368.472.586.07.26.1.528.088.796a2.467 2.467 0 0 0 .516 1.75c.496.39 1.122.575 1.75.517.268-.012.537.018.796.087.217.125.412.285.578.473a2.45 2.45 0 0 0 1.654.875 2.45 2.45 0 0 0 1.653-.875c.166-.188.36-.348.578-.473.26-.07.528-.099.796-.087a2.415 2.415 0 0 0 1.75-.517c.39-.495.574-1.122.516-1.75a2.621 2.621 0 0 1 .088-.796c.126-.218.286-.416.472-.586A2.415 2.415 0 0 0 14.676 8a2.415 2.415 0 0 0-.805-1.645Zm-.936 2.38a3.37 3.37 0 0 0-.753 1.015A3.503 3.503 0 0 0 12 11.019a1.89 1.89 0 0 1-.132.875 1.89 1.89 0 0 1-.875.131c-.43-.017-.86.045-1.268.184a3.367 3.367 0 0 0-.998.752c-.245.236-.551.534-.735.534-.183 0-.49-.297-.735-.534a3.368 3.368 0 0 0-1.006-.779A3.503 3.503 0 0 0 4.981 12a1.89 1.89 0 0 1-.875-.132 1.89 1.89 0 0 1-.131-.875 3.5 3.5 0 0 0-.158-1.242 3.369 3.369 0 0 0-.752-.998c-.236-.245-.534-.55-.534-.735 0-.183.298-.49.534-.734.314-.294.57-.644.752-1.033a3.5 3.5 0 0 0 .184-1.269 1.89 1.89 0 0 1 .131-.875 1.89 1.89 0 0 1 .876-.131 3.5 3.5 0 0 0 1.242-.158c.377-.186.715-.441.997-.752.245-.236.552-.534.736-.534.183 0 .49.298.734.534.294.314.644.57 1.033.752a3.5 3.5 0 0 0 1.269.184 1.89 1.89 0 0 1 .875.131c.112.278.157.578.131.876a3.5 3.5 0 0 0 .157 1.242c.187.377.442.715.753.997.236.245.534.552.534.736 0 .183-.298.507-.534.752ZM10.73 8A4.821 4.821 0 0 0 8 10.73 4.821 4.821 0 0 0 5.27 8 4.821 4.821 0 0 0 8 5.27 4.821 4.821 0 0 0 10.73 8Z"></path></svg>';
 
 class IconOfferStar extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconOfferStar extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--offerStar', '', null, 'IconOfferStar');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--offerStar', '', null, 'IconOfferStar');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--offerStar');
         this.root.append(svg);
     }

package/dist/IconOfferStarFilled.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--offerStarFilled"><g clip-path="url(#prefix__clip0_7019_3733)"><path fill-rule="evenodd" d="M13.871 6.355a2.456 2.456 0 0 1-.472-.586c-.07-.26-.1-.528-.088-.796a2.467 2.467 0 0 0-.516-1.75 2.467 2.467 0 0 0-1.75-.517 2.626 2.626 0 0 1-.796-.087 2.283 2.283 0 0 1-.578-.473A2.45 2.45 0 0 0 8 1.22a2.45 2.45 0 0 0-1.654.875c-.165.188-.36.347-.577.472-.26.07-.528.1-.796.088a2.415 2.415 0 0 0-1.75.516 2.467 2.467 0 0 0-.517 1.75c.012.268-.018.537-.087.796a2.459 2.459 0 0 1-.473.587A2.415 2.415 0 0 0 1.22 8a2.415 2.415 0 0 0 .875 1.645c.186.17.346.368.472.586.07.26.1.528.088.796a2.467 2.467 0 0 0 .516 1.75c.496.39 1.122.575 1.75.517.268-.012.537.018.796.087.217.125.412.285.578.473a2.45 2.45 0 0 0 1.654.875 2.45 2.45 0 0 0 1.653-.875c.166-.188.36-.348.578-.473.26-.07.528-.099.796-.087a2.415 2.415 0 0 0 1.75-.517c.39-.495.574-1.122.516-1.75a2.621 2.621 0 0 1 .088-.796c.126-.218.286-.416.472-.586A2.415 2.415 0 0 0 14.676 8a2.415 2.415 0 0 0-.805-1.645ZM10.73 8A4.821 4.821 0 0 0 8 10.73 4.821 4.821 0 0 0 5.27 8 4.821 4.821 0 0 0 8 5.27 4.821 4.821 0 0 0 10.73 8Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_7019_3733"><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--offerStarFilled"><g clip-path="url(#prefix__clip0_7019_3733)"><path fill-rule="evenodd" d="M13.871 6.355a2.456 2.456 0 0 1-.472-.586c-.07-.26-.1-.528-.088-.796a2.467 2.467 0 0 0-.516-1.75 2.467 2.467 0 0 0-1.75-.517 2.626 2.626 0 0 1-.796-.087 2.283 2.283 0 0 1-.578-.473A2.45 2.45 0 0 0 8 1.22a2.45 2.45 0 0 0-1.654.875c-.165.188-.36.347-.577.472-.26.07-.528.1-.796.088a2.415 2.415 0 0 0-1.75.516 2.467 2.467 0 0 0-.517 1.75c.012.268-.018.537-.087.796a2.459 2.459 0 0 1-.473.587A2.415 2.415 0 0 0 1.22 8a2.415 2.415 0 0 0 .875 1.645c.186.17.346.368.472.586.07.26.1.528.088.796a2.467 2.467 0 0 0 .516 1.75c.496.39 1.122.575 1.75.517.268-.012.537.018.796.087.217.125.412.285.578.473a2.45 2.45 0 0 0 1.654.875 2.45 2.45 0 0 0 1.653-.875c.166-.188.36-.348.578-.473.26-.07.528-.099.796-.087a2.415 2.415 0 0 0 1.75-.517c.39-.495.574-1.122.516-1.75a2.621 2.621 0 0 1 .088-.796c.126-.218.286-.416.472-.586A2.415 2.415 0 0 0 14.676 8a2.415 2.415 0 0 0-.805-1.645ZM10.73 8A4.821 4.821 0 0 0 8 10.73 4.821 4.821 0 0 0 5.27 8 4.821 4.821 0 0 0 8 5.27 4.821 4.821 0 0 0 10.73 8Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_7019_3733"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconOfferStarFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconOfferStarFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--offerStarFilled', '', null, 'IconOfferStarFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--offerStarFilled', '', null, 'IconOfferStarFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--offerStarFilled');
         this.root.append(svg);
     }

package/dist/IconOfferStarFilledLarge.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--offerStarFilledLarge"><g clip-path="url(#prefix__clip0_7019_3730)"><path d="M12.693 16A10.298 10.298 0 0 1 16 19.308 10.298 10.298 0 0 1 19.308 16 10.298 10.298 0 0 1 16 12.693 10.298 10.298 0 0 1 12.693 16Z"></path><path fill-rule="evenodd" d="M27.436 13.008a5.102 5.102 0 0 1-1.05-1.313 5.433 5.433 0 0 1-.201-1.75c0-1.111-.052-2.371-.875-3.229-.822-.857-2.117-.875-3.229-.875a5.434 5.434 0 0 1-1.75-.201 5.1 5.1 0 0 1-1.312-1.05c-.84-.84-1.768-1.715-3.019-1.715-1.251 0-2.179.875-2.992 1.689-.377.42-.82.775-1.313 1.05-.569.162-1.16.23-1.75.201-1.111 0-2.371.052-3.229.875-.857.822-.875 2.117-.875 3.229.029.59-.04 1.181-.201 1.75a5.1 5.1 0 0 1-1.05 1.312c-.84.84-1.715 1.768-1.715 3.019 0 1.251.875 2.179 1.689 2.992.42.377.775.82 1.05 1.313.162.569.23 1.16.201 1.75 0 1.111.052 2.371.875 3.229.822.857 2.117.875 3.229.875.59-.029 1.181.04 1.75.201.492.275.936.63 1.312 1.05.814.788 1.75 1.689 2.993 1.689 1.242 0 2.178-.875 2.992-1.689.377-.42.82-.775 1.313-1.05a5.433 5.433 0 0 1 1.75-.201c1.111 0 2.371-.053 3.229-.875.857-.823.875-2.118.875-3.229-.029-.59.039-1.181.2-1.75.276-.492.63-.936 1.05-1.313.867-.813 1.742-1.74 1.742-2.992 0-1.251-.875-2.179-1.689-2.992Zm-8.734.29a8.487 8.487 0 0 0 2.872 1.888.875.875 0 0 1 0 1.628 8.489 8.489 0 0 0-4.76 4.76.874.874 0 0 1-1.628 0 8.487 8.487 0 0 0-4.76-4.76.874.874 0 0 1 0-1.628 8.487 8.487 0 0 0 4.76-4.76.875.875 0 0 1 1.628 0 8.488 8.488 0 0 0 1.888 2.872Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_7019_3730"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--offerStarFilledLarge"><g clip-path="url(#prefix__clip0_7019_3730)"><path d="M12.693 16A10.298 10.298 0 0 1 16 19.308 10.298 10.298 0 0 1 19.308 16 10.298 10.298 0 0 1 16 12.693 10.298 10.298 0 0 1 12.693 16Z"></path><path fill-rule="evenodd" d="M27.436 13.008a5.102 5.102 0 0 1-1.05-1.313 5.433 5.433 0 0 1-.201-1.75c0-1.111-.052-2.371-.875-3.229-.822-.857-2.117-.875-3.229-.875a5.434 5.434 0 0 1-1.75-.201 5.1 5.1 0 0 1-1.312-1.05c-.84-.84-1.768-1.715-3.019-1.715-1.251 0-2.179.875-2.992 1.689-.377.42-.82.775-1.313 1.05-.569.162-1.16.23-1.75.201-1.111 0-2.371.052-3.229.875-.857.822-.875 2.117-.875 3.229.029.59-.04 1.181-.201 1.75a5.1 5.1 0 0 1-1.05 1.312c-.84.84-1.715 1.768-1.715 3.019 0 1.251.875 2.179 1.689 2.992.42.377.775.82 1.05 1.313.162.569.23 1.16.201 1.75 0 1.111.052 2.371.875 3.229.822.857 2.117.875 3.229.875.59-.029 1.181.04 1.75.201.492.275.936.63 1.312 1.05.814.788 1.75 1.689 2.993 1.689 1.242 0 2.178-.875 2.992-1.689.377-.42.82-.775 1.313-1.05a5.433 5.433 0 0 1 1.75-.201c1.111 0 2.371-.053 3.229-.875.857-.823.875-2.118.875-3.229-.029-.59.039-1.181.2-1.75.276-.492.63-.936 1.05-1.313.867-.813 1.742-1.74 1.742-2.992 0-1.251-.875-2.179-1.689-2.992Zm-8.734.29a8.487 8.487 0 0 0 2.872 1.888.875.875 0 0 1 0 1.628 8.489 8.489 0 0 0-4.76 4.76.874.874 0 0 1-1.628 0 8.487 8.487 0 0 0-4.76-4.76.874.874 0 0 1 0-1.628 8.487 8.487 0 0 0 4.76-4.76.875.875 0 0 1 1.628 0 8.488 8.488 0 0 0 1.888 2.872Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_7019_3730"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
 
 class IconOfferStarFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconOfferStarFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--offerStarFilledLarge', '', null, 'IconOfferStarFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--offerStarFilledLarge', '', null, 'IconOfferStarFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--offerStarFilledLarge');
         this.root.append(svg);
     }

package/dist/IconOfferStarLarge.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--offerStarLarge"><path d="M21.574 15.186a8.487 8.487 0 0 1-4.76-4.76.875.875 0 0 0-1.628 0 8.487 8.487 0 0 1-4.76 4.76.875.875 0 0 0 0 1.628 8.487 8.487 0 0 1 4.76 4.76.875.875 0 0 0 1.628 0 8.487 8.487 0 0 1 4.76-4.76.875.875 0 0 0 0-1.628ZM16 19.308A10.298 10.298 0 0 0 12.693 16 10.298 10.298 0 0 0 16 12.693 10.298 10.298 0 0 0 19.308 16 10.298 10.298 0 0 0 16 19.308Zm11.436-6.3a5.102 5.102 0 0 1-1.05-1.313 5.433 5.433 0 0 1-.201-1.75c0-1.111-.052-2.371-.875-3.229-.822-.857-2.117-.875-3.229-.875a5.434 5.434 0 0 1-1.75-.201 5.1 5.1 0 0 1-1.312-1.05c-.84-.84-1.768-1.715-3.019-1.715-1.251 0-2.179.875-2.992 1.689-.377.42-.82.775-1.313 1.05-.569.162-1.16.23-1.75.201-1.111 0-2.371.052-3.229.875-.857.822-.875 2.117-.875 3.229.029.59-.04 1.181-.201 1.75a5.1 5.1 0 0 1-1.05 1.312c-.84.84-1.715 1.768-1.715 3.019 0 1.251.875 2.179 1.689 2.992.42.377.775.82 1.05 1.313.162.569.23 1.16.201 1.75 0 1.111.052 2.371.875 3.229.822.857 2.117.875 3.229.875.59-.029 1.181.04 1.75.201.492.275.936.63 1.312 1.05.814.788 1.75 1.689 2.993 1.689 1.242 0 2.178-.875 2.992-1.689.377-.42.82-.775 1.313-1.05a5.433 5.433 0 0 1 1.75-.201c1.111 0 2.371-.053 3.229-.875.857-.823.875-2.118.875-3.229-.029-.59.039-1.181.2-1.75.276-.492.63-.936 1.05-1.313.867-.813 1.742-1.74 1.742-2.992 0-1.251-.875-2.179-1.689-2.992Zm-1.26 4.742a6.52 6.52 0 0 0-1.426 1.881 6.78 6.78 0 0 0-.332 2.389c0 .823 0 1.671-.394 2.021-.394.35-1.208.377-2.03.394a6.563 6.563 0 0 0-2.38.332 6.52 6.52 0 0 0-1.864 1.41c-.604.594-1.234 1.198-1.75 1.198s-1.172-.604-1.75-1.199a6.521 6.521 0 0 0-1.881-1.426 6.563 6.563 0 0 0-2.38-.332c-.875 0-1.68 0-2.03-.394-.35-.394-.377-1.199-.394-2.021a6.781 6.781 0 0 0-.315-2.372 6.52 6.52 0 0 0-1.426-1.881c-.595-.578-1.199-1.207-1.199-1.75 0-.543.604-1.172 1.199-1.75a6.52 6.52 0 0 0 1.426-1.881c.253-.77.365-1.58.332-2.389 0-.822 0-1.671.394-2.021.394-.35 1.208-.377 2.03-.394.8.04 1.601-.067 2.363-.315a6.52 6.52 0 0 0 1.881-1.426c.578-.595 1.207-1.199 1.75-1.199.543 0 1.172.604 1.75 1.199a6.52 6.52 0 0 0 1.881 1.426c.766.256 1.573.37 2.38.332.832 0 1.68 0 2.03.394.35.394.377 1.199.394 2.022-.036.802.07 1.605.315 2.37.357.71.84 1.347 1.426 1.882.595.604 1.199 1.234 1.199 1.75s-.604 1.172-1.199 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--offerStarLarge"><path d="M21.574 15.186a8.487 8.487 0 0 1-4.76-4.76.875.875 0 0 0-1.628 0 8.487 8.487 0 0 1-4.76 4.76.875.875 0 0 0 0 1.628 8.487 8.487 0 0 1 4.76 4.76.875.875 0 0 0 1.628 0 8.487 8.487 0 0 1 4.76-4.76.875.875 0 0 0 0-1.628ZM16 19.308A10.298 10.298 0 0 0 12.693 16 10.298 10.298 0 0 0 16 12.693 10.298 10.298 0 0 0 19.308 16 10.298 10.298 0 0 0 16 19.308Zm11.436-6.3a5.102 5.102 0 0 1-1.05-1.313 5.433 5.433 0 0 1-.201-1.75c0-1.111-.052-2.371-.875-3.229-.822-.857-2.117-.875-3.229-.875a5.434 5.434 0 0 1-1.75-.201 5.1 5.1 0 0 1-1.312-1.05c-.84-.84-1.768-1.715-3.019-1.715-1.251 0-2.179.875-2.992 1.689-.377.42-.82.775-1.313 1.05-.569.162-1.16.23-1.75.201-1.111 0-2.371.052-3.229.875-.857.822-.875 2.117-.875 3.229.029.59-.04 1.181-.201 1.75a5.1 5.1 0 0 1-1.05 1.312c-.84.84-1.715 1.768-1.715 3.019 0 1.251.875 2.179 1.689 2.992.42.377.775.82 1.05 1.313.162.569.23 1.16.201 1.75 0 1.111.052 2.371.875 3.229.822.857 2.117.875 3.229.875.59-.029 1.181.04 1.75.201.492.275.936.63 1.312 1.05.814.788 1.75 1.689 2.993 1.689 1.242 0 2.178-.875 2.992-1.689.377-.42.82-.775 1.313-1.05a5.433 5.433 0 0 1 1.75-.201c1.111 0 2.371-.053 3.229-.875.857-.823.875-2.118.875-3.229-.029-.59.039-1.181.2-1.75.276-.492.63-.936 1.05-1.313.867-.813 1.742-1.74 1.742-2.992 0-1.251-.875-2.179-1.689-2.992Zm-1.26 4.742a6.52 6.52 0 0 0-1.426 1.881 6.78 6.78 0 0 0-.332 2.389c0 .823 0 1.671-.394 2.021-.394.35-1.208.377-2.03.394a6.563 6.563 0 0 0-2.38.332 6.52 6.52 0 0 0-1.864 1.41c-.604.594-1.234 1.198-1.75 1.198s-1.172-.604-1.75-1.199a6.521 6.521 0 0 0-1.881-1.426 6.563 6.563 0 0 0-2.38-.332c-.875 0-1.68 0-2.03-.394-.35-.394-.377-1.199-.394-2.021a6.781 6.781 0 0 0-.315-2.372 6.52 6.52 0 0 0-1.426-1.881c-.595-.578-1.199-1.207-1.199-1.75 0-.543.604-1.172 1.199-1.75a6.52 6.52 0 0 0 1.426-1.881c.253-.77.365-1.58.332-2.389 0-.822 0-1.671.394-2.021.394-.35 1.208-.377 2.03-.394.8.04 1.601-.067 2.363-.315a6.52 6.52 0 0 0 1.881-1.426c.578-.595 1.207-1.199 1.75-1.199.543 0 1.172.604 1.75 1.199a6.52 6.52 0 0 0 1.881 1.426c.766.256 1.573.37 2.38.332.832 0 1.68 0 2.03.394.35.394.377 1.199.394 2.022-.036.802.07 1.605.315 2.37.357.71.84 1.347 1.426 1.882.595.604 1.199 1.234 1.199 1.75s-.604 1.172-1.199 1.75Z"></path></svg>';
 
 class IconOfferStarLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconOfferStarLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--offerStarLarge', '', null, 'IconOfferStarLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--offerStarLarge', '', null, 'IconOfferStarLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--offerStarLarge');
         this.root.append(svg);
     }

package/dist/IconOffice.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--office"><path d="M12.375 2.094h-8.75a1.54 1.54 0 0 0-1.531 1.531v10.281h11.812V3.625a1.54 1.54 0 0 0-1.531-1.531Zm.219 10.5H8.656v-1.969H7.344v1.969H3.406V3.625a.219.219 0 0 1 .219-.219h8.75a.219.219 0 0 1 .219.219v8.969Zm-3.719-7h1.75v1.312h-1.75V5.594Zm-3.5 0h1.75v1.312h-1.75V5.594Zm3.5 2.625h1.75V9.53h-1.75V8.22Zm-3.5 0h1.75V9.53h-1.75V8.22Z"></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--office"><path d="M12.375 2.094h-8.75a1.54 1.54 0 0 0-1.531 1.531v10.281h11.812V3.625a1.54 1.54 0 0 0-1.531-1.531Zm.219 10.5H8.656v-1.969H7.344v1.969H3.406V3.625a.219.219 0 0 1 .219-.219h8.75a.219.219 0 0 1 .219.219v8.969Zm-3.719-7h1.75v1.312h-1.75V5.594Zm-3.5 0h1.75v1.312h-1.75V5.594Zm3.5 2.625h1.75V9.53h-1.75V8.22Zm-3.5 0h1.75V9.53h-1.75V8.22Z"></path></svg>';
 
 class IconOffice extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconOffice extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--office', '', null, 'IconOffice');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--office', '', null, 'IconOffice');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--office');
         this.root.append(svg);
     }

package/dist/IconOfficeLarge.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--officeLarge"><path d="M24.75 4.625H7.25A2.625 2.625 0 0 0 4.625 7.25v20.125h22.75V7.25a2.625 2.625 0 0 0-2.625-2.625Zm-10.5 21v-3.5h3.5v3.5h-3.5Zm11.375 0H19.5v-3.5h1.75v-1.75h-10.5v1.75h1.75v3.5H6.375V7.25a.875.875 0 0 1 .875-.875h17.5a.875.875 0 0 1 .875.875v18.375ZM17.75 9.875h3.5v1.75h-3.5v-1.75Zm-7 0h3.5v1.75h-3.5v-1.75Zm7 5.25h3.5v1.75h-3.5v-1.75Zm-7 0h3.5v1.75h-3.5v-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--officeLarge"><path d="M24.75 4.625H7.25A2.625 2.625 0 0 0 4.625 7.25v20.125h22.75V7.25a2.625 2.625 0 0 0-2.625-2.625Zm-10.5 21v-3.5h3.5v3.5h-3.5Zm11.375 0H19.5v-3.5h1.75v-1.75h-10.5v1.75h1.75v3.5H6.375V7.25a.875.875 0 0 1 .875-.875h17.5a.875.875 0 0 1 .875.875v18.375ZM17.75 9.875h3.5v1.75h-3.5v-1.75Zm-7 0h3.5v1.75h-3.5v-1.75Zm7 5.25h3.5v1.75h-3.5v-1.75Zm-7 0h3.5v1.75h-3.5v-1.75Z"></path></svg>';
 
 class IconOfficeLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconOfficeLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--officeLarge', '', null, 'IconOfficeLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--officeLarge', '', null, 'IconOfficeLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--officeLarge');
         this.root.append(svg);
     }

package/dist/IconOrder.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--order"><path d="M12.375 2.094h-8.75a1.54 1.54 0 0 0-1.531 1.531v10.64l3.193-1.444a.202.202 0 0 1 .176 0L8 13.967l2.537-1.146a.202.202 0 0 1 .175 0l3.194 1.444V3.625a1.54 1.54 0 0 0-1.531-1.531Zm.219 10.141-1.339-.604a1.506 1.506 0 0 0-1.26 0L8 12.533l-1.995-.875a1.488 1.488 0 0 0-1.26 0l-1.339.603V3.625a.219.219 0 0 1 .219-.219h8.75a.219.219 0 0 1 .219.219v8.61ZM5.375 5.594h5.25v1.312h-5.25V5.594Zm.875 2.625h3.5V9.53h-3.5V8.22Z"></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--order"><path d="M12.375 2.094h-8.75a1.54 1.54 0 0 0-1.531 1.531v10.64l3.193-1.444a.202.202 0 0 1 .176 0L8 13.967l2.537-1.146a.202.202 0 0 1 .175 0l3.194 1.444V3.625a1.54 1.54 0 0 0-1.531-1.531Zm.219 10.141-1.339-.604a1.506 1.506 0 0 0-1.26 0L8 12.533l-1.995-.875a1.488 1.488 0 0 0-1.26 0l-1.339.603V3.625a.219.219 0 0 1 .219-.219h8.75a.219.219 0 0 1 .219.219v8.61ZM5.375 5.594h5.25v1.312h-5.25V5.594Zm.875 2.625h3.5V9.53h-3.5V8.22Z"></path></svg>';
 
 class IconOrder extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconOrder extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--order', '', null, 'IconOrder');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--order', '', null, 'IconOrder');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--order');
         this.root.append(svg);
     }

package/dist/IconOrderFilled.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--orderFilled"><path d="M12.375 2.094h-8.75a1.54 1.54 0 0 0-1.531 1.531v10.64l3.193-1.444a.202.202 0 0 1 .176 0L8 13.967l2.537-1.146a.202.202 0 0 1 .175 0l3.194 1.444V3.625a1.54 1.54 0 0 0-1.531-1.531Zm-1.75 4.812h-5.25V5.594h5.25v1.312ZM9.75 9.531h-3.5V8.22h3.5V9.53Z"></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--orderFilled"><path d="M12.375 2.094h-8.75a1.54 1.54 0 0 0-1.531 1.531v10.64l3.193-1.444a.202.202 0 0 1 .176 0L8 13.967l2.537-1.146a.202.202 0 0 1 .175 0l3.194 1.444V3.625a1.54 1.54 0 0 0-1.531-1.531Zm-1.75 4.812h-5.25V5.594h5.25v1.312ZM9.75 9.531h-3.5V8.22h3.5V9.53Z"></path></svg>';
 
 class IconOrderFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconOrderFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--orderFilled', '', null, 'IconOrderFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--orderFilled', '', null, 'IconOrderFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--orderFilled');
         this.root.append(svg);
     }

package/dist/IconOrderFilledLarge.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--orderFilledLarge"><path d="M23.875 3.75H8.125A2.625 2.625 0 0 0 5.5 6.375v21.927l3.561-1.898L12.5 28.38l3.5-1.968 3.5 1.968 3.43-1.977 3.57 1.898V6.375a2.625 2.625 0 0 0-2.625-2.625ZM19.5 21.25h-7V19.5h7v1.75Zm1.75-3.5h-10.5V16h10.5v1.75Zm-8.75-6.816 1.242-1.243 1.567 1.575 3.754-3.762 1.312 1.242-4.996 4.988-2.879-2.8Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--orderFilledLarge"><path d="M23.875 3.75H8.125A2.625 2.625 0 0 0 5.5 6.375v21.927l3.561-1.898L12.5 28.38l3.5-1.968 3.5 1.968 3.43-1.977 3.57 1.898V6.375a2.625 2.625 0 0 0-2.625-2.625ZM19.5 21.25h-7V19.5h7v1.75Zm1.75-3.5h-10.5V16h10.5v1.75Zm-8.75-6.816 1.242-1.243 1.567 1.575 3.754-3.762 1.312 1.242-4.996 4.988-2.879-2.8Z"></path></svg>';
 
 class IconOrderFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconOrderFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--orderFilledLarge', '', null, 'IconOrderFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--orderFilledLarge', '', null, 'IconOrderFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--orderFilledLarge');
         this.root.append(svg);
     }

package/dist/IconOrderLarge.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--orderLarge"><path d="M23.875 3.75H8.125A2.625 2.625 0 0 0 5.5 6.375v21.927l3.561-1.898L12.5 28.38l3.5-1.968 3.5 1.968 3.43-1.977 3.57 1.898V6.375a2.625 2.625 0 0 0-2.625-2.625Zm.875 21.639-.989-.525a1.751 1.751 0 0 0-1.688 0l-2.625 1.479-2.625-1.488a1.75 1.75 0 0 0-1.75 0l-2.626 1.488-2.52-1.453a1.75 1.75 0 0 0-1.688 0l-.989.499V6.375a.875.875 0 0 1 .875-.875h15.75a.875.875 0 0 1 .875.875v19.014ZM10.75 16h10.5v1.75h-10.5V16Zm1.75 3.5h7v1.75h-7V19.5Zm2.844-5.766-2.844-2.8 1.242-1.243 1.567 1.575 3.754-3.762 1.312 1.242-5.031 4.988Z"></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--orderLarge"><path d="M23.875 3.75H8.125A2.625 2.625 0 0 0 5.5 6.375v21.927l3.561-1.898L12.5 28.38l3.5-1.968 3.5 1.968 3.43-1.977 3.57 1.898V6.375a2.625 2.625 0 0 0-2.625-2.625Zm.875 21.639-.989-.525a1.751 1.751 0 0 0-1.688 0l-2.625 1.479-2.625-1.488a1.75 1.75 0 0 0-1.75 0l-2.626 1.488-2.52-1.453a1.75 1.75 0 0 0-1.688 0l-.989.499V6.375a.875.875 0 0 1 .875-.875h15.75a.875.875 0 0 1 .875.875v19.014ZM10.75 16h10.5v1.75h-10.5V16Zm1.75 3.5h7v1.75h-7V19.5Zm2.844-5.766-2.844-2.8 1.242-1.243 1.567 1.575 3.754-3.762 1.312 1.242-5.031 4.988Z"></path></svg>';
 
 class IconOrderLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconOrderLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--orderLarge', '', null, 'IconOrderLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--orderLarge', '', null, 'IconOrderLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--orderLarge');
         this.root.append(svg);
     }

package/dist/IconOver16Filled.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--over16Filled"><path d="M7.29 7.987c.087-.03.18-.04.273-.03a.652.652 0 0 1 .717.677.665.665 0 0 1-.717.679.665.665 0 0 1-.718-.692.652.652 0 0 1 .445-.634Z"></path><path fill-rule="evenodd" d="M3.625 2.313h8.75a1.313 1.313 0 0 1 1.313 1.312v8.75a1.313 1.313 0 0 1-1.313 1.313h-8.75a1.313 1.313 0 0 1-1.313-1.313v-8.75a1.313 1.313 0 0 1 1.313-1.313Zm.595 7.634h.831V5.813h-.595l-1.199.538.28.704.683-.254v3.146Zm1.754-1.969c0 1.365.626 2.043 1.61 2.043a1.43 1.43 0 0 0 1.527-1.435 1.313 1.313 0 0 0-1.37-1.334 1.111 1.111 0 0 0-.935.407c0-.713.34-1.15.875-1.15a1.024 1.024 0 0 1 .756.318l.526-.577a1.597 1.597 0 0 0-1.278-.512c-.94 0-1.71.726-1.71 2.24Zm5.526.46h.875v-.876H11.5v-.875h-.875v.875H9.75v.875h.875v.876h.875v-.876Z" 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--over16Filled"><path d="M7.29 7.987c.087-.03.18-.04.273-.03a.652.652 0 0 1 .717.677.665.665 0 0 1-.717.679.665.665 0 0 1-.718-.692.652.652 0 0 1 .445-.634Z"></path><path fill-rule="evenodd" d="M3.625 2.313h8.75a1.313 1.313 0 0 1 1.313 1.312v8.75a1.313 1.313 0 0 1-1.313 1.313h-8.75a1.313 1.313 0 0 1-1.313-1.313v-8.75a1.313 1.313 0 0 1 1.313-1.313Zm.595 7.634h.831V5.813h-.595l-1.199.538.28.704.683-.254v3.146Zm1.754-1.969c0 1.365.626 2.043 1.61 2.043a1.43 1.43 0 0 0 1.527-1.435 1.313 1.313 0 0 0-1.37-1.334 1.111 1.111 0 0 0-.935.407c0-.713.34-1.15.875-1.15a1.024 1.024 0 0 1 .756.318l.526-.577a1.597 1.597 0 0 0-1.278-.512c-.94 0-1.71.726-1.71 2.24Zm5.526.46h.875v-.876H11.5v-.875h-.875v.875H9.75v.875h.875v.876h.875v-.876Z" clip-rule="evenodd"></path></svg>';
 
 class IconOver16Filled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconOver16Filled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--over16Filled', '', null, 'IconOver16Filled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--over16Filled', '', null, 'IconOver16Filled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--over16Filled');
         this.root.append(svg);
     }

package/dist/IconOver16FilledLarge.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--over16FilledLarge"><path d="M14.58 15.973c.175-.058.36-.08.545-.06a1.304 1.304 0 0 1 1.435 1.356 1.33 1.33 0 0 1-1.435 1.356 1.33 1.33 0 0 1-1.435-1.383 1.304 1.304 0 0 1 .89-1.269Z"></path><path fill-rule="evenodd" d="M7.25 4.625h17.5a2.625 2.625 0 0 1 2.625 2.625v17.5a2.625 2.625 0 0 1-2.625 2.625H7.25a2.625 2.625 0 0 1-2.625-2.625V7.25A2.625 2.625 0 0 1 7.25 4.625Zm1.19 15.269h1.662v-8.269h-1.19l-2.397 1.076.56 1.409 1.365-.508v6.292Zm3.509-3.938c0 2.73 1.251 4.087 3.22 4.087a2.86 2.86 0 0 0 3.053-2.87 2.625 2.625 0 0 0-2.738-2.67 2.223 2.223 0 0 0-1.873.815c0-1.427.683-2.302 1.75-2.302a2.047 2.047 0 0 1 1.514.639l1.05-1.155a3.194 3.194 0 0 0-2.555-1.024c-1.881 0-3.421 1.453-3.421 4.48ZM23 16.875h1.75v-1.75H23v-1.75h-1.75v1.75H19.5v1.75h1.75v1.75H23v-1.75Z" 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--over16FilledLarge"><path d="M14.58 15.973c.175-.058.36-.08.545-.06a1.304 1.304 0 0 1 1.435 1.356 1.33 1.33 0 0 1-1.435 1.356 1.33 1.33 0 0 1-1.435-1.383 1.304 1.304 0 0 1 .89-1.269Z"></path><path fill-rule="evenodd" d="M7.25 4.625h17.5a2.625 2.625 0 0 1 2.625 2.625v17.5a2.625 2.625 0 0 1-2.625 2.625H7.25a2.625 2.625 0 0 1-2.625-2.625V7.25A2.625 2.625 0 0 1 7.25 4.625Zm1.19 15.269h1.662v-8.269h-1.19l-2.397 1.076.56 1.409 1.365-.508v6.292Zm3.509-3.938c0 2.73 1.251 4.087 3.22 4.087a2.86 2.86 0 0 0 3.053-2.87 2.625 2.625 0 0 0-2.738-2.67 2.223 2.223 0 0 0-1.873.815c0-1.427.683-2.302 1.75-2.302a2.047 2.047 0 0 1 1.514.639l1.05-1.155a3.194 3.194 0 0 0-2.555-1.024c-1.881 0-3.421 1.453-3.421 4.48ZM23 16.875h1.75v-1.75H23v-1.75h-1.75v1.75H19.5v1.75h1.75v1.75H23v-1.75Z" clip-rule="evenodd"></path></svg>';
 
 class IconOver16FilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconOver16FilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--over16FilledLarge', '', null, 'IconOver16FilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--over16FilledLarge', '', null, 'IconOver16FilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--over16FilledLarge');
         this.root.append(svg);
     }

package/dist/IconOver18Filled.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--over18Filled"><path d="M7.497 9.304c.403 0 .73-.253.73-.565 0-.311-.327-.564-.73-.564-.404 0-.73.253-.73.564 0 .312.326.565.73.565Z"></path><path d="M7.716 7.486a.555.555 0 0 1-.22.028.547.547 0 0 1-.59-.529.538.538 0 0 1 .59-.525.542.542 0 0 1 .596.525.555.555 0 0 1-.376.501Z"></path><path fill-rule="evenodd" d="M12.375 2.313h-8.75a1.313 1.313 0 0 0-1.313 1.312v8.75a1.313 1.313 0 0 0 1.313 1.313h8.75a1.313 1.313 0 0 0 1.313-1.313v-8.75a1.313 1.313 0 0 0-1.313-1.313ZM5.051 9.947H4.22V6.8l-.682.254-.28-.704 1.198-.538h.595v4.134Zm2.446.074c-1.085 0-1.606-.564-1.606-1.212a1.01 1.01 0 0 1 .713-.984 1.01 1.01 0 0 1-.555-.914c0-.6.494-1.173 1.448-1.173s1.452.573 1.452 1.173a1.028 1.028 0 0 1-.564.914 1.015 1.015 0 0 1 .722.984c0 .648-.525 1.212-1.61 1.212Zm4.878-1.584H11.5v.876h-.875v-.876H9.75v-.874h.875v-.875h.875v.875h.875v.875Z" 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--over18Filled"><path d="M7.497 9.304c.403 0 .73-.253.73-.565 0-.311-.327-.564-.73-.564-.404 0-.73.253-.73.564 0 .312.326.565.73.565Z"></path><path d="M7.716 7.486a.555.555 0 0 1-.22.028.547.547 0 0 1-.59-.529.538.538 0 0 1 .59-.525.542.542 0 0 1 .596.525.555.555 0 0 1-.376.501Z"></path><path fill-rule="evenodd" d="M12.375 2.313h-8.75a1.313 1.313 0 0 0-1.313 1.312v8.75a1.313 1.313 0 0 0 1.313 1.313h8.75a1.313 1.313 0 0 0 1.313-1.313v-8.75a1.313 1.313 0 0 0-1.313-1.313ZM5.051 9.947H4.22V6.8l-.682.254-.28-.704 1.198-.538h.595v4.134Zm2.446.074c-1.085 0-1.606-.564-1.606-1.212a1.01 1.01 0 0 1 .713-.984 1.01 1.01 0 0 1-.555-.914c0-.6.494-1.173 1.448-1.173s1.452.573 1.452 1.173a1.028 1.028 0 0 1-.564.914 1.015 1.015 0 0 1 .722.984c0 .648-.525 1.212-1.61 1.212Zm4.878-1.584H11.5v.876h-.875v-.876H9.75v-.874h.875v-.875h.875v.875h.875v.875Z" clip-rule="evenodd"></path></svg>';
 
 class IconOver18Filled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconOver18Filled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--over18Filled', '', null, 'IconOver18Filled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--over18Filled', '', null, 'IconOver18Filled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--over18Filled');
         this.root.append(svg);
     }

package/dist/IconOver18FilledLarge.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--over18FilledLarge"><path d="M14.994 18.608c.807 0 1.461-.506 1.461-1.13 0-.623-.654-1.128-1.461-1.128s-1.461.505-1.461 1.129c0 .623.654 1.129 1.46 1.129Z"></path><path d="M15.431 14.973a1.11 1.11 0 0 1-.437.056 1.095 1.095 0 0 1-1.181-1.059 1.076 1.076 0 0 1 1.18-1.05 1.086 1.086 0 0 1 1.19 1.05 1.111 1.111 0 0 1-.752 1.002Z"></path><path fill-rule="evenodd" d="M24.75 4.625H7.25A2.625 2.625 0 0 0 4.625 7.25v17.5a2.625 2.625 0 0 0 2.625 2.625h17.5a2.625 2.625 0 0 0 2.625-2.625V7.25a2.625 2.625 0 0 0-2.625-2.625ZM10.102 19.894H8.44v-6.291l-1.365.507-.56-1.409 2.397-1.076h1.19v8.269Zm4.892.149c-2.17 0-3.211-1.13-3.211-2.424a2.021 2.021 0 0 1 1.426-1.969 2.02 2.02 0 0 1-1.111-1.829c0-1.198.988-2.345 2.896-2.345 1.907 0 2.905 1.146 2.905 2.345a2.056 2.056 0 0 1-1.129 1.829 2.03 2.03 0 0 1 1.444 1.969c0 1.295-1.05 2.424-3.22 2.424Zm9.756-3.168H23v1.75h-1.75v-1.75H19.5v-1.75h1.75v-1.75H23v1.75h1.75v1.75Z" 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--over18FilledLarge"><path d="M14.994 18.608c.807 0 1.461-.506 1.461-1.13 0-.623-.654-1.128-1.461-1.128s-1.461.505-1.461 1.129c0 .623.654 1.129 1.46 1.129Z"></path><path d="M15.431 14.973a1.11 1.11 0 0 1-.437.056 1.095 1.095 0 0 1-1.181-1.059 1.076 1.076 0 0 1 1.18-1.05 1.086 1.086 0 0 1 1.19 1.05 1.111 1.111 0 0 1-.752 1.002Z"></path><path fill-rule="evenodd" d="M24.75 4.625H7.25A2.625 2.625 0 0 0 4.625 7.25v17.5a2.625 2.625 0 0 0 2.625 2.625h17.5a2.625 2.625 0 0 0 2.625-2.625V7.25a2.625 2.625 0 0 0-2.625-2.625ZM10.102 19.894H8.44v-6.291l-1.365.507-.56-1.409 2.397-1.076h1.19v8.269Zm4.892.149c-2.17 0-3.211-1.13-3.211-2.424a2.021 2.021 0 0 1 1.426-1.969 2.02 2.02 0 0 1-1.111-1.829c0-1.198.988-2.345 2.896-2.345 1.907 0 2.905 1.146 2.905 2.345a2.056 2.056 0 0 1-1.129 1.829 2.03 2.03 0 0 1 1.444 1.969c0 1.295-1.05 2.424-3.22 2.424Zm9.756-3.168H23v1.75h-1.75v-1.75H19.5v-1.75h1.75v-1.75H23v1.75h1.75v1.75Z" clip-rule="evenodd"></path></svg>';
 
 class IconOver18FilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconOver18FilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--over18FilledLarge', '', null, 'IconOver18FilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--over18FilledLarge', '', null, 'IconOver18FilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--over18FilledLarge');
         this.root.append(svg);
     }

package/dist/IconOver21Filled.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--over21Filled"><path d="M12.375 2.313h-8.75a1.313 1.313 0 0 0-1.313 1.312v8.75a1.313 1.313 0 0 0 1.313 1.313h8.75a1.313 1.313 0 0 0 1.313-1.313v-8.75a1.313 1.313 0 0 0-1.313-1.313ZM6.617 9.947H3.625v-.573c0-.8.464-1.138 1.129-1.492.665-.354.875-.508.875-.875 0-.368-.254-.477-.617-.477a1.129 1.129 0 0 0-.875.394l-.481-.59a1.842 1.842 0 0 1 1.421-.596c.875 0 1.427.473 1.427 1.243 0 .687-.438 1.107-1.15 1.452-.644.324-.876.503-.876.722v.044H6.6l.018.748Zm2.354 0H8.14V6.8l-.683.254-.28-.704 1.195-.538h.6v4.134Zm3.404-1.51H11.5v.876h-.875v-.876H9.75v-.874h.875v-.875h.875v.875h.875v.875Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--over21Filled"><path d="M12.375 2.313h-8.75a1.313 1.313 0 0 0-1.313 1.312v8.75a1.313 1.313 0 0 0 1.313 1.313h8.75a1.313 1.313 0 0 0 1.313-1.313v-8.75a1.313 1.313 0 0 0-1.313-1.313ZM6.617 9.947H3.625v-.573c0-.8.464-1.138 1.129-1.492.665-.354.875-.508.875-.875 0-.368-.254-.477-.617-.477a1.129 1.129 0 0 0-.875.394l-.481-.59a1.842 1.842 0 0 1 1.421-.596c.875 0 1.427.473 1.427 1.243 0 .687-.438 1.107-1.15 1.452-.644.324-.876.503-.876.722v.044H6.6l.018.748Zm2.354 0H8.14V6.8l-.683.254-.28-.704 1.195-.538h.6v4.134Zm3.404-1.51H11.5v.876h-.875v-.876H9.75v-.874h.875v-.875h.875v.875h.875v.875Z"></path></svg>';
 
 class IconOver21Filled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconOver21Filled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--over21Filled', '', null, 'IconOver21Filled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--over21Filled', '', null, 'IconOver21Filled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--over21Filled');
         this.root.append(svg);
     }

package/dist/IconOver21FilledLarge.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--over21FilledLarge"><path d="M24.75 4.625H7.25A2.625 2.625 0 0 0 4.625 7.25v17.5a2.625 2.625 0 0 0 2.625 2.625h17.5a2.625 2.625 0 0 0 2.625-2.625V7.25a2.625 2.625 0 0 0-2.625-2.625ZM13.235 19.894H7.25v-1.146c0-1.602.928-2.276 2.258-2.984 1.33-.709 1.75-1.015 1.75-1.75 0-.735-.508-.954-1.234-.954a2.257 2.257 0 0 0-1.75.787l-.963-1.18a3.684 3.684 0 0 1 2.844-1.19c1.75 0 2.853.944 2.853 2.484 0 1.374-.875 2.214-2.302 2.905-1.286.648-1.75 1.006-1.75 1.444v.088H13.2l.035 1.496Zm4.707 0H16.28v-6.291l-1.365.507-.56-1.409 2.389-1.076h1.198v8.269Zm6.808-3.019H23v1.75h-1.75v-1.75H19.5v-1.75h1.75v-1.75H23v1.75h1.75v1.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--over21FilledLarge"><path d="M24.75 4.625H7.25A2.625 2.625 0 0 0 4.625 7.25v17.5a2.625 2.625 0 0 0 2.625 2.625h17.5a2.625 2.625 0 0 0 2.625-2.625V7.25a2.625 2.625 0 0 0-2.625-2.625ZM13.235 19.894H7.25v-1.146c0-1.602.928-2.276 2.258-2.984 1.33-.709 1.75-1.015 1.75-1.75 0-.735-.508-.954-1.234-.954a2.257 2.257 0 0 0-1.75.787l-.963-1.18a3.684 3.684 0 0 1 2.844-1.19c1.75 0 2.853.944 2.853 2.484 0 1.374-.875 2.214-2.302 2.905-1.286.648-1.75 1.006-1.75 1.444v.088H13.2l.035 1.496Zm4.707 0H16.28v-6.291l-1.365.507-.56-1.409 2.389-1.076h1.198v8.269Zm6.808-3.019H23v1.75h-1.75v-1.75H19.5v-1.75h1.75v-1.75H23v1.75h1.75v1.75Z"></path></svg>';
 
 class IconOver21FilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconOver21FilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--over21FilledLarge', '', null, 'IconOver21FilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--over21FilledLarge', '', null, 'IconOver21FilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--over21FilledLarge');
         this.root.append(svg);
     }

package/dist/IconPaintbrush.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--paintbrush"><path d="M14.186 1.683h-2.511l-.875 1.12-.237-1.12H1.805l.945 5.25v.682a1.969 1.969 0 0 0 2.003 1.969H6.25l.096.087-.35 2.415A2.109 2.109 0 0 0 8 14.492c.338-.003.671-.087.97-.245h.08a2.118 2.118 0 0 0 1.11-2.16l-.35-2.468h1.436a1.969 1.969 0 0 0 2.004-2.004v-.691l.936-5.242Zm-9.45 1.312.35 1.899h1.339l-.36-1.899h3.413l.35 1.899h.945l1.532-1.899h.315l-.587 3.255h-8.05l-.595-3.255h1.348Zm7.192 4.62a.665.665 0 0 1-.656.656H9.881a1.382 1.382 0 0 0-1.365 1.234v.079l.376 2.625a.796.796 0 0 1-.411.814h-.079a.787.787 0 0 1-1.146-.814l.385-2.625v-.088A1.426 1.426 0 0 0 6.25 8.271H4.753a.656.656 0 0 1-.656-.656v-.088h7.875l-.044.088Z"></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--paintbrush"><path d="M14.186 1.683h-2.511l-.875 1.12-.237-1.12H1.805l.945 5.25v.682a1.969 1.969 0 0 0 2.003 1.969H6.25l.096.087-.35 2.415A2.109 2.109 0 0 0 8 14.492c.338-.003.671-.087.97-.245h.08a2.118 2.118 0 0 0 1.11-2.16l-.35-2.468h1.436a1.969 1.969 0 0 0 2.004-2.004v-.691l.936-5.242Zm-9.45 1.312.35 1.899h1.339l-.36-1.899h3.413l.35 1.899h.945l1.532-1.899h.315l-.587 3.255h-8.05l-.595-3.255h1.348Zm7.192 4.62a.665.665 0 0 1-.656.656H9.881a1.382 1.382 0 0 0-1.365 1.234v.079l.376 2.625a.796.796 0 0 1-.411.814h-.079a.787.787 0 0 1-1.146-.814l.385-2.625v-.088A1.426 1.426 0 0 0 6.25 8.271H4.753a.656.656 0 0 1-.656-.656v-.088h7.875l-.044.088Z"></path></svg>';
 
 class IconPaintbrush extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPaintbrush extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--paintbrush', '', null, 'IconPaintbrush');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--paintbrush', '', null, 'IconPaintbrush');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--paintbrush');
         this.root.append(svg);
     }

package/dist/IconPaintbrushLarge.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--paintbrushLarge"><path d="M16.096 25.835a.796.796 0 1 0 0-1.593.796.796 0 0 0 0 1.593Z"></path><path d="M27.375 4.625h-4.297l-1.828 3.36-.595-3.36H4.668l1.75 9.721v1.96a2.625 2.625 0 0 0 2.625 2.625h3.5c.135 0 .264.046.368.131.097.08.167.186.201.307l-.796 5.014a3.745 3.745 0 0 0 1.26 3.438 3.79 3.79 0 0 0 2.459.875c.86.004 1.694-.29 2.362-.831l.088-.07a3.77 3.77 0 0 0 1.365-3.5l-.779-5.031a.42.42 0 0 1 .14-.228.446.446 0 0 1 .324-.131H23a2.625 2.625 0 0 0 2.625-2.625v-2.205l1.75-9.45ZM8.536 6.375l.936 5.119h1.75l-.91-5.119h1.75l.928 5.119h1.75l-.867-5.119h5.33l.953 5.127h1.234l2.738-5.127h1.12l-1.268 6.877H8.02L6.768 6.375h1.768Zm15.339 9.931a.875.875 0 0 1-.875.875h-3.413a2.24 2.24 0 0 0-2.222 2.013v.114l.814 5.25a1.996 1.996 0 0 1-.735 1.942l-.088.079a2.03 2.03 0 0 1-2.625-.044 2.003 2.003 0 0 1-.674-1.846l.832-5.25v-.114a2.346 2.346 0 0 0-.875-1.584 2.371 2.371 0 0 0-1.47-.516h-3.5a.875.875 0 0 1-.876-.875v-1.348h15.707v1.304Z"></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--paintbrushLarge"><path d="M16.096 25.835a.796.796 0 1 0 0-1.593.796.796 0 0 0 0 1.593Z"></path><path d="M27.375 4.625h-4.297l-1.828 3.36-.595-3.36H4.668l1.75 9.721v1.96a2.625 2.625 0 0 0 2.625 2.625h3.5c.135 0 .264.046.368.131.097.08.167.186.201.307l-.796 5.014a3.745 3.745 0 0 0 1.26 3.438 3.79 3.79 0 0 0 2.459.875c.86.004 1.694-.29 2.362-.831l.088-.07a3.77 3.77 0 0 0 1.365-3.5l-.779-5.031a.42.42 0 0 1 .14-.228.446.446 0 0 1 .324-.131H23a2.625 2.625 0 0 0 2.625-2.625v-2.205l1.75-9.45ZM8.536 6.375l.936 5.119h1.75l-.91-5.119h1.75l.928 5.119h1.75l-.867-5.119h5.33l.953 5.127h1.234l2.738-5.127h1.12l-1.268 6.877H8.02L6.768 6.375h1.768Zm15.339 9.931a.875.875 0 0 1-.875.875h-3.413a2.24 2.24 0 0 0-2.222 2.013v.114l.814 5.25a1.996 1.996 0 0 1-.735 1.942l-.088.079a2.03 2.03 0 0 1-2.625-.044 2.003 2.003 0 0 1-.674-1.846l.832-5.25v-.114a2.346 2.346 0 0 0-.875-1.584 2.371 2.371 0 0 0-1.47-.516h-3.5a.875.875 0 0 1-.876-.875v-1.348h15.707v1.304Z"></path></svg>';
 
 class IconPaintbrushLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPaintbrushLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--paintbrushLarge', '', null, 'IconPaintbrushLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--paintbrushLarge', '', null, 'IconPaintbrushLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--paintbrushLarge');
         this.root.append(svg);
     }