@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/dist/IconPreparePause.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--preparePause"><g clip-path="url(#prefix__clip0_6395_3736)"><path d="M10.844 7.886h-.875V9.96h.875V7.886Z"></path><path d="M11.526 7.886h.875V9.96h-.875V7.886Z"></path><path fill-rule="evenodd" d="M2.09 9.89h-.005c-.455-.061-.954-.385-1.033-.971-.061-.482.263-.954 1.059-1.54l.044-.035c1.793-1.225 3.972-2.494 6.86-4a50.45 50.45 0 0 1 3.36-1.609l.087-.035.621 1.085-.113.052-.122.053c-.671.294-1.454.636-2.766 1.312.131.342.306.788.455 1.164a3.96 3.96 0 0 1 .648-.061A3.533 3.533 0 0 1 14.71 8.83c0 1.943-1.61 3.527-3.526 3.527A3.522 3.522 0 0 1 7.667 8.9C5.672 9.776 4.071 9.97 3.1 9.97c-.543 0-.9-.06-1.01-.078Zm8.784-3.25-.022.004A2.2 2.2 0 0 0 9.076 8.2a2.424 2.424 0 0 0-.096.621c0 1.217.997 2.214 2.213 2.214a2.222 2.222 0 0 0 2.214-2.214 2.216 2.216 0 0 0-2.214-2.213c-.114 0-.214.015-.32.031ZM8.98 4.771C6.433 6.12 4.482 7.265 2.855 8.376h-.01a4.88 4.88 0 0 0-.375.306c.577.062 2.65.15 5.512-1.32a3.501 3.501 0 0 1 1.4-1.558L8.98 4.77Z" clip-rule="evenodd"></path><path d="m1.516 14.125-.35-1.313H14.79l-.359 1.313H1.516Z"></path></g><defs><clipPath id="prefix__clip0_6395_3736"><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--preparePause"><g clip-path="url(#prefix__clip0_6395_3736)"><path d="M10.844 7.886h-.875V9.96h.875V7.886Z"></path><path d="M11.526 7.886h.875V9.96h-.875V7.886Z"></path><path fill-rule="evenodd" d="M2.09 9.89h-.005c-.455-.061-.954-.385-1.033-.971-.061-.482.263-.954 1.059-1.54l.044-.035c1.793-1.225 3.972-2.494 6.86-4a50.45 50.45 0 0 1 3.36-1.609l.087-.035.621 1.085-.113.052-.122.053c-.671.294-1.454.636-2.766 1.312.131.342.306.788.455 1.164a3.96 3.96 0 0 1 .648-.061A3.533 3.533 0 0 1 14.71 8.83c0 1.943-1.61 3.527-3.526 3.527A3.522 3.522 0 0 1 7.667 8.9C5.672 9.776 4.071 9.97 3.1 9.97c-.543 0-.9-.06-1.01-.078Zm8.784-3.25-.022.004A2.2 2.2 0 0 0 9.076 8.2a2.424 2.424 0 0 0-.096.621c0 1.217.997 2.214 2.213 2.214a2.222 2.222 0 0 0 2.214-2.214 2.216 2.216 0 0 0-2.214-2.213c-.114 0-.214.015-.32.031ZM8.98 4.771C6.433 6.12 4.482 7.265 2.855 8.376h-.01a4.88 4.88 0 0 0-.375.306c.577.062 2.65.15 5.512-1.32a3.501 3.501 0 0 1 1.4-1.558L8.98 4.77Z" clip-rule="evenodd"></path><path d="m1.516 14.125-.35-1.313H14.79l-.359 1.313H1.516Z"></path></g><defs><clipPath id="prefix__clip0_6395_3736"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconPreparePause extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPreparePause extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--preparePause', '', null, 'IconPreparePause');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--preparePause', '', null, 'IconPreparePause');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--preparePause');
         this.root.append(svg);
     }

package/dist/IconPreparePauseLarge.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--preparePauseLarge"><path d="M19.3 15.873h1.75v3.63H19.3v-3.63Z"></path><path d="M22.02 15.873h1.75v3.63h-1.75v-3.63Z"></path><path fill-rule="evenodd" d="M20.235 11.769c.42-.097.849-.149 1.295-.149h.009c3.246 0 5.897 2.651 5.897 5.897 0 3.247-2.65 5.898-5.897 5.898a5.906 5.906 0 0 1-5.898-5.898v-.148C10.2 19.836 6.498 19.233 6 19.136c-.7-.087-1.479-.586-1.61-1.496-.096-.744.437-1.488 1.724-2.433l.07-.052c3.053-2.082 6.763-4.244 11.672-6.808C20.673 6.87 22.23 6.177 23.57 5.6l.875 1.531c-1.243.534-2.634 1.146-5.084 2.406.263.657.604 1.532.875 2.232ZM6.323 17.413c.043.008 3.955.778 9.79-2.223l-.008-.009a5.883 5.883 0 0 1 2.503-2.791c-.245-.621-.552-1.4-.805-2.048-4.428 2.328-7.823 4.323-10.64 6.248-.525.385-.788.648-.928.805l.088.018Zm11.06.113a4.15 4.15 0 0 0 4.147 4.148v-.009a4.156 4.156 0 0 0 4.148-4.148 4.15 4.15 0 0 0-4.148-4.147 4.157 4.157 0 0 0-3.973 3.036 3.945 3.945 0 0 0-.174 1.12Z" clip-rule="evenodd"></path><path d="M27.375 24.544H4.625l.446 1.75H26.93l.446-1.742v-.008Z"></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--preparePauseLarge"><path d="M19.3 15.873h1.75v3.63H19.3v-3.63Z"></path><path d="M22.02 15.873h1.75v3.63h-1.75v-3.63Z"></path><path fill-rule="evenodd" d="M20.235 11.769c.42-.097.849-.149 1.295-.149h.009c3.246 0 5.897 2.651 5.897 5.897 0 3.247-2.65 5.898-5.897 5.898a5.906 5.906 0 0 1-5.898-5.898v-.148C10.2 19.836 6.498 19.233 6 19.136c-.7-.087-1.479-.586-1.61-1.496-.096-.744.437-1.488 1.724-2.433l.07-.052c3.053-2.082 6.763-4.244 11.672-6.808C20.673 6.87 22.23 6.177 23.57 5.6l.875 1.531c-1.243.534-2.634 1.146-5.084 2.406.263.657.604 1.532.875 2.232ZM6.323 17.413c.043.008 3.955.778 9.79-2.223l-.008-.009a5.883 5.883 0 0 1 2.503-2.791c-.245-.621-.552-1.4-.805-2.048-4.428 2.328-7.823 4.323-10.64 6.248-.525.385-.788.648-.928.805l.088.018Zm11.06.113a4.15 4.15 0 0 0 4.147 4.148v-.009a4.156 4.156 0 0 0 4.148-4.148 4.15 4.15 0 0 0-4.148-4.147 4.157 4.157 0 0 0-3.973 3.036 3.945 3.945 0 0 0-.174 1.12Z" clip-rule="evenodd"></path><path d="M27.375 24.544H4.625l.446 1.75H26.93l.446-1.742v-.008Z"></path></svg>';
 
 class IconPreparePauseLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPreparePauseLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--preparePauseLarge', '', null, 'IconPreparePauseLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--preparePauseLarge', '', null, 'IconPreparePauseLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--preparePauseLarge');
         this.root.append(svg);
     }

package/dist/IconPresentationChart.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--presentationChart"><path d="M15 2.094H1v1.312h1.094v5.469a1.54 1.54 0 0 0 1.531 1.531h3.719v1.707l-1.969 2.012h1.82L8 13.311l.805.814h1.82l-1.969-2.021v-1.698h3.719a1.54 1.54 0 0 0 1.531-1.531V3.406H15V2.094Zm-2.406 6.781a.219.219 0 0 1-.219.219h-8.75a.219.219 0 0 1-.219-.219V3.406h9.188v5.469Z"></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--presentationChart"><path d="M15 2.094H1v1.312h1.094v5.469a1.54 1.54 0 0 0 1.531 1.531h3.719v1.707l-1.969 2.012h1.82L8 13.311l.805.814h1.82l-1.969-2.021v-1.698h3.719a1.54 1.54 0 0 0 1.531-1.531V3.406H15V2.094Zm-2.406 6.781a.219.219 0 0 1-.219.219h-8.75a.219.219 0 0 1-.219-.219V3.406h9.188v5.469Z"></path></svg>';
 
 class IconPresentationChart extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPresentationChart extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--presentationChart', '', null, 'IconPresentationChart');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--presentationChart', '', null, 'IconPresentationChart');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--presentationChart');
         this.root.append(svg);
     }

package/dist/IconPresentationChartLarge.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--presentationChartLarge"><path d="M29.125 5.5H2.875v1.75h1.75V19.5a2.625 2.625 0 0 0 2.625 2.625h7.875V24.4l-3.824 3.85h2.468L16 25.992l2.231 2.258h2.459l-3.815-3.867v-2.258h7.875a2.625 2.625 0 0 0 2.625-2.625V7.25h1.75V5.5Zm-3.5 14a.875.875 0 0 1-.875.875H7.25a.875.875 0 0 1-.875-.875V7.25h19.25V19.5ZM12.5 16.875h-1.75v-3.5h1.75v3.5Zm4.375 0h-1.75v-7h1.75v7Zm4.375 0H19.5v-5.25h1.75v5.25Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--presentationChartLarge"><path d="M29.125 5.5H2.875v1.75h1.75V19.5a2.625 2.625 0 0 0 2.625 2.625h7.875V24.4l-3.824 3.85h2.468L16 25.992l2.231 2.258h2.459l-3.815-3.867v-2.258h7.875a2.625 2.625 0 0 0 2.625-2.625V7.25h1.75V5.5Zm-3.5 14a.875.875 0 0 1-.875.875H7.25a.875.875 0 0 1-.875-.875V7.25h19.25V19.5ZM12.5 16.875h-1.75v-3.5h1.75v3.5Zm4.375 0h-1.75v-7h1.75v7Zm4.375 0H19.5v-5.25h1.75v5.25Z"></path></svg>';
 
 class IconPresentationChartLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPresentationChartLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--presentationChartLarge', '', null, 'IconPresentationChartLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--presentationChartLarge', '', null, 'IconPresentationChartLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--presentationChartLarge');
         this.root.append(svg);
     }

package/dist/IconPrinter.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--printer"><path d="M14.781 7.125a1.54 1.54 0 0 0-1.531-1.531h-1.969v-3.5H4.72v3.5H2.75a1.54 1.54 0 0 0-1.531 1.531v5.906h3.5v1.75h6.562v-1.75h3.5V7.125Zm-8.75-3.719H9.97v2.188H6.03V3.406ZM9.97 13.47H6.03v-3.063H9.97v3.063Zm3.5-1.75H11.28v-1.313h.875V9.094H3.844v1.312h.875v1.313H2.53V7.125a.219.219 0 0 1 .219-.219h10.5a.219.219 0 0 1 .219.219v4.594Z"></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--printer"><path d="M14.781 7.125a1.54 1.54 0 0 0-1.531-1.531h-1.969v-3.5H4.72v3.5H2.75a1.54 1.54 0 0 0-1.531 1.531v5.906h3.5v1.75h6.562v-1.75h3.5V7.125Zm-8.75-3.719H9.97v2.188H6.03V3.406ZM9.97 13.47H6.03v-3.063H9.97v3.063Zm3.5-1.75H11.28v-1.313h.875V9.094H3.844v1.312h.875v1.313H2.53V7.125a.219.219 0 0 1 .219-.219h10.5a.219.219 0 0 1 .219.219v4.594Z"></path></svg>';
 
 class IconPrinter extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPrinter extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--printer', '', null, 'IconPrinter');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--printer', '', null, 'IconPrinter');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--printer');
         this.root.append(svg);
     }

package/dist/IconPrinterFilled.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--printerFilled"><path d="M11.281 3.844V1.656H4.72v2.188h6.562Z"></path><path d="M13.25 5.156H2.75a1.54 1.54 0 0 0-1.531 1.532v5.906h3.5V9.969h-.875V8.656h8.312V9.97h-.875v2.625h3.5V6.688a1.54 1.54 0 0 0-1.531-1.532Z"></path><path d="M6.031 9.969v4.375H9.96v-.656h.009v-3.72H6.03Z"></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--printerFilled"><path d="M11.281 3.844V1.656H4.72v2.188h6.562Z"></path><path d="M13.25 5.156H2.75a1.54 1.54 0 0 0-1.531 1.532v5.906h3.5V9.969h-.875V8.656h8.312V9.97h-.875v2.625h3.5V6.688a1.54 1.54 0 0 0-1.531-1.532Z"></path><path d="M6.031 9.969v4.375H9.96v-.656h.009v-3.72H6.03Z"></path></svg>';
 
 class IconPrinterFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPrinterFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--printerFilled', '', null, 'IconPrinterFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--printerFilled', '', null, 'IconPrinterFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--printerFilled');
         this.root.append(svg);
     }

package/dist/IconPrinterFilledLarge.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--printerFilledLarge"><path d="M23 9V3.75H9V9h14Z"></path><path d="M21.25 20.41h-10.5v7.84h10.5v-7.84Z"></path><path d="M26.5 10.75h-21a2.625 2.625 0 0 0-2.625 2.625V24.75H9v-4.375H7.25v-1.75h17.5v1.75H23v4.375h6.125V13.375A2.625 2.625 0 0 0 26.5 10.75Zm-5.25 6.125v-1.75h3.5v1.75h-3.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--printerFilledLarge"><path d="M23 9V3.75H9V9h14Z"></path><path d="M21.25 20.41h-10.5v7.84h10.5v-7.84Z"></path><path d="M26.5 10.75h-21a2.625 2.625 0 0 0-2.625 2.625V24.75H9v-4.375H7.25v-1.75h17.5v1.75H23v4.375h6.125V13.375A2.625 2.625 0 0 0 26.5 10.75Zm-5.25 6.125v-1.75h3.5v1.75h-3.5Z"></path></svg>';
 
 class IconPrinterFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPrinterFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--printerFilledLarge', '', null, 'IconPrinterFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--printerFilledLarge', '', null, 'IconPrinterFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--printerFilledLarge');
         this.root.append(svg);
     }

package/dist/IconPrinterLarge.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--printerLarge"><path d="M29.125 13.375A2.625 2.625 0 0 0 26.5 10.75H23v-7H9v7H5.5a2.625 2.625 0 0 0-2.625 2.625V24.75H9v3.5h14v-3.5h6.125V13.375ZM10.75 5.5h10.5v5.25h-10.5V5.5Zm10.5 21h-10.5v-6.125h10.5V26.5Zm6.125-3.5H23v-2.625h1.75v-1.75H7.25v1.75H9V23H4.625v-9.625A.875.875 0 0 1 5.5 12.5h21a.875.875 0 0 1 .875.875V23Zm-6.125-7.875h3.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--printerLarge"><path d="M29.125 13.375A2.625 2.625 0 0 0 26.5 10.75H23v-7H9v7H5.5a2.625 2.625 0 0 0-2.625 2.625V24.75H9v3.5h14v-3.5h6.125V13.375ZM10.75 5.5h10.5v5.25h-10.5V5.5Zm10.5 21h-10.5v-6.125h10.5V26.5Zm6.125-3.5H23v-2.625h1.75v-1.75H7.25v1.75H9V23H4.625v-9.625A.875.875 0 0 1 5.5 12.5h21a.875.875 0 0 1 .875.875V23Zm-6.125-7.875h3.5v1.75h-3.5v-1.75Z"></path></svg>';
 
 class IconPrinterLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconPrinterLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--printerLarge', '', null, 'IconPrinterLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--printerLarge', '', null, 'IconPrinterLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--printerLarge');
         this.root.append(svg);
     }

package/dist/IconRadioSelected.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--radioSelected"><path d="M8 1.219C4.264 1.219 1.219 4.264 1.219 8c0 3.736 3.045 6.781 6.781 6.781 3.736 0 6.781-3.045 6.781-6.781 0-3.736-3.045-6.781-6.781-6.781Zm0 12.25A5.47 5.47 0 0 1 2.531 8 5.47 5.47 0 0 1 8 2.531 5.47 5.47 0 0 1 13.469 8 5.47 5.47 0 0 1 8 13.469ZM10.625 8A2.621 2.621 0 0 1 8 10.625 2.621 2.621 0 0 1 5.375 8 2.621 2.621 0 0 1 8 5.375 2.621 2.621 0 0 1 10.625 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--radioSelected"><path d="M8 1.219C4.264 1.219 1.219 4.264 1.219 8c0 3.736 3.045 6.781 6.781 6.781 3.736 0 6.781-3.045 6.781-6.781 0-3.736-3.045-6.781-6.781-6.781Zm0 12.25A5.47 5.47 0 0 1 2.531 8 5.47 5.47 0 0 1 8 2.531 5.47 5.47 0 0 1 13.469 8 5.47 5.47 0 0 1 8 13.469ZM10.625 8A2.621 2.621 0 0 1 8 10.625 2.621 2.621 0 0 1 5.375 8 2.621 2.621 0 0 1 8 5.375 2.621 2.621 0 0 1 10.625 8Z"></path></svg>';
 
 class IconRadioSelected extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRadioSelected extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--radioSelected', '', null, 'IconRadioSelected');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--radioSelected', '', null, 'IconRadioSelected');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--radioSelected');
         this.root.append(svg);
     }

package/dist/IconRadioSelectedLarge.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--radioSelectedLarge"><path d="M16 3.75C9.245 3.75 3.75 9.245 3.75 16S9.245 28.25 16 28.25 28.25 22.755 28.25 16 22.755 3.75 16 3.75Zm0 22.75c-5.793 0-10.5-4.707-10.5-10.5S10.207 5.5 16 5.5 26.5 10.207 26.5 16 21.793 26.5 16 26.5ZM21.25 16A5.254 5.254 0 0 1 16 21.25 5.254 5.254 0 0 1 10.75 16 5.254 5.254 0 0 1 16 10.75 5.254 5.254 0 0 1 21.25 16Z"></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--radioSelectedLarge"><path d="M16 3.75C9.245 3.75 3.75 9.245 3.75 16S9.245 28.25 16 28.25 28.25 22.755 28.25 16 22.755 3.75 16 3.75Zm0 22.75c-5.793 0-10.5-4.707-10.5-10.5S10.207 5.5 16 5.5 26.5 10.207 26.5 16 21.793 26.5 16 26.5ZM21.25 16A5.254 5.254 0 0 1 16 21.25 5.254 5.254 0 0 1 10.75 16 5.254 5.254 0 0 1 16 10.75 5.254 5.254 0 0 1 21.25 16Z"></path></svg>';
 
 class IconRadioSelectedLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRadioSelectedLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--radioSelectedLarge', '', null, 'IconRadioSelectedLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--radioSelectedLarge', '', null, 'IconRadioSelectedLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--radioSelectedLarge');
         this.root.append(svg);
     }

package/dist/IconRadioUnselected.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--radioUnselected"><path d="M8 1.219C4.264 1.219 1.219 4.264 1.219 8c0 3.736 3.045 6.781 6.781 6.781 3.736 0 6.781-3.045 6.781-6.781 0-3.736-3.045-6.781-6.781-6.781Zm0 12.25A5.47 5.47 0 0 1 2.531 8 5.47 5.47 0 0 1 8 2.531 5.47 5.47 0 0 1 13.469 8 5.47 5.47 0 0 1 8 13.469Z"></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--radioUnselected"><path d="M8 1.219C4.264 1.219 1.219 4.264 1.219 8c0 3.736 3.045 6.781 6.781 6.781 3.736 0 6.781-3.045 6.781-6.781 0-3.736-3.045-6.781-6.781-6.781Zm0 12.25A5.47 5.47 0 0 1 2.531 8 5.47 5.47 0 0 1 8 2.531 5.47 5.47 0 0 1 13.469 8 5.47 5.47 0 0 1 8 13.469Z"></path></svg>';
 
 class IconRadioUnselected extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRadioUnselected extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--radioUnselected', '', null, 'IconRadioUnselected');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--radioUnselected', '', null, 'IconRadioUnselected');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--radioUnselected');
         this.root.append(svg);
     }

package/dist/IconRadioUnselectedLarge.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--radioUnselectedLarge"><path d="M16 3.75C9.245 3.75 3.75 9.245 3.75 16S9.245 28.25 16 28.25 28.25 22.755 28.25 16 22.755 3.75 16 3.75Zm0 22.75c-5.793 0-10.5-4.707-10.5-10.5S10.207 5.5 16 5.5 26.5 10.207 26.5 16 21.793 26.5 16 26.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--radioUnselectedLarge"><path d="M16 3.75C9.245 3.75 3.75 9.245 3.75 16S9.245 28.25 16 28.25 28.25 22.755 28.25 16 22.755 3.75 16 3.75Zm0 22.75c-5.793 0-10.5-4.707-10.5-10.5S10.207 5.5 16 5.5 26.5 10.207 26.5 16 21.793 26.5 16 26.5Z"></path></svg>';
 
 class IconRadioUnselectedLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRadioUnselectedLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--radioUnselectedLarge', '', null, 'IconRadioUnselectedLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--radioUnselectedLarge', '', null, 'IconRadioUnselectedLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--radioUnselectedLarge');
         this.root.append(svg);
     }

package/dist/IconReceipt.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--receipt"><path d="M11.1 2.57a.23.23 0 0 1-.2 0L8 1.26 5.1 2.57a.23.23 0 0 1-.2 0L1.25.92v14.16l3.65-1.65a.23.23 0 0 1 .2 0L8 14.74l2.9-1.31a.23.23 0 0 1 .2 0l3.65 1.65V.92L11.1 2.57Zm2.15 10.19-1.53-.69a1.721 1.721 0 0 0-1.44 0L8 13.1l-2.28-1a1.701 1.701 0 0 0-1.44 0l-1.53.69V3.24l1.53.69a1.72 1.72 0 0 0 1.44 0L8 2.9l2.28 1a1.7 1.7 0 0 0 1.44 0l1.53-.69v9.55Z"></path><path d="M11 5.75H5v1.5h6v-1.5Z"></path><path d="M10 8.75H6v1.5h4v-1.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--receipt"><path d="M11.1 2.57a.23.23 0 0 1-.2 0L8 1.26 5.1 2.57a.23.23 0 0 1-.2 0L1.25.92v14.16l3.65-1.65a.23.23 0 0 1 .2 0L8 14.74l2.9-1.31a.23.23 0 0 1 .2 0l3.65 1.65V.92L11.1 2.57Zm2.15 10.19-1.53-.69a1.721 1.721 0 0 0-1.44 0L8 13.1l-2.28-1a1.701 1.701 0 0 0-1.44 0l-1.53.69V3.24l1.53.69a1.72 1.72 0 0 0 1.44 0L8 2.9l2.28 1a1.7 1.7 0 0 0 1.44 0l1.53-.69v9.55Z"></path><path d="M11 5.75H5v1.5h6v-1.5Z"></path><path d="M10 8.75H6v1.5h4v-1.5Z"></path></svg>';
 
 class IconReceipt extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconReceipt extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--receipt', '', null, 'IconReceipt');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--receipt', '', null, 'IconReceipt');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--receipt');
         this.root.append(svg);
     }

package/dist/IconReceiptError.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--receiptError"><path d="M10.719 3.444a.201.201 0 0 1-.175 0L8.006 2.297 5.47 3.444a.201.201 0 0 1-.175 0L2.1 2v12.39l3.194-1.444a.202.202 0 0 1 .175 0l2.537 1.146 2.538-1.146a.202.202 0 0 1 .175 0l3.194 1.444V2l-3.194 1.444ZM12.6 12.36l-1.339-.604a1.505 1.505 0 0 0-1.26 0l-1.995.902-1.995-.875a1.488 1.488 0 0 0-1.26 0l-1.338.603V4.03l1.338.604a1.505 1.505 0 0 0 1.26 0l1.995-.902 1.995.875a1.488 1.488 0 0 0 1.26 0l1.34-.603v8.356Z"></path><path d="M9.979 7.131 8.938 8.2l1.076 1.067-.936.937L8.01 9.126l-1.067 1.077-.937-.937L7.083 8.2 6.006 7.13l.937-.936L8.01 7.271l1.068-1.076.9.936Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--receiptError"><path d="M10.719 3.444a.201.201 0 0 1-.175 0L8.006 2.297 5.47 3.444a.201.201 0 0 1-.175 0L2.1 2v12.39l3.194-1.444a.202.202 0 0 1 .175 0l2.537 1.146 2.538-1.146a.202.202 0 0 1 .175 0l3.194 1.444V2l-3.194 1.444ZM12.6 12.36l-1.339-.604a1.505 1.505 0 0 0-1.26 0l-1.995.902-1.995-.875a1.488 1.488 0 0 0-1.26 0l-1.338.603V4.03l1.338.604a1.505 1.505 0 0 0 1.26 0l1.995-.902 1.995.875a1.488 1.488 0 0 0 1.26 0l1.34-.603v8.356Z"></path><path d="M9.979 7.131 8.938 8.2l1.076 1.067-.936.937L8.01 9.126l-1.067 1.077-.937-.937L7.083 8.2 6.006 7.13l.937-.936L8.01 7.271l1.068-1.076.9.936Z"></path></svg>';
 
 class IconReceiptError extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconReceiptError extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--receiptError', '', null, 'IconReceiptError');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--receiptError', '', null, 'IconReceiptError');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--receiptError');
         this.root.append(svg);
     }

package/dist/IconReceiptErrorLarge.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--receiptErrorLarge"><path d="M19.5 11.625h-7v1.75h7v-1.75Z"></path><path d="M15.65 15.125h-4.9v1.75h3.447a8.444 8.444 0 0 1 1.453-1.75Z"></path><path d="m12.5 25.494-2.572-1.479a1.75 1.75 0 0 0-1.69 0l-.988.499V7.486l.989.525a1.75 1.75 0 0 0 1.688 0L12.5 6.506l2.625 1.488a1.75 1.75 0 0 0 1.75 0L19.5 6.506l2.625 1.479a1.75 1.75 0 0 0 1.689 0l.936-.499v6.239a8.361 8.361 0 0 1 1.75 1.085V4.573L22.939 6.47 19.5 4.494 16 6.463l-3.5-1.97-3.439 1.978L5.5 4.573v22.854l3.561-1.898 3.439 1.977 2.161-1.216a8.642 8.642 0 0 1-.875-1.496l-1.286.7Z"></path><path d="M27.27 18.861c-.288-.702-.737-1.315-1.242-1.881a6.47 6.47 0 0 0-.604-.595 6.501 6.501 0 0 0-8.549 0 6.44 6.44 0 0 0-1.855 2.625 6.447 6.447 0 0 0-.394 1.75v.551a6.563 6.563 0 1 0 12.644-2.45Zm-6.125 7.298a4.813 4.813 0 0 1-4.813-4.813v-.551a4.78 4.78 0 0 1 .56-1.75c.18-.318.397-.611.648-.875a4.786 4.786 0 0 1 7.149 0c.251.264.469.557.647.875a4.78 4.78 0 0 1 .56 1.75v.551a4.822 4.822 0 0 1-4.751 4.813Z"></path><path d="m22.858 24.353-1.735-1.743-1.734 1.743-1.242-1.242 1.743-1.734-1.743-1.735 1.242-1.242 1.735 1.743 1.734-1.743 1.242 1.242-1.743 1.735L24.1 23.11l-1.242 1.242Z"></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--receiptErrorLarge"><path d="M19.5 11.625h-7v1.75h7v-1.75Z"></path><path d="M15.65 15.125h-4.9v1.75h3.447a8.444 8.444 0 0 1 1.453-1.75Z"></path><path d="m12.5 25.494-2.572-1.479a1.75 1.75 0 0 0-1.69 0l-.988.499V7.486l.989.525a1.75 1.75 0 0 0 1.688 0L12.5 6.506l2.625 1.488a1.75 1.75 0 0 0 1.75 0L19.5 6.506l2.625 1.479a1.75 1.75 0 0 0 1.689 0l.936-.499v6.239a8.361 8.361 0 0 1 1.75 1.085V4.573L22.939 6.47 19.5 4.494 16 6.463l-3.5-1.97-3.439 1.978L5.5 4.573v22.854l3.561-1.898 3.439 1.977 2.161-1.216a8.642 8.642 0 0 1-.875-1.496l-1.286.7Z"></path><path d="M27.27 18.861c-.288-.702-.737-1.315-1.242-1.881a6.47 6.47 0 0 0-.604-.595 6.501 6.501 0 0 0-8.549 0 6.44 6.44 0 0 0-1.855 2.625 6.447 6.447 0 0 0-.394 1.75v.551a6.563 6.563 0 1 0 12.644-2.45Zm-6.125 7.298a4.813 4.813 0 0 1-4.813-4.813v-.551a4.78 4.78 0 0 1 .56-1.75c.18-.318.397-.611.648-.875a4.786 4.786 0 0 1 7.149 0c.251.264.469.557.647.875a4.78 4.78 0 0 1 .56 1.75v.551a4.822 4.822 0 0 1-4.751 4.813Z"></path><path d="m22.858 24.353-1.735-1.743-1.734 1.743-1.242-1.242 1.743-1.734-1.743-1.735 1.242-1.242 1.735 1.743 1.734-1.743 1.242 1.242-1.743 1.735L24.1 23.11l-1.242 1.242Z"></path></svg>';
 
 class IconReceiptErrorLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconReceiptErrorLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--receiptErrorLarge', '', null, 'IconReceiptErrorLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--receiptErrorLarge', '', null, 'IconReceiptErrorLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--receiptErrorLarge');
         this.root.append(svg);
     }

package/dist/IconReceiptLarge.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--receiptLarge"><path d="M21.25 15.125h-10.5v1.75h10.5v-1.75Z"></path><path d="M19.5 18.625h-7v1.75h7v-1.75Z"></path><path d="M19.5 11.625h-7v1.75h7v-1.75Z"></path><path d="M22.939 6.471 19.5 4.494 16 6.463l-3.5-1.97-3.439 1.978L5.5 4.573v22.854l3.561-1.898 3.439 1.977 3.5-1.968 3.5 1.968 3.43-1.977 3.57 1.898V4.573L22.939 6.47Zm1.811 18.043-.989-.525a1.75 1.75 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.499V7.486l.989.525a1.75 1.75 0 0 0 1.688 0L12.5 6.506l2.625 1.488a1.75 1.75 0 0 0 1.75 0L19.5 6.506l2.625 1.479a1.75 1.75 0 0 0 1.689 0l.936-.499v17.028Z"></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--receiptLarge"><path d="M21.25 15.125h-10.5v1.75h10.5v-1.75Z"></path><path d="M19.5 18.625h-7v1.75h7v-1.75Z"></path><path d="M19.5 11.625h-7v1.75h7v-1.75Z"></path><path d="M22.939 6.471 19.5 4.494 16 6.463l-3.5-1.97-3.439 1.978L5.5 4.573v22.854l3.561-1.898 3.439 1.977 3.5-1.968 3.5 1.968 3.43-1.977 3.57 1.898V4.573L22.939 6.47Zm1.811 18.043-.989-.525a1.75 1.75 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.499V7.486l.989.525a1.75 1.75 0 0 0 1.688 0L12.5 6.506l2.625 1.488a1.75 1.75 0 0 0 1.75 0L19.5 6.506l2.625 1.479a1.75 1.75 0 0 0 1.689 0l.936-.499v17.028Z"></path></svg>';
 
 class IconReceiptLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconReceiptLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--receiptLarge', '', null, 'IconReceiptLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--receiptLarge', '', null, 'IconReceiptLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--receiptLarge');
         this.root.append(svg);
     }

package/dist/IconReceiptSuccess.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--receiptSuccess"><path d="M10.713 3.249a.201.201 0 0 1-.175 0L8 2.102 5.463 3.25a.201.201 0 0 1-.176 0L2.094 1.805v12.39l3.193-1.444a.202.202 0 0 1 .176 0L8 13.898l2.537-1.147a.202.202 0 0 1 .175 0l3.194 1.444V1.805l-3.194 1.444Zm1.88 8.916-1.338-.604a1.506 1.506 0 0 0-1.26 0L8 12.463l-1.995-.875a1.488 1.488 0 0 0-1.26 0l-1.339.603V3.835l1.339.604a1.505 1.505 0 0 0 1.26 0L8 3.537l1.995.875a1.487 1.487 0 0 0 1.26 0l1.339-.603v8.356Z"></path><path d="m11.019 6.547-.963-.953-2.905 2.905-1.207-1.217-.963.954 2.17 2.17 3.868-3.859Z"></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--receiptSuccess"><path d="M10.713 3.249a.201.201 0 0 1-.175 0L8 2.102 5.463 3.25a.201.201 0 0 1-.176 0L2.094 1.805v12.39l3.193-1.444a.202.202 0 0 1 .176 0L8 13.898l2.537-1.147a.202.202 0 0 1 .175 0l3.194 1.444V1.805l-3.194 1.444Zm1.88 8.916-1.338-.604a1.506 1.506 0 0 0-1.26 0L8 12.463l-1.995-.875a1.488 1.488 0 0 0-1.26 0l-1.339.603V3.835l1.339.604a1.505 1.505 0 0 0 1.26 0L8 3.537l1.995.875a1.487 1.487 0 0 0 1.26 0l1.339-.603v8.356Z"></path><path d="m11.019 6.547-.963-.953-2.905 2.905-1.207-1.217-.963.954 2.17 2.17 3.868-3.859Z"></path></svg>';
 
 class IconReceiptSuccess extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconReceiptSuccess extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--receiptSuccess', '', null, 'IconReceiptSuccess');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--receiptSuccess', '', null, 'IconReceiptSuccess');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--receiptSuccess');
         this.root.append(svg);
     }

package/dist/IconReceiptSuccessLarge.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--receiptSuccessLarge"><path d="M19.5 11.625h-7v1.75h7v-1.75Z"></path><path d="M15.65 15.125h-4.9v1.75h3.447a8.444 8.444 0 0 1 1.453-1.75Z"></path><path d="m12.5 25.494-2.572-1.479a1.75 1.75 0 0 0-1.69 0l-.988.499V7.486l.989.525a1.75 1.75 0 0 0 1.688 0L12.5 6.506l2.625 1.488a1.75 1.75 0 0 0 1.75 0L19.5 6.506l2.625 1.479a1.75 1.75 0 0 0 1.689 0l.936-.499v6.239a8.361 8.361 0 0 1 1.75 1.085V4.573L22.939 6.47 19.5 4.494 16 6.463l-3.5-1.97-3.439 1.978L5.5 4.573v22.854l3.561-1.898 3.439 1.977 2.161-1.216a8.642 8.642 0 0 1-.875-1.496l-1.286.7Z"></path><path d="M27.226 18.896a6.677 6.677 0 0 0-1.802-2.511 6.501 6.501 0 0 0-8.549 0 6.44 6.44 0 0 0-1.855 2.625 6.447 6.447 0 0 0-.394 1.75v.551a6.563 6.563 0 1 0 12.644-2.45l-.044.035Zm-6.081 7.263a4.813 4.813 0 0 1-4.813-4.813v-.551a4.78 4.78 0 0 1 .56-1.75c.18-.318.397-.611.648-.875a4.786 4.786 0 0 1 7.149 0c.251.264.469.557.647.875a4.78 4.78 0 0 1 .56 1.75v.551a4.822 4.822 0 0 1-4.751 4.813Z"></path><path d="m24.418 20.34-1.243-1.234-2.879 2.879-1.19-1.19-1.242 1.234 2.432 2.432 4.122-4.121Z"></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--receiptSuccessLarge"><path d="M19.5 11.625h-7v1.75h7v-1.75Z"></path><path d="M15.65 15.125h-4.9v1.75h3.447a8.444 8.444 0 0 1 1.453-1.75Z"></path><path d="m12.5 25.494-2.572-1.479a1.75 1.75 0 0 0-1.69 0l-.988.499V7.486l.989.525a1.75 1.75 0 0 0 1.688 0L12.5 6.506l2.625 1.488a1.75 1.75 0 0 0 1.75 0L19.5 6.506l2.625 1.479a1.75 1.75 0 0 0 1.689 0l.936-.499v6.239a8.361 8.361 0 0 1 1.75 1.085V4.573L22.939 6.47 19.5 4.494 16 6.463l-3.5-1.97-3.439 1.978L5.5 4.573v22.854l3.561-1.898 3.439 1.977 2.161-1.216a8.642 8.642 0 0 1-.875-1.496l-1.286.7Z"></path><path d="M27.226 18.896a6.677 6.677 0 0 0-1.802-2.511 6.501 6.501 0 0 0-8.549 0 6.44 6.44 0 0 0-1.855 2.625 6.447 6.447 0 0 0-.394 1.75v.551a6.563 6.563 0 1 0 12.644-2.45l-.044.035Zm-6.081 7.263a4.813 4.813 0 0 1-4.813-4.813v-.551a4.78 4.78 0 0 1 .56-1.75c.18-.318.397-.611.648-.875a4.786 4.786 0 0 1 7.149 0c.251.264.469.557.647.875a4.78 4.78 0 0 1 .56 1.75v.551a4.822 4.822 0 0 1-4.751 4.813Z"></path><path d="m24.418 20.34-1.243-1.234-2.879 2.879-1.19-1.19-1.242 1.234 2.432 2.432 4.122-4.121Z"></path></svg>';
 
 class IconReceiptSuccessLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconReceiptSuccessLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--receiptSuccessLarge', '', null, 'IconReceiptSuccessLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--receiptSuccessLarge', '', null, 'IconReceiptSuccessLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--receiptSuccessLarge');
         this.root.append(svg);
     }

package/dist/IconRecycle.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--recycle"><path d="M14.58 12.279a1.496 1.496 0 0 1-1.33.778h-3.246l.945.928-.928.936-2.546-2.546 2.546-2.529.928.937-.945.936h3.246a.21.21 0 0 0 .193-.114.184.184 0 0 0 0-.201l-1.55-2.625 1.13-.665 1.557 2.625a1.505 1.505 0 0 1 0 1.54ZM8.193 2.566l1.6 2.704-1.33-.385-.367 1.26 3.448.98 1.006-3.412-1.26-.377-.367 1.252L9.32 1.875a1.549 1.549 0 0 0-2.625 0L5.218 4.369l1.128.665 1.462-2.468c.113-.183.27-.183.385 0Zm-3.86 5.872.43 1.312 1.25-.402-1.075-3.36-3.43 1.058.367 1.252 1.208-.368-1.654 2.826a1.531 1.531 0 0 0 1.321 2.301h3.028v-1.312H2.75a.21.21 0 0 1-.192-.114.184.184 0 0 1 0-.201l1.776-2.992Z"></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--recycle"><path d="M14.58 12.279a1.496 1.496 0 0 1-1.33.778h-3.246l.945.928-.928.936-2.546-2.546 2.546-2.529.928.937-.945.936h3.246a.21.21 0 0 0 .193-.114.184.184 0 0 0 0-.201l-1.55-2.625 1.13-.665 1.557 2.625a1.505 1.505 0 0 1 0 1.54ZM8.193 2.566l1.6 2.704-1.33-.385-.367 1.26 3.448.98 1.006-3.412-1.26-.377-.367 1.252L9.32 1.875a1.549 1.549 0 0 0-2.625 0L5.218 4.369l1.128.665 1.462-2.468c.113-.183.27-.183.385 0Zm-3.86 5.872.43 1.312 1.25-.402-1.075-3.36-3.43 1.058.367 1.252 1.208-.368-1.654 2.826a1.531 1.531 0 0 0 1.321 2.301h3.028v-1.312H2.75a.21.21 0 0 1-.192-.114.184.184 0 0 1 0-.201l1.776-2.992Z"></path></svg>';
 
 class IconRecycle extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRecycle extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--recycle', '', null, 'IconRecycle');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--recycle', '', null, 'IconRecycle');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--recycle');
         this.root.append(svg);
     }

package/dist/IconRecycleLarge.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--recycleLarge"><path d="M28.364 24.33a2.502 2.502 0 0 1-2.205 1.295H19.07l2.441 2.415-1.233 1.242-4.585-4.532 4.585-4.541 1.233 1.242-2.44 2.424h7.087a.78.78 0 0 0 .69-.402.76.76 0 0 0 0-.762l-2.974-4.961 1.505-.875 2.957 4.996a2.476 2.476 0 0 1 .027 2.459ZM16.874 5.824l3.5 5.967-3.438-.997-.49 1.706 6.213 1.75 1.82-6.125-1.68-.499-.954 3.212-3.5-5.907a2.555 2.555 0 0 0-4.375 0L11.187 9.64l1.505.875 2.783-4.69a.806.806 0 0 1 1.374 0h.026Zm-7.56 10.5 1.06 3.368 1.67-.533-1.924-6.125-6.204 1.872.516 1.68L7.67 15.58l-3.693 6.23a2.476 2.476 0 0 0 0 2.52 2.52 2.52 0 0 0 2.197 1.295h5.766v-1.75H6.174a.761.761 0 0 1-.674-.411.735.735 0 0 1 0-.761l3.815-6.38Z"></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--recycleLarge"><path d="M28.364 24.33a2.502 2.502 0 0 1-2.205 1.295H19.07l2.441 2.415-1.233 1.242-4.585-4.532 4.585-4.541 1.233 1.242-2.44 2.424h7.087a.78.78 0 0 0 .69-.402.76.76 0 0 0 0-.762l-2.974-4.961 1.505-.875 2.957 4.996a2.476 2.476 0 0 1 .027 2.459ZM16.874 5.824l3.5 5.967-3.438-.997-.49 1.706 6.213 1.75 1.82-6.125-1.68-.499-.954 3.212-3.5-5.907a2.555 2.555 0 0 0-4.375 0L11.187 9.64l1.505.875 2.783-4.69a.806.806 0 0 1 1.374 0h.026Zm-7.56 10.5 1.06 3.368 1.67-.533-1.924-6.125-6.204 1.872.516 1.68L7.67 15.58l-3.693 6.23a2.476 2.476 0 0 0 0 2.52 2.52 2.52 0 0 0 2.197 1.295h5.766v-1.75H6.174a.761.761 0 0 1-.674-.411.735.735 0 0 1 0-.761l3.815-6.38Z"></path></svg>';
 
 class IconRecycleLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRecycleLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--recycleLarge', '', null, 'IconRecycleLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--recycleLarge', '', null, 'IconRecycleLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--recycleLarge');
         this.root.append(svg);
     }