@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/dist/IconRefresh.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--refresh"><path d="M12.594 1.875v2.791L12.48 4.5a5.67 5.67 0 1 0 1.076 4.629l-1.286-.254a4.375 4.375 0 1 1-.875-3.553l.21.272h-2.73v1.312h3.938a1.094 1.094 0 0 0 1.093-1.093V1.874h-1.312Z"></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--refresh"><path d="M12.594 1.875v2.791L12.48 4.5a5.67 5.67 0 1 0 1.076 4.629l-1.286-.254a4.375 4.375 0 1 1-.875-3.553l.21.272h-2.73v1.312h3.938a1.094 1.094 0 0 0 1.093-1.093V1.874h-1.312Z"></path></svg>';
 
 class IconRefresh extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRefresh extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--refresh', '', null, 'IconRefresh');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--refresh', '', null, 'IconRefresh');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--refresh');
         this.root.append(svg);
     }

package/dist/IconRefreshLarge.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--refreshLarge"><path d="M18.406 12.797h6.414a1.68 1.68 0 0 0 1.68-1.68V4.774h-1.75v5.433l-.333-.55-.052-.07a10.5 10.5 0 1 0 2.047 7.717l-1.75-.228a8.75 8.75 0 1 1-1.75-6.466l.263.438h-4.769v1.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--refreshLarge"><path d="M18.406 12.797h6.414a1.68 1.68 0 0 0 1.68-1.68V4.774h-1.75v5.433l-.333-.55-.052-.07a10.5 10.5 0 1 0 2.047 7.717l-1.75-.228a8.75 8.75 0 1 1-1.75-6.466l.263.438h-4.769v1.75Z"></path></svg>';
 
 class IconRefreshLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRefreshLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--refreshLarge', '', null, 'IconRefreshLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--refreshLarge', '', null, 'IconRefreshLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--refreshLarge');
         this.root.append(svg);
     }

package/dist/IconResize.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--resize"><path d="M.928 10.325h.927l8.47-8.47V.928L.928 10.325Z"></path><path d="M10.325.928V0L0 10.325h.928L10.325.928Z"></path><path d="m6.501 10.325 3.824-3.824v-.927l-4.751 4.751H6.5Z"></path><path d="M7.429 10.325h-.928l3.824-3.824v.928L7.43 10.325Z"></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--resize"><path d="M.928 10.325h.927l8.47-8.47V.928L.928 10.325Z"></path><path d="M10.325.928V0L0 10.325h.928L10.325.928Z"></path><path d="m6.501 10.325 3.824-3.824v-.927l-4.751 4.751H6.5Z"></path><path d="M7.429 10.325h-.928l3.824-3.824v.928L7.43 10.325Z"></path></svg>';
 
 class IconResize extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconResize extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--resize', '', null, 'IconResize');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--resize', '', null, 'IconResize');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--resize');
         this.root.append(svg);
     }

package/dist/IconResizeLarge.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--resizeLarge"><path d="M22.726 2.243V1L1 22.735h1.243L22.726 2.243Z"></path><path d="M2.243 22.735h1.233l19.25-19.259V2.243L2.243 22.735Z"></path><path d="M14.099 22.735h1.233l7.394-7.402v-1.234L14.1 22.735Z"></path><path d="m14.099 22.735 8.627-8.636v-1.234l-9.861 9.87h1.234Z"></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--resizeLarge"><path d="M22.726 2.243V1L1 22.735h1.243L22.726 2.243Z"></path><path d="M2.243 22.735h1.233l19.25-19.259V2.243L2.243 22.735Z"></path><path d="M14.099 22.735h1.233l7.394-7.402v-1.234L14.1 22.735Z"></path><path d="m14.099 22.735 8.627-8.636v-1.234l-9.861 9.87h1.234Z"></path></svg>';
 
 class IconResizeLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconResizeLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--resizeLarge', '', null, 'IconResizeLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--resizeLarge', '', null, 'IconResizeLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--resizeLarge');
         this.root.append(svg);
     }

package/dist/IconRestaurant.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--restaurant"><path d="m13.863 3.485-1.19-1.015a1.487 1.487 0 0 0-.998-.376H4.351c-.365 0-.719.13-.997.367L2.155 3.485a2.572 2.572 0 0 0-.936 1.943 2.511 2.511 0 0 0 .875 1.88v6.598h11.812V7.31a2.518 2.518 0 0 0 .875-1.881 2.623 2.623 0 0 0-.918-1.943Zm-5.05 9.109H7.187v-1.216a.814.814 0 0 1 1.628 0v1.216Zm3.78 0h-2.467v-1.216a2.126 2.126 0 0 0-4.252 0v1.216H3.406V8a3.167 3.167 0 0 0 2.625-.621 3.132 3.132 0 0 0 3.903 0A3.167 3.167 0 0 0 12.559 8h.043l-.008 4.594Zm-.297-5.889a1.75 1.75 0 0 1-1.793-.656H9.4A1.654 1.654 0 0 1 8 6.74a1.654 1.654 0 0 1-1.4-.691H5.497a1.75 1.75 0 0 1-1.75.656 1.383 1.383 0 0 1-1.216-1.277 1.243 1.243 0 0 1 .473-.928L4.21 3.459a.201.201 0 0 1 .14-.053h7.324a.201.201 0 0 1 .14.053l1.19 1.041a1.26 1.26 0 0 1 .464.945 1.383 1.383 0 0 1-1.173 1.26Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--restaurant"><path d="m13.863 3.485-1.19-1.015a1.487 1.487 0 0 0-.998-.376H4.351c-.365 0-.719.13-.997.367L2.155 3.485a2.572 2.572 0 0 0-.936 1.943 2.511 2.511 0 0 0 .875 1.88v6.598h11.812V7.31a2.518 2.518 0 0 0 .875-1.881 2.623 2.623 0 0 0-.918-1.943Zm-5.05 9.109H7.187v-1.216a.814.814 0 0 1 1.628 0v1.216Zm3.78 0h-2.467v-1.216a2.126 2.126 0 0 0-4.252 0v1.216H3.406V8a3.167 3.167 0 0 0 2.625-.621 3.132 3.132 0 0 0 3.903 0A3.167 3.167 0 0 0 12.559 8h.043l-.008 4.594Zm-.297-5.889a1.75 1.75 0 0 1-1.793-.656H9.4A1.654 1.654 0 0 1 8 6.74a1.654 1.654 0 0 1-1.4-.691H5.497a1.75 1.75 0 0 1-1.75.656 1.383 1.383 0 0 1-1.216-1.277 1.243 1.243 0 0 1 .473-.928L4.21 3.459a.201.201 0 0 1 .14-.053h7.324a.201.201 0 0 1 .14.053l1.19 1.041a1.26 1.26 0 0 1 .464.945 1.383 1.383 0 0 1-1.173 1.26Z"></path></svg>';
 
 class IconRestaurant extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRestaurant extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--restaurant', '', null, 'IconRestaurant');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--restaurant', '', null, 'IconRestaurant');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--restaurant');
         this.root.append(svg);
     }

package/dist/IconRestaurantFilled.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--restaurantFilled"><path d="M12.795 9.277c-.07.018-.14.018-.201.027-.901.131-1.838.008-2.643-.385-.437.218-.919.35-1.409.411A5.467 5.467 0 0 1 8 9.365a4.587 4.587 0 0 1-1.951-.446c-.805.393-1.742.516-2.643.385-.07-.009-.14-.009-.21-.027-.157-.026-.297-.078-.446-.13a3.576 3.576 0 0 1-.656-.272v5.023h11.812V8.875c-.21.105-.429.193-.656.271-.149.044-.297.096-.455.131Zm-5.618 3.317v-1.216c0-.447.368-.814.814-.814.446 0 .814.367.814.813v1.217H7.177Z"></path><path d="M14.72 4.885a2.626 2.626 0 0 0-.857-1.4l-1.103-.954-.079-.07c-.07-.061-.157-.096-.236-.14a1.487 1.487 0 0 0-.761-.227H4.35a1.5 1.5 0 0 0-.472.087c-.035.009-.07.026-.114.044-.149.061-.289.14-.411.245L2.146 3.502c-.595.508-.936 1.217-.936 1.952 0 .157.017.306.044.455.105.551.402 1.05.831 1.426a2.706 2.706 0 0 0 .656.438c.21.096.42.183.656.227 0 0 .027.009.044.018.219.043.438.06.656.052.07 0 .14-.009.21-.018.14-.008.29-.026.43-.052.078-.018.165-.044.244-.061.123-.035.245-.079.359-.131.079-.035.166-.07.236-.114.035-.018.079-.035.123-.061h.673l.044.026c.053.035.114.061.175.087.079.044.158.079.245.105.079.027.158.061.236.079.062.018.114.035.175.044.105.026.202.043.307.061h.035c.262.035.533.035.796 0h.035c.105-.018.21-.044.315-.061.061-.018.114-.027.175-.044.079-.026.166-.052.245-.079l.236-.105c.061-.026.123-.052.175-.087.018 0 .026-.018.044-.018h.674l.122.053c.079.043.166.079.245.114.114.052.228.087.35.122.088.026.167.053.254.07.131.026.262.044.402.053.08 0 .158.017.237.017.21 0 .428-.018.647-.053 0 0 .035-.008.044-.017.236-.053.455-.131.656-.228.245-.113.464-.262.657-.437.542-.481.875-1.155.875-1.89a2.17 2.17 0 0 0-.062-.534l.009-.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 16 16" class="c-pieIcon c-pieIcon--restaurantFilled"><path d="M12.795 9.277c-.07.018-.14.018-.201.027-.901.131-1.838.008-2.643-.385-.437.218-.919.35-1.409.411A5.467 5.467 0 0 1 8 9.365a4.587 4.587 0 0 1-1.951-.446c-.805.393-1.742.516-2.643.385-.07-.009-.14-.009-.21-.027-.157-.026-.297-.078-.446-.13a3.576 3.576 0 0 1-.656-.272v5.023h11.812V8.875c-.21.105-.429.193-.656.271-.149.044-.297.096-.455.131Zm-5.618 3.317v-1.216c0-.447.368-.814.814-.814.446 0 .814.367.814.813v1.217H7.177Z"></path><path d="M14.72 4.885a2.626 2.626 0 0 0-.857-1.4l-1.103-.954-.079-.07c-.07-.061-.157-.096-.236-.14a1.487 1.487 0 0 0-.761-.227H4.35a1.5 1.5 0 0 0-.472.087c-.035.009-.07.026-.114.044-.149.061-.289.14-.411.245L2.146 3.502c-.595.508-.936 1.217-.936 1.952 0 .157.017.306.044.455.105.551.402 1.05.831 1.426a2.706 2.706 0 0 0 .656.438c.21.096.42.183.656.227 0 0 .027.009.044.018.219.043.438.06.656.052.07 0 .14-.009.21-.018.14-.008.29-.026.43-.052.078-.018.165-.044.244-.061.123-.035.245-.079.359-.131.079-.035.166-.07.236-.114.035-.018.079-.035.123-.061h.673l.044.026c.053.035.114.061.175.087.079.044.158.079.245.105.079.027.158.061.236.079.062.018.114.035.175.044.105.026.202.043.307.061h.035c.262.035.533.035.796 0h.035c.105-.018.21-.044.315-.061.061-.018.114-.027.175-.044.079-.026.166-.052.245-.079l.236-.105c.061-.026.123-.052.175-.087.018 0 .026-.018.044-.018h.674l.122.053c.079.043.166.079.245.114.114.052.228.087.35.122.088.026.167.053.254.07.131.026.262.044.402.053.08 0 .158.017.237.017.21 0 .428-.018.647-.053 0 0 .035-.008.044-.017.236-.053.455-.131.656-.228.245-.113.464-.262.657-.437.542-.481.875-1.155.875-1.89a2.17 2.17 0 0 0-.062-.534l.009-.026Z"></path></svg>';
 
 class IconRestaurantFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRestaurantFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--restaurantFilled', '', null, 'IconRestaurantFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--restaurantFilled', '', null, 'IconRestaurantFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--restaurantFilled');
         this.root.append(svg);
     }

package/dist/IconRestaurantFilledLarge.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--restaurantFilledLarge"><path d="M26.5 15.912c-.079.01-.149.027-.227.035a5.715 5.715 0 0 1-.762.044 6.178 6.178 0 0 1-3.167-.866c-1.917 1.137-4.419 1.137-6.335 0-1.925 1.137-4.428 1.137-6.344 0A6.13 6.13 0 0 1 6.603 16a6.51 6.51 0 0 1-1.094-.096 7.088 7.088 0 0 1-.875-.21 6.33 6.33 0 0 1-.875-.359v12.924H28.25V15.36c-.28.14-.569.263-.875.359-.28.087-.578.149-.875.201v-.008ZM9 26.5v-5.25c0-.962.787-1.75 1.75-1.75s1.75.788 1.75 1.75v5.25H9Zm14-7.875v3.5h-5.25v-3.5H23Z"></path><path d="M28.74 6.454 26.806 4.51s-.079-.061-.114-.096a2.613 2.613 0 0 0-1.74-.674H7.091c-.69 0-1.347.271-1.846.753l-1.969 1.96A4.32 4.32 0 0 0 2 9.507v.15c0 .297.035.594.087.892.027.122.08.245.114.367.044.166.088.333.158.49.052.123.122.236.192.359.079.149.149.297.236.438.07.104.158.2.246.306.096.122.175.245.288.358.018.018.035.027.053.044.017.018.026.035.035.044.087.088.183.14.271.219.026.026.052.043.079.07.105.087.21.184.323.262.044.035.106.053.15.088a4.324 4.324 0 0 0 2.152.639c.061 0 .131.017.192.017h.009c.271 0 .534-.035.796-.088a.927.927 0 0 0 .167-.043c.2-.053.402-.114.595-.193l.183-.079a4.7 4.7 0 0 0 .7-.402c.035-.026.07-.044.105-.07h1.041s.062.026.088.053c.079.052.166.104.254.157.14.087.28.166.429.227.122.053.245.106.367.15.105.034.201.07.306.095.167.044.333.097.508.123h.035c.227.035.446.07.682.07.237 0 .447-.035.665-.07h.035c.175-.026.35-.07.516-.123.097-.026.193-.052.28-.087.132-.044.263-.096.394-.158.132-.06.263-.13.394-.21.096-.052.193-.104.28-.175.026-.017.061-.034.088-.052h1.032s.061.035.088.053c.078.06.166.104.253.157.14.079.271.157.42.227.123.053.254.106.377.158.096.035.192.061.297.087.166.044.341.097.516.123h.018c.227.035.455.07.682.07.228 0 .455-.035.674-.07h.026c.175-.026.341-.079.508-.123.105-.026.201-.06.306-.096.122-.043.245-.096.367-.149.15-.07.29-.148.43-.227.078-.053.166-.096.244-.149.035-.017.07-.035.096-.061h1.033s.035.018.053.035c.21.149.437.289.665.402.017 0 .035.01.052.018.201.096.411.166.621.227.07.018.131.044.201.062.22.052.438.087.665.105.07 0 .132 0 .202.008.245.01.49.01.744-.017.148-.018.288-.061.437-.096a4.639 4.639 0 0 0 1.75-.822c.157-.132.315-.263.455-.412.026-.026.044-.053.061-.07.394-.429.718-.936.928-1.496a4.735 4.735 0 0 0 .297-1.654v-.166a4.262 4.262 0 0 0-1.26-3.037l.009-.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--restaurantFilledLarge"><path d="M26.5 15.912c-.079.01-.149.027-.227.035a5.715 5.715 0 0 1-.762.044 6.178 6.178 0 0 1-3.167-.866c-1.917 1.137-4.419 1.137-6.335 0-1.925 1.137-4.428 1.137-6.344 0A6.13 6.13 0 0 1 6.603 16a6.51 6.51 0 0 1-1.094-.096 7.088 7.088 0 0 1-.875-.21 6.33 6.33 0 0 1-.875-.359v12.924H28.25V15.36c-.28.14-.569.263-.875.359-.28.087-.578.149-.875.201v-.008ZM9 26.5v-5.25c0-.962.787-1.75 1.75-1.75s1.75.788 1.75 1.75v5.25H9Zm14-7.875v3.5h-5.25v-3.5H23Z"></path><path d="M28.74 6.454 26.806 4.51s-.079-.061-.114-.096a2.613 2.613 0 0 0-1.74-.674H7.091c-.69 0-1.347.271-1.846.753l-1.969 1.96A4.32 4.32 0 0 0 2 9.507v.15c0 .297.035.594.087.892.027.122.08.245.114.367.044.166.088.333.158.49.052.123.122.236.192.359.079.149.149.297.236.438.07.104.158.2.246.306.096.122.175.245.288.358.018.018.035.027.053.044.017.018.026.035.035.044.087.088.183.14.271.219.026.026.052.043.079.07.105.087.21.184.323.262.044.035.106.053.15.088a4.324 4.324 0 0 0 2.152.639c.061 0 .131.017.192.017h.009c.271 0 .534-.035.796-.088a.927.927 0 0 0 .167-.043c.2-.053.402-.114.595-.193l.183-.079a4.7 4.7 0 0 0 .7-.402c.035-.026.07-.044.105-.07h1.041s.062.026.088.053c.079.052.166.104.254.157.14.087.28.166.429.227.122.053.245.106.367.15.105.034.201.07.306.095.167.044.333.097.508.123h.035c.227.035.446.07.682.07.237 0 .447-.035.665-.07h.035c.175-.026.35-.07.516-.123.097-.026.193-.052.28-.087.132-.044.263-.096.394-.158.132-.06.263-.13.394-.21.096-.052.193-.104.28-.175.026-.017.061-.034.088-.052h1.032s.061.035.088.053c.078.06.166.104.253.157.14.079.271.157.42.227.123.053.254.106.377.158.096.035.192.061.297.087.166.044.341.097.516.123h.018c.227.035.455.07.682.07.228 0 .455-.035.674-.07h.026c.175-.026.341-.079.508-.123.105-.026.201-.06.306-.096.122-.043.245-.096.367-.149.15-.07.29-.148.43-.227.078-.053.166-.096.244-.149.035-.017.07-.035.096-.061h1.033s.035.018.053.035c.21.149.437.289.665.402.017 0 .035.01.052.018.201.096.411.166.621.227.07.018.131.044.201.062.22.052.438.087.665.105.07 0 .132 0 .202.008.245.01.49.01.744-.017.148-.018.288-.061.437-.096a4.639 4.639 0 0 0 1.75-.822c.157-.132.315-.263.455-.412.026-.026.044-.053.061-.07.394-.429.718-.936.928-1.496a4.735 4.735 0 0 0 .297-1.654v-.166a4.262 4.262 0 0 0-1.26-3.037l.009-.008Z"></path></svg>';
 
 class IconRestaurantFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRestaurantFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--restaurantFilledLarge', '', null, 'IconRestaurantFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--restaurantFilledLarge', '', null, 'IconRestaurantFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--restaurantFilledLarge');
         this.root.append(svg);
     }

package/dist/IconRestaurantLarge.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--restaurantLarge"><g fill-rule="evenodd" clip-path="url(#prefix__clip0_2_2344)" clip-rule="evenodd"><path d="M24.75 23.875H16v-7h8.75v7ZM23 18.625h-5.25v3.5H23v-3.5Z"></path><path d="m26.806 4.52 1.934 1.934A4.261 4.261 0 0 1 30 9.49v.175a4.612 4.612 0 0 1-1.75 3.631V28.25H3.75V13.235a2.74 2.74 0 0 0-.142-.11 1.806 1.806 0 0 1-.208-.17A4.664 4.664 0 0 1 2 9.656v-.148a4.305 4.305 0 0 1 1.277-3.054l1.97-1.951a2.625 2.625 0 0 1 1.846-.753H24.95c.696 0 1.363.278 1.855.77ZM9 21.25v5.25h3.5v-5.25a1.75 1.75 0 0 0-3.5 0Zm5.25 5.25H26.5V14.154c-.144.04-.29.072-.438.096a4.497 4.497 0 0 1-3.727-1.33 4.48 4.48 0 0 1-6.335 0 4.48 4.48 0 0 1-6.352 0 4.377 4.377 0 0 1-3.08 1.33c-.36-.01-.719-.06-1.068-.149V26.5h1.75v-5.25a3.5 3.5 0 0 1 7 0v5.25Zm13.332-14.969c.44-.52.678-1.184.668-1.866V9.49a2.52 2.52 0 0 0-.744-1.794l-1.942-1.942a.875.875 0 0 0-.613-.254H7.093a.875.875 0 0 0-.613.254L4.511 7.696a2.564 2.564 0 0 0-.761 1.812v.148a2.879 2.879 0 0 0 .875 2.048 2.626 2.626 0 0 0 1.916.796 2.817 2.817 0 0 0 2.38-1.444l.263-.411h.989l.253.438a2.738 2.738 0 0 0 4.804 0l.245-.447h1.05l.254.464a2.74 2.74 0 0 0 4.786 0l.254-.446h1.024l.262.437a2.783 2.783 0 0 0 2.747 1.409 2.826 2.826 0 0 0 1.73-.969Z"></path></g><defs><clipPath id="prefix__clip0_2_2344"><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--restaurantLarge"><g fill-rule="evenodd" clip-path="url(#prefix__clip0_2_2344)" clip-rule="evenodd"><path d="M24.75 23.875H16v-7h8.75v7ZM23 18.625h-5.25v3.5H23v-3.5Z"></path><path d="m26.806 4.52 1.934 1.934A4.261 4.261 0 0 1 30 9.49v.175a4.612 4.612 0 0 1-1.75 3.631V28.25H3.75V13.235a2.74 2.74 0 0 0-.142-.11 1.806 1.806 0 0 1-.208-.17A4.664 4.664 0 0 1 2 9.656v-.148a4.305 4.305 0 0 1 1.277-3.054l1.97-1.951a2.625 2.625 0 0 1 1.846-.753H24.95c.696 0 1.363.278 1.855.77ZM9 21.25v5.25h3.5v-5.25a1.75 1.75 0 0 0-3.5 0Zm5.25 5.25H26.5V14.154c-.144.04-.29.072-.438.096a4.497 4.497 0 0 1-3.727-1.33 4.48 4.48 0 0 1-6.335 0 4.48 4.48 0 0 1-6.352 0 4.377 4.377 0 0 1-3.08 1.33c-.36-.01-.719-.06-1.068-.149V26.5h1.75v-5.25a3.5 3.5 0 0 1 7 0v5.25Zm13.332-14.969c.44-.52.678-1.184.668-1.866V9.49a2.52 2.52 0 0 0-.744-1.794l-1.942-1.942a.875.875 0 0 0-.613-.254H7.093a.875.875 0 0 0-.613.254L4.511 7.696a2.564 2.564 0 0 0-.761 1.812v.148a2.879 2.879 0 0 0 .875 2.048 2.626 2.626 0 0 0 1.916.796 2.817 2.817 0 0 0 2.38-1.444l.263-.411h.989l.253.438a2.738 2.738 0 0 0 4.804 0l.245-.447h1.05l.254.464a2.74 2.74 0 0 0 4.786 0l.254-.446h1.024l.262.437a2.783 2.783 0 0 0 2.747 1.409 2.826 2.826 0 0 0 1.73-.969Z"></path></g><defs><clipPath id="prefix__clip0_2_2344"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
 
 class IconRestaurantLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRestaurantLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--restaurantLarge', '', null, 'IconRestaurantLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--restaurantLarge', '', null, 'IconRestaurantLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--restaurantLarge');
         this.root.append(svg);
     }

package/dist/IconRestaurantMenu.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--restaurantMenu"><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.5H3.406V3.625a.219.219 0 0 1 .219-.219h8.75a.219.219 0 0 1 .219.219v8.969Z"></path><path d="M10.625 7.668a2.625 2.625 0 0 0-2.196-2.144.437.437 0 1 0-.875 0 2.625 2.625 0 0 0-2.135 2.144 2.478 2.478 0 0 0 0 .437v.438h5.25v-.438a2.48 2.48 0 0 0-.044-.438Z"></path><path d="M10.625 9.645h-5.25v1.313h5.25V9.644Z"></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--restaurantMenu"><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.5H3.406V3.625a.219.219 0 0 1 .219-.219h8.75a.219.219 0 0 1 .219.219v8.969Z"></path><path d="M10.625 7.668a2.625 2.625 0 0 0-2.196-2.144.437.437 0 1 0-.875 0 2.625 2.625 0 0 0-2.135 2.144 2.478 2.478 0 0 0 0 .437v.438h5.25v-.438a2.48 2.48 0 0 0-.044-.438Z"></path><path d="M10.625 9.645h-5.25v1.313h5.25V9.644Z"></path></svg>';
 
 class IconRestaurantMenu extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRestaurantMenu extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--restaurantMenu', '', null, 'IconRestaurantMenu');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--restaurantMenu', '', null, 'IconRestaurantMenu');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--restaurantMenu');
         this.root.append(svg);
     }

package/dist/IconRestaurantMenuLarge.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--restaurantMenuLarge"><path d="M19.5 22.125h-7v1.75h7v-1.75Z"></path><path d="M23.875 3.75H8.125A2.625 2.625 0 0 0 5.5 6.375v21.927l.088-.052h20.825l.087.052V6.375a2.625 2.625 0 0 0-2.625-2.625ZM7.25 26.5V6.375a.875.875 0 0 1 .875-.875h15.75a.875.875 0 0 1 .875.875V26.5H7.25Z"></path><path d="M21.25 18.625h-10.5v1.75h10.5v-1.75Z"></path><path d="M21.171 13.375a5.25 5.25 0 0 0-4.296-4.296.254.254 0 0 0 0-.079.875.875 0 0 0-1.75 0 .254.254 0 0 0 0 .079 5.25 5.25 0 0 0-4.296 4.296c-.049.29-.075.582-.079.875v.875h10.5v-.875a5.807 5.807 0 0 0-.079-.875Zm-8.548 0a3.5 3.5 0 0 1 6.755 0h-6.755Z"></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--restaurantMenuLarge"><path d="M19.5 22.125h-7v1.75h7v-1.75Z"></path><path d="M23.875 3.75H8.125A2.625 2.625 0 0 0 5.5 6.375v21.927l.088-.052h20.825l.087.052V6.375a2.625 2.625 0 0 0-2.625-2.625ZM7.25 26.5V6.375a.875.875 0 0 1 .875-.875h15.75a.875.875 0 0 1 .875.875V26.5H7.25Z"></path><path d="M21.25 18.625h-10.5v1.75h10.5v-1.75Z"></path><path d="M21.171 13.375a5.25 5.25 0 0 0-4.296-4.296.254.254 0 0 0 0-.079.875.875 0 0 0-1.75 0 .254.254 0 0 0 0 .079 5.25 5.25 0 0 0-4.296 4.296c-.049.29-.075.582-.079.875v.875h10.5v-.875a5.807 5.807 0 0 0-.079-.875Zm-8.548 0a3.5 3.5 0 0 1 6.755 0h-6.755Z"></path></svg>';
 
 class IconRestaurantMenuLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRestaurantMenuLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--restaurantMenuLarge', '', null, 'IconRestaurantMenuLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--restaurantMenuLarge', '', null, 'IconRestaurantMenuLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--restaurantMenuLarge');
         this.root.append(svg);
     }

package/dist/IconRestricted.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--restricted"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219ZM2.531 8A5.469 5.469 0 0 1 8 2.531a5.408 5.408 0 0 1 3.369 1.173l-7.665 7.665A5.408 5.408 0 0 1 2.53 8ZM8 13.469a5.408 5.408 0 0 1-3.369-1.173l7.665-7.665A5.408 5.408 0 0 1 13.47 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--restricted"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219ZM2.531 8A5.469 5.469 0 0 1 8 2.531a5.408 5.408 0 0 1 3.369 1.173l-7.665 7.665A5.408 5.408 0 0 1 2.53 8ZM8 13.469a5.408 5.408 0 0 1-3.369-1.173l7.665-7.665A5.408 5.408 0 0 1 13.47 8 5.47 5.47 0 0 1 8 13.469Z"></path></svg>';
 
 class IconRestricted extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRestricted extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--restricted', '', null, 'IconRestricted');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--restricted', '', null, 'IconRestricted');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--restricted');
         this.root.append(svg);
     }

package/dist/IconRestrictedLarge.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--restrictedLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5ZM5.5 16A10.5 10.5 0 0 1 23 8.195L8.195 23A10.421 10.421 0 0 1 5.5 16ZM16 26.5a10.5 10.5 0 0 1-6.527-2.293L24.207 9.473A10.5 10.5 0 0 1 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--restrictedLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5ZM5.5 16A10.5 10.5 0 0 1 23 8.195L8.195 23A10.421 10.421 0 0 1 5.5 16ZM16 26.5a10.5 10.5 0 0 1-6.527-2.293L24.207 9.473A10.5 10.5 0 0 1 16 26.5Z"></path></svg>';
 
 class IconRestrictedLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRestrictedLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--restrictedLarge', '', null, 'IconRestrictedLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--restrictedLarge', '', null, 'IconRestrictedLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--restrictedLarge');
         this.root.append(svg);
     }

package/dist/IconReview.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--review"><path d="M12.375 1.219h-8.75A1.54 1.54 0 0 0 2.094 2.75v7.875a1.54 1.54 0 0 0 1.531 1.531h1.628L8 14.904l2.748-2.748h1.627a1.54 1.54 0 0 0 1.531-1.531V2.75a1.54 1.54 0 0 0-1.531-1.531Zm.219 9.406a.219.219 0 0 1-.219.219h-2.17L8 13.049l-2.205-2.205h-2.17a.219.219 0 0 1-.219-.219V2.75a.219.219 0 0 1 .219-.219h8.75a.219.219 0 0 1 .219.219v7.875ZM8.814 5.83l1.82.263L9.32 7.379l.306 1.811L8 8.341l-1.628.875.307-1.811-1.304-1.313 1.82-.262L8 4.185l.814 1.645Z"></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--review"><path d="M12.375 1.219h-8.75A1.54 1.54 0 0 0 2.094 2.75v7.875a1.54 1.54 0 0 0 1.531 1.531h1.628L8 14.904l2.748-2.748h1.627a1.54 1.54 0 0 0 1.531-1.531V2.75a1.54 1.54 0 0 0-1.531-1.531Zm.219 9.406a.219.219 0 0 1-.219.219h-2.17L8 13.049l-2.205-2.205h-2.17a.219.219 0 0 1-.219-.219V2.75a.219.219 0 0 1 .219-.219h8.75a.219.219 0 0 1 .219.219v7.875ZM8.814 5.83l1.82.263L9.32 7.379l.306 1.811L8 8.341l-1.628.875.307-1.811-1.304-1.313 1.82-.262L8 4.185l.814 1.645Z"></path></svg>';
 
 class IconReview extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconReview extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--review', '', null, 'IconReview');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--review', '', null, 'IconReview');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--review');
         this.root.append(svg);
     }

package/dist/IconReviewLarge.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--reviewLarge"><path d="m16 29.335-5.311-5.311H7.25a2.625 2.625 0 0 1-2.625-2.625V5.649A2.625 2.625 0 0 1 7.25 3.024h17.5a2.625 2.625 0 0 1 2.625 2.625v15.75a2.625 2.625 0 0 1-2.625 2.625h-3.439L16 29.335ZM7.25 4.774a.875.875 0 0 0-.875.875v15.75a.875.875 0 0 0 .875.875h4.165L16 26.859l4.585-4.585h4.165a.875.875 0 0 0 .875-.875V5.649a.875.875 0 0 0-.875-.875H7.25ZM19.413 19.5a.875.875 0 0 1-.412-.105L16 17.82l-3.001 1.575a.876.876 0 0 1-1.269-.919l.569-3.351-2.424-2.363a.875.875 0 0 1-.219-.875.875.875 0 0 1 .709-.603l3.351-.534 1.497-3.01a.875.875 0 0 1 1.575 0l1.496 3.01 3.36.481a.876.876 0 0 1 .709.604.875.875 0 0 1-.22.875l-2.432 2.415.569 3.343a.874.874 0 0 1-.341.875.875.875 0 0 1-.516.157ZM16 16c.144 0 .285.037.411.105l1.838.962-.35-2.047a.875.875 0 0 1 .253-.779l1.488-1.452-2.056-.298a.875.875 0 0 1-.665-.481L16 10.102l-.875 1.864a.874.874 0 0 1-.665.482l-2.056.297 1.487 1.453a.876.876 0 0 1 .254.778l-.35 2.048 1.838-.963A.876.876 0 0 1 16 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--reviewLarge"><path d="m16 29.335-5.311-5.311H7.25a2.625 2.625 0 0 1-2.625-2.625V5.649A2.625 2.625 0 0 1 7.25 3.024h17.5a2.625 2.625 0 0 1 2.625 2.625v15.75a2.625 2.625 0 0 1-2.625 2.625h-3.439L16 29.335ZM7.25 4.774a.875.875 0 0 0-.875.875v15.75a.875.875 0 0 0 .875.875h4.165L16 26.859l4.585-4.585h4.165a.875.875 0 0 0 .875-.875V5.649a.875.875 0 0 0-.875-.875H7.25ZM19.413 19.5a.875.875 0 0 1-.412-.105L16 17.82l-3.001 1.575a.876.876 0 0 1-1.269-.919l.569-3.351-2.424-2.363a.875.875 0 0 1-.219-.875.875.875 0 0 1 .709-.603l3.351-.534 1.497-3.01a.875.875 0 0 1 1.575 0l1.496 3.01 3.36.481a.876.876 0 0 1 .709.604.875.875 0 0 1-.22.875l-2.432 2.415.569 3.343a.874.874 0 0 1-.341.875.875.875 0 0 1-.516.157ZM16 16c.144 0 .285.037.411.105l1.838.962-.35-2.047a.875.875 0 0 1 .253-.779l1.488-1.452-2.056-.298a.875.875 0 0 1-.665-.481L16 10.102l-.875 1.864a.874.874 0 0 1-.665.482l-2.056.297 1.487 1.453a.876.876 0 0 1 .254.778l-.35 2.048 1.838-.963A.876.876 0 0 1 16 16Z"></path></svg>';
 
 class IconReviewLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconReviewLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--reviewLarge', '', null, 'IconReviewLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--reviewLarge', '', null, 'IconReviewLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--reviewLarge');
         this.root.append(svg);
     }

package/dist/IconRibbonHeart.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--ribbonHeart"><path d="M13.696 11.955a7.24 7.24 0 0 1-1.522-2.013c.096-.308.144-.63.14-.953a2.08 2.08 0 0 1 .061-.578 2.51 2.51 0 0 1 .35-.411 2.074 2.074 0 0 0 .752-1.4 2.058 2.058 0 0 0-.752-1.391 2.51 2.51 0 0 1-.35-.412 2.124 2.124 0 0 1-.053-.577 2.048 2.048 0 0 0-.454-1.47 2.03 2.03 0 0 0-1.488-.438 2.39 2.39 0 0 1-.569-.06c-.158-.105-.3-.232-.42-.377A2.039 2.039 0 0 0 8 1.131a2.039 2.039 0 0 0-1.391.744 1.916 1.916 0 0 1-.42.35 2.39 2.39 0 0 1-.569.061 2.03 2.03 0 0 0-1.487.438 2.047 2.047 0 0 0-.447 1.487c.007.198-.014.395-.061.586-.102.15-.219.288-.35.412A2.056 2.056 0 0 0 2.531 6.6 2.074 2.074 0 0 0 3.284 8c.13.124.248.262.35.411.044.19.062.384.052.578-.004.323.044.645.14.953a7.237 7.237 0 0 1-1.522 2.013l-.648.604 3.947 2.31.358-.368a11.464 11.464 0 0 0 1.75-2.476c.1.023.203.038.306.044a1.85 1.85 0 0 0 .307-.044c.47.9 1.06 1.732 1.75 2.476l.358.368 3.947-2.31-.683-.604ZM4.23 6.119c.253-.235.46-.513.612-.823.116-.337.17-.693.158-1.05a1.96 1.96 0 0 1 .061-.577 1.75 1.75 0 0 1 .586-.044c.357.01.713-.042 1.05-.158.312-.152.591-.363.823-.62.138-.159.3-.295.481-.403.179.103.341.233.481.385.232.258.511.469.823.621.337.115.693.168 1.05.157.194-.01.388.008.577.053.057.19.08.388.07.586a2.95 2.95 0 0 0 .158 1.05c.152.31.36.588.612.823.123.131.385.393.385.481 0 .087-.262.359-.385.481a2.966 2.966 0 0 0-.612.875A2.95 2.95 0 0 0 11 9.006c.008.195-.012.39-.061.578a1.75 1.75 0 0 1-.586.061 2.975 2.975 0 0 0-1.05.157 2.687 2.687 0 0 0-.823.622c-.131.122-.393.376-.481.376-.088 0-.35-.254-.481-.376a2.687 2.687 0 0 0-.823-.674 2.975 2.975 0 0 0-1.05-.158 2.013 2.013 0 0 1-.577-.052 1.75 1.75 0 0 1-.07-.586 2.949 2.949 0 0 0-.158-1.05 2.966 2.966 0 0 0-.612-.875c-.123-.123-.385-.385-.385-.482 0-.096.262-.297.385-.428Zm1.146 7.079-1.549-.876A8.369 8.369 0 0 0 4.85 10.87c.26.053.523.076.788.07.191-.007.383.014.568.061.149.089.284.198.403.324-.34.668-.754 1.296-1.234 1.873Zm5.25 0a10.045 10.045 0 0 1-1.234-1.9c.119-.126.254-.235.403-.323.185-.047.377-.068.569-.061.264.006.528-.018.787-.07.289.519.632 1.006 1.024 1.452l-1.549.902Z"></path><path d="M8 8.656 6.521 7.125a.998.998 0 0 1 .295-1.58.875.875 0 0 1 1.009.215L8 5.926l.175-.166a.875.875 0 0 1 .647-.28.875.875 0 0 1 .657.28.998.998 0 0 1 0 1.365L8 8.656Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--ribbonHeart"><path d="M13.696 11.955a7.24 7.24 0 0 1-1.522-2.013c.096-.308.144-.63.14-.953a2.08 2.08 0 0 1 .061-.578 2.51 2.51 0 0 1 .35-.411 2.074 2.074 0 0 0 .752-1.4 2.058 2.058 0 0 0-.752-1.391 2.51 2.51 0 0 1-.35-.412 2.124 2.124 0 0 1-.053-.577 2.048 2.048 0 0 0-.454-1.47 2.03 2.03 0 0 0-1.488-.438 2.39 2.39 0 0 1-.569-.06c-.158-.105-.3-.232-.42-.377A2.039 2.039 0 0 0 8 1.131a2.039 2.039 0 0 0-1.391.744 1.916 1.916 0 0 1-.42.35 2.39 2.39 0 0 1-.569.061 2.03 2.03 0 0 0-1.487.438 2.047 2.047 0 0 0-.447 1.487c.007.198-.014.395-.061.586-.102.15-.219.288-.35.412A2.056 2.056 0 0 0 2.531 6.6 2.074 2.074 0 0 0 3.284 8c.13.124.248.262.35.411.044.19.062.384.052.578-.004.323.044.645.14.953a7.237 7.237 0 0 1-1.522 2.013l-.648.604 3.947 2.31.358-.368a11.464 11.464 0 0 0 1.75-2.476c.1.023.203.038.306.044a1.85 1.85 0 0 0 .307-.044c.47.9 1.06 1.732 1.75 2.476l.358.368 3.947-2.31-.683-.604ZM4.23 6.119c.253-.235.46-.513.612-.823.116-.337.17-.693.158-1.05a1.96 1.96 0 0 1 .061-.577 1.75 1.75 0 0 1 .586-.044c.357.01.713-.042 1.05-.158.312-.152.591-.363.823-.62.138-.159.3-.295.481-.403.179.103.341.233.481.385.232.258.511.469.823.621.337.115.693.168 1.05.157.194-.01.388.008.577.053.057.19.08.388.07.586a2.95 2.95 0 0 0 .158 1.05c.152.31.36.588.612.823.123.131.385.393.385.481 0 .087-.262.359-.385.481a2.966 2.966 0 0 0-.612.875A2.95 2.95 0 0 0 11 9.006c.008.195-.012.39-.061.578a1.75 1.75 0 0 1-.586.061 2.975 2.975 0 0 0-1.05.157 2.687 2.687 0 0 0-.823.622c-.131.122-.393.376-.481.376-.088 0-.35-.254-.481-.376a2.687 2.687 0 0 0-.823-.674 2.975 2.975 0 0 0-1.05-.158 2.013 2.013 0 0 1-.577-.052 1.75 1.75 0 0 1-.07-.586 2.949 2.949 0 0 0-.158-1.05 2.966 2.966 0 0 0-.612-.875c-.123-.123-.385-.385-.385-.482 0-.096.262-.297.385-.428Zm1.146 7.079-1.549-.876A8.369 8.369 0 0 0 4.85 10.87c.26.053.523.076.788.07.191-.007.383.014.568.061.149.089.284.198.403.324-.34.668-.754 1.296-1.234 1.873Zm5.25 0a10.045 10.045 0 0 1-1.234-1.9c.119-.126.254-.235.403-.323.185-.047.377-.068.569-.061.264.006.528-.018.787-.07.289.519.632 1.006 1.024 1.452l-1.549.902Z"></path><path d="M8 8.656 6.521 7.125a.998.998 0 0 1 .295-1.58.875.875 0 0 1 1.009.215L8 5.926l.175-.166a.875.875 0 0 1 .647-.28.875.875 0 0 1 .657.28.998.998 0 0 1 0 1.365L8 8.656Z"></path></svg>';
 
 class IconRibbonHeart extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRibbonHeart extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--ribbonHeart', '', null, 'IconRibbonHeart');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--ribbonHeart', '', null, 'IconRibbonHeart');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--ribbonHeart');
         this.root.append(svg);
     }

package/dist/IconRibbonHeartLarge.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--ribbonHeartLarge"><path d="M27.016 24.4a14.877 14.877 0 0 1-3.211-4.296c.229-.63.33-1.3.297-1.969-.009-.425.041-.849.15-1.26.211-.362.477-.69.787-.971a3.702 3.702 0 0 0 1.382-2.529 3.702 3.702 0 0 0-1.382-2.485 4.155 4.155 0 0 1-.788-.971 4.568 4.568 0 0 1-.149-1.304 3.65 3.65 0 0 0-.76-2.625 3.693 3.693 0 0 0-2.626-.761 4.077 4.077 0 0 1-1.312-.149 4.068 4.068 0 0 1-.963-.779 3.72 3.72 0 0 0-2.52-1.426 3.702 3.702 0 0 0-2.485 1.383 4.096 4.096 0 0 1-.936.778c-.424.121-.864.171-1.304.149-.954-.1-1.91.173-2.669.761a3.684 3.684 0 0 0-.76 2.669c.021.44-.029.88-.15 1.304a4.095 4.095 0 0 1-.778.971 3.701 3.701 0 0 0-1.418 2.485 3.701 3.701 0 0 0 1.383 2.485c.31.295.574.638.778 1.015.121.424.171.864.15 1.304a5.39 5.39 0 0 0 .297 1.969A14.666 14.666 0 0 1 4.826 24.4l-1.312 1.225 4.917.814 2.389 3.159.709-.727a21.932 21.932 0 0 0 3.596-5.162 2.168 2.168 0 0 0 1.663 0 21.755 21.755 0 0 0 3.552 5.154l.709.726 2.388-3.159 4.883-.805-1.304-1.225ZM10.96 26.868 9.402 24.82l-2.152-.367a16.115 16.115 0 0 0 2.126-3.116 6.17 6.17 0 0 0 1.75.228c.44-.022.88.028 1.304.149.361.208.689.47.971.779.063.068.13.132.201.192a21.645 21.645 0 0 1-2.642 4.183Zm3.692-5.618a5.057 5.057 0 0 0-1.513-1.146 5.25 5.25 0 0 0-1.943-.28c-.577 0-1.242 0-1.461-.254-.219-.254-.236-.875-.254-1.461a5.25 5.25 0 0 0-.28-1.943 5.058 5.058 0 0 0-1.146-1.514c-.411-.428-.875-.874-.875-1.268s.472-.875.875-1.269c.475-.43.864-.947 1.146-1.523a5.25 5.25 0 0 0 .28-1.942c0-.578 0-1.234.254-1.461.254-.228.875-.237 1.461-.254a5.25 5.25 0 0 0 1.943-.28A5.058 5.058 0 0 0 14.652 5.5c.43-.411.875-.875 1.27-.875.393 0 .83.473 1.26.875.433.472.949.86 1.522 1.146a5.25 5.25 0 0 0 1.942.28c.578 0 1.234 0 1.461.254.228.254.237.875.245 1.461-.023.66.075 1.318.29 1.943.28.574.669 1.088 1.145 1.514.412.428.875.874.875 1.268s-.472.875-.875 1.269c-.476.425-.866.94-1.146 1.514a5.4 5.4 0 0 0-.289 1.942c0 .578 0 1.234-.245 1.461-.245.228-.875.237-1.46.254a5.252 5.252 0 0 0-1.943.28 5.252 5.252 0 0 0-1.523 1.164c-.429.411-.875.875-1.26.875s-.796-.473-1.269-.875Zm7.78 3.579-1.55 2.047a21.236 21.236 0 0 1-2.677-4.182l.201-.193c.28-.307.604-.57.963-.779.426-.12.87-.171 1.312-.148a5.922 5.922 0 0 0 1.75-.228 16.462 16.462 0 0 0 2.153 3.115l-2.153.368Z"></path><path d="m15.921 19.299-4.375-4.515a3.413 3.413 0 0 1 0-4.708 3.282 3.282 0 0 1 4.375-.175 3.194 3.194 0 0 1 4.375.184 3.395 3.395 0 0 1 0 4.699l-4.375 4.515Zm-2.109-8.435a1.453 1.453 0 0 0-1.04.446 1.68 1.68 0 0 0 0 2.249l3.15 3.229 3.14-3.23a1.662 1.662 0 0 0 0-2.248 1.487 1.487 0 0 0-2.09 0l-1.086 1.041-1.024-1.041a1.452 1.452 0 0 0-1.05-.446Z"></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--ribbonHeartLarge"><path d="M27.016 24.4a14.877 14.877 0 0 1-3.211-4.296c.229-.63.33-1.3.297-1.969-.009-.425.041-.849.15-1.26.211-.362.477-.69.787-.971a3.702 3.702 0 0 0 1.382-2.529 3.702 3.702 0 0 0-1.382-2.485 4.155 4.155 0 0 1-.788-.971 4.568 4.568 0 0 1-.149-1.304 3.65 3.65 0 0 0-.76-2.625 3.693 3.693 0 0 0-2.626-.761 4.077 4.077 0 0 1-1.312-.149 4.068 4.068 0 0 1-.963-.779 3.72 3.72 0 0 0-2.52-1.426 3.702 3.702 0 0 0-2.485 1.383 4.096 4.096 0 0 1-.936.778c-.424.121-.864.171-1.304.149-.954-.1-1.91.173-2.669.761a3.684 3.684 0 0 0-.76 2.669c.021.44-.029.88-.15 1.304a4.095 4.095 0 0 1-.778.971 3.701 3.701 0 0 0-1.418 2.485 3.701 3.701 0 0 0 1.383 2.485c.31.295.574.638.778 1.015.121.424.171.864.15 1.304a5.39 5.39 0 0 0 .297 1.969A14.666 14.666 0 0 1 4.826 24.4l-1.312 1.225 4.917.814 2.389 3.159.709-.727a21.932 21.932 0 0 0 3.596-5.162 2.168 2.168 0 0 0 1.663 0 21.755 21.755 0 0 0 3.552 5.154l.709.726 2.388-3.159 4.883-.805-1.304-1.225ZM10.96 26.868 9.402 24.82l-2.152-.367a16.115 16.115 0 0 0 2.126-3.116 6.17 6.17 0 0 0 1.75.228c.44-.022.88.028 1.304.149.361.208.689.47.971.779.063.068.13.132.201.192a21.645 21.645 0 0 1-2.642 4.183Zm3.692-5.618a5.057 5.057 0 0 0-1.513-1.146 5.25 5.25 0 0 0-1.943-.28c-.577 0-1.242 0-1.461-.254-.219-.254-.236-.875-.254-1.461a5.25 5.25 0 0 0-.28-1.943 5.058 5.058 0 0 0-1.146-1.514c-.411-.428-.875-.874-.875-1.268s.472-.875.875-1.269c.475-.43.864-.947 1.146-1.523a5.25 5.25 0 0 0 .28-1.942c0-.578 0-1.234.254-1.461.254-.228.875-.237 1.461-.254a5.25 5.25 0 0 0 1.943-.28A5.058 5.058 0 0 0 14.652 5.5c.43-.411.875-.875 1.27-.875.393 0 .83.473 1.26.875.433.472.949.86 1.522 1.146a5.25 5.25 0 0 0 1.942.28c.578 0 1.234 0 1.461.254.228.254.237.875.245 1.461-.023.66.075 1.318.29 1.943.28.574.669 1.088 1.145 1.514.412.428.875.874.875 1.268s-.472.875-.875 1.269c-.476.425-.866.94-1.146 1.514a5.4 5.4 0 0 0-.289 1.942c0 .578 0 1.234-.245 1.461-.245.228-.875.237-1.46.254a5.252 5.252 0 0 0-1.943.28 5.252 5.252 0 0 0-1.523 1.164c-.429.411-.875.875-1.26.875s-.796-.473-1.269-.875Zm7.78 3.579-1.55 2.047a21.236 21.236 0 0 1-2.677-4.182l.201-.193c.28-.307.604-.57.963-.779.426-.12.87-.171 1.312-.148a5.922 5.922 0 0 0 1.75-.228 16.462 16.462 0 0 0 2.153 3.115l-2.153.368Z"></path><path d="m15.921 19.299-4.375-4.515a3.413 3.413 0 0 1 0-4.708 3.282 3.282 0 0 1 4.375-.175 3.194 3.194 0 0 1 4.375.184 3.395 3.395 0 0 1 0 4.699l-4.375 4.515Zm-2.109-8.435a1.453 1.453 0 0 0-1.04.446 1.68 1.68 0 0 0 0 2.249l3.15 3.229 3.14-3.23a1.662 1.662 0 0 0 0-2.248 1.487 1.487 0 0 0-2.09 0l-1.086 1.041-1.024-1.041a1.452 1.452 0 0 0-1.05-.446Z"></path></svg>';
 
 class IconRibbonHeartLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRibbonHeartLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--ribbonHeartLarge', '', null, 'IconRibbonHeartLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--ribbonHeartLarge', '', null, 'IconRibbonHeartLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--ribbonHeartLarge');
         this.root.append(svg);
     }

package/dist/IconRibbonStar.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--ribbonStar"><path d="M13.696 11.955a7.24 7.24 0 0 1-1.522-2.013c.096-.308.144-.63.14-.953a2.08 2.08 0 0 1 .061-.578 2.51 2.51 0 0 1 .35-.411 2.074 2.074 0 0 0 .752-1.4 2.058 2.058 0 0 0-.752-1.391 2.51 2.51 0 0 1-.35-.412 2.124 2.124 0 0 1-.053-.577 2.048 2.048 0 0 0-.454-1.47 2.03 2.03 0 0 0-1.488-.438 2.39 2.39 0 0 1-.569-.06c-.158-.105-.3-.232-.42-.377A2.039 2.039 0 0 0 8 1.131a2.039 2.039 0 0 0-1.391.744 1.916 1.916 0 0 1-.42.35 2.39 2.39 0 0 1-.569.061 2.03 2.03 0 0 0-1.487.438 2.047 2.047 0 0 0-.447 1.487c.007.198-.014.395-.061.586-.102.15-.219.288-.35.412A2.056 2.056 0 0 0 2.531 6.6 2.074 2.074 0 0 0 3.284 8c.13.124.248.262.35.411.044.19.062.384.052.578-.004.323.044.645.14.953a7.237 7.237 0 0 1-1.522 2.013l-.648.604 3.947 2.31.358-.368a11.464 11.464 0 0 0 1.75-2.476c.1.023.203.038.306.044a1.85 1.85 0 0 0 .307-.044c.47.9 1.06 1.732 1.75 2.476l.358.368 3.947-2.31-.683-.604ZM4.23 6.119c.253-.235.46-.513.612-.823.116-.337.17-.693.158-1.05a1.96 1.96 0 0 1 .061-.577 1.75 1.75 0 0 1 .586-.044c.357.01.713-.042 1.05-.158.312-.152.591-.363.823-.62.138-.159.3-.295.481-.403.179.103.341.233.481.385.232.258.511.469.823.621.337.115.693.168 1.05.157.194-.01.388.008.577.053.057.19.08.388.07.586a2.95 2.95 0 0 0 .158 1.05c.152.31.36.588.612.823.123.131.385.393.385.481 0 .087-.262.359-.385.481a2.966 2.966 0 0 0-.612.875A2.95 2.95 0 0 0 11 9.006c.008.195-.012.39-.061.578a1.75 1.75 0 0 1-.586.061 2.975 2.975 0 0 0-1.05.157 2.687 2.687 0 0 0-.823.622c-.131.122-.393.376-.481.376-.088 0-.35-.254-.481-.376a2.687 2.687 0 0 0-.823-.674 2.975 2.975 0 0 0-1.05-.158 2.013 2.013 0 0 1-.577-.052 1.75 1.75 0 0 1-.07-.586 2.949 2.949 0 0 0-.158-1.05 2.966 2.966 0 0 0-.612-.875c-.123-.123-.385-.385-.385-.482 0-.096.262-.297.385-.428Zm1.146 7.079-1.549-.876A8.369 8.369 0 0 0 4.85 10.87c.26.053.523.076.788.07.191-.007.383.014.568.061.149.089.284.198.403.324-.34.668-.754 1.296-1.234 1.873Zm5.25 0a10.045 10.045 0 0 1-1.234-1.9c.119-.126.254-.235.403-.323.185-.047.377-.068.569-.061.264.006.528-.018.787-.07.289.519.632 1.006 1.024 1.452l-1.549.902Z"></path><path d="M9.234 8.42 8.06 7.799a.149.149 0 0 0-.122 0l-1.173.621.228-1.295a.122.122 0 0 0 0-.105l-.989-.945 1.312-.193a.105.105 0 0 0 .097-.07L8 4.632l.586 1.18a.105.105 0 0 0 .096.07l1.313.193-.954.927a.123.123 0 0 0 0 .105l.193 1.313Z"></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--ribbonStar"><path d="M13.696 11.955a7.24 7.24 0 0 1-1.522-2.013c.096-.308.144-.63.14-.953a2.08 2.08 0 0 1 .061-.578 2.51 2.51 0 0 1 .35-.411 2.074 2.074 0 0 0 .752-1.4 2.058 2.058 0 0 0-.752-1.391 2.51 2.51 0 0 1-.35-.412 2.124 2.124 0 0 1-.053-.577 2.048 2.048 0 0 0-.454-1.47 2.03 2.03 0 0 0-1.488-.438 2.39 2.39 0 0 1-.569-.06c-.158-.105-.3-.232-.42-.377A2.039 2.039 0 0 0 8 1.131a2.039 2.039 0 0 0-1.391.744 1.916 1.916 0 0 1-.42.35 2.39 2.39 0 0 1-.569.061 2.03 2.03 0 0 0-1.487.438 2.047 2.047 0 0 0-.447 1.487c.007.198-.014.395-.061.586-.102.15-.219.288-.35.412A2.056 2.056 0 0 0 2.531 6.6 2.074 2.074 0 0 0 3.284 8c.13.124.248.262.35.411.044.19.062.384.052.578-.004.323.044.645.14.953a7.237 7.237 0 0 1-1.522 2.013l-.648.604 3.947 2.31.358-.368a11.464 11.464 0 0 0 1.75-2.476c.1.023.203.038.306.044a1.85 1.85 0 0 0 .307-.044c.47.9 1.06 1.732 1.75 2.476l.358.368 3.947-2.31-.683-.604ZM4.23 6.119c.253-.235.46-.513.612-.823.116-.337.17-.693.158-1.05a1.96 1.96 0 0 1 .061-.577 1.75 1.75 0 0 1 .586-.044c.357.01.713-.042 1.05-.158.312-.152.591-.363.823-.62.138-.159.3-.295.481-.403.179.103.341.233.481.385.232.258.511.469.823.621.337.115.693.168 1.05.157.194-.01.388.008.577.053.057.19.08.388.07.586a2.95 2.95 0 0 0 .158 1.05c.152.31.36.588.612.823.123.131.385.393.385.481 0 .087-.262.359-.385.481a2.966 2.966 0 0 0-.612.875A2.95 2.95 0 0 0 11 9.006c.008.195-.012.39-.061.578a1.75 1.75 0 0 1-.586.061 2.975 2.975 0 0 0-1.05.157 2.687 2.687 0 0 0-.823.622c-.131.122-.393.376-.481.376-.088 0-.35-.254-.481-.376a2.687 2.687 0 0 0-.823-.674 2.975 2.975 0 0 0-1.05-.158 2.013 2.013 0 0 1-.577-.052 1.75 1.75 0 0 1-.07-.586 2.949 2.949 0 0 0-.158-1.05 2.966 2.966 0 0 0-.612-.875c-.123-.123-.385-.385-.385-.482 0-.096.262-.297.385-.428Zm1.146 7.079-1.549-.876A8.369 8.369 0 0 0 4.85 10.87c.26.053.523.076.788.07.191-.007.383.014.568.061.149.089.284.198.403.324-.34.668-.754 1.296-1.234 1.873Zm5.25 0a10.045 10.045 0 0 1-1.234-1.9c.119-.126.254-.235.403-.323.185-.047.377-.068.569-.061.264.006.528-.018.787-.07.289.519.632 1.006 1.024 1.452l-1.549.902Z"></path><path d="M9.234 8.42 8.06 7.799a.149.149 0 0 0-.122 0l-1.173.621.228-1.295a.122.122 0 0 0 0-.105l-.989-.945 1.312-.193a.105.105 0 0 0 .097-.07L8 4.632l.586 1.18a.105.105 0 0 0 .096.07l1.313.193-.954.927a.123.123 0 0 0 0 .105l.193 1.313Z"></path></svg>';
 
 class IconRibbonStar extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRibbonStar extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--ribbonStar', '', null, 'IconRibbonStar');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--ribbonStar', '', null, 'IconRibbonStar');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--ribbonStar');
         this.root.append(svg);
     }

package/dist/IconRibbonStarLarge.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--ribbonStarLarge"><path d="M27.095 24.4a14.873 14.873 0 0 1-3.22-4.296 5.25 5.25 0 0 0 .306-1.969 4.017 4.017 0 0 1 .158-1.26c.209-.361.471-.69.779-.971a3.702 3.702 0 0 0 1.382-2.529 3.702 3.702 0 0 0-1.382-2.485 4.096 4.096 0 0 1-.779-.971 4.015 4.015 0 0 1-.149-1.304 3.728 3.728 0 0 0-.761-2.625 3.727 3.727 0 0 0-2.625-.761 4.016 4.016 0 0 1-1.304-.193 4.095 4.095 0 0 1-.971-.778A3.7 3.7 0 0 0 16 2.875a3.702 3.702 0 0 0-2.485 1.383c-.282.307-.61.57-.971.778-.424.121-.864.171-1.304.149a3.693 3.693 0 0 0-2.625.761 3.693 3.693 0 0 0-.77 2.669c.022.44-.028.88-.148 1.304a4.095 4.095 0 0 1-.78.971A3.701 3.701 0 0 0 5.5 13.375a3.701 3.701 0 0 0 1.383 2.485c.31.295.574.638.779 1.015.12.424.17.864.148 1.304a5.25 5.25 0 0 0 .315 1.925 14.875 14.875 0 0 1-3.22 4.296l-1.312 1.225 4.917.814 2.389 3.159.726-.735a22.354 22.354 0 0 0 3.553-5.154 2.16 2.16 0 0 0 1.662 0 22.352 22.352 0 0 0 3.535 5.154l.718.726 2.389-3.159 4.926-.805-1.313-1.225ZM11.04 26.868 9.49 24.82l-2.196-.367c.84-.95 1.566-1.996 2.161-3.116a6.17 6.17 0 0 0 1.75.228c.44-.022.88.028 1.304.149.362.208.69.47.971.779l.201.192a21.232 21.232 0 0 1-2.642 4.183Zm3.693-5.618a5.057 5.057 0 0 0-1.514-1.146 5.25 5.25 0 0 0-1.943-.28c-.577 0-1.242 0-1.461-.254-.219-.254-.236-.875-.254-1.461a5.25 5.25 0 0 0-.28-1.943 5.059 5.059 0 0 0-1.155-1.522c-.402-.394-.875-.919-.875-1.269 0-.35.473-.875.875-1.269.478-.427.87-.94 1.155-1.514a5.25 5.25 0 0 0 .28-1.942c0-.578 0-1.234.254-1.461.254-.228.875-.237 1.461-.254a5.25 5.25 0 0 0 1.943-.28A5.058 5.058 0 0 0 14.732 5.5c.428-.411.875-.875 1.268-.875.394 0 .875.473 1.269.875.428.474.941.863 1.514 1.146a5.25 5.25 0 0 0 1.942.28c.578 0 1.243 0 1.461.254.22.254.237.875.254 1.461a5.25 5.25 0 0 0 .28 1.943 5.055 5.055 0 0 0 1.155 1.522c.412.429.875.875.875 1.269 0 .394-.472.875-.875 1.269a5.057 5.057 0 0 0-1.146 1.513 5.25 5.25 0 0 0-.28 1.943c0 .577 0 1.234-.254 1.461-.253.228-.875.236-1.461.254a5.25 5.25 0 0 0-1.943.28 5.056 5.056 0 0 0-1.522 1.155c-.429.411-.919.875-1.269.875-.35 0-.875-.473-1.268-.875Zm7.778 3.579-1.549 2.047a21.236 21.236 0 0 1-2.677-4.182l.201-.193c.295-.314.638-.58 1.015-.787.424-.121.864-.171 1.304-.149a5.922 5.922 0 0 0 1.75-.228 16.119 16.119 0 0 0 2.196 3.116l-2.24.376Z"></path><path d="M21.25 11.879a1.084 1.084 0 0 0-.875-.744l-2.362-.341L16.98 8.65a1.093 1.093 0 0 0-1.96 0l-1.059 2.144-2.336.341a1.094 1.094 0 0 0-.604 1.864l1.75 1.671-.402 2.362a1.093 1.093 0 0 0 1.584 1.147L16 17.068l2.118 1.11c.156.084.33.127.507.123a1.084 1.084 0 0 0 1.076-1.277L19.3 14.67l1.75-1.671a1.084 1.084 0 0 0 .201-1.12Zm-3.867 2.178L17.75 16 16 15.125 14.25 16l.333-1.951-1.418-1.374 1.96-.28.875-1.75.875 1.75 1.96.28-1.452 1.382Z"></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--ribbonStarLarge"><path d="M27.095 24.4a14.873 14.873 0 0 1-3.22-4.296 5.25 5.25 0 0 0 .306-1.969 4.017 4.017 0 0 1 .158-1.26c.209-.361.471-.69.779-.971a3.702 3.702 0 0 0 1.382-2.529 3.702 3.702 0 0 0-1.382-2.485 4.096 4.096 0 0 1-.779-.971 4.015 4.015 0 0 1-.149-1.304 3.728 3.728 0 0 0-.761-2.625 3.727 3.727 0 0 0-2.625-.761 4.016 4.016 0 0 1-1.304-.193 4.095 4.095 0 0 1-.971-.778A3.7 3.7 0 0 0 16 2.875a3.702 3.702 0 0 0-2.485 1.383c-.282.307-.61.57-.971.778-.424.121-.864.171-1.304.149a3.693 3.693 0 0 0-2.625.761 3.693 3.693 0 0 0-.77 2.669c.022.44-.028.88-.148 1.304a4.095 4.095 0 0 1-.78.971A3.701 3.701 0 0 0 5.5 13.375a3.701 3.701 0 0 0 1.383 2.485c.31.295.574.638.779 1.015.12.424.17.864.148 1.304a5.25 5.25 0 0 0 .315 1.925 14.875 14.875 0 0 1-3.22 4.296l-1.312 1.225 4.917.814 2.389 3.159.726-.735a22.354 22.354 0 0 0 3.553-5.154 2.16 2.16 0 0 0 1.662 0 22.352 22.352 0 0 0 3.535 5.154l.718.726 2.389-3.159 4.926-.805-1.313-1.225ZM11.04 26.868 9.49 24.82l-2.196-.367c.84-.95 1.566-1.996 2.161-3.116a6.17 6.17 0 0 0 1.75.228c.44-.022.88.028 1.304.149.362.208.69.47.971.779l.201.192a21.232 21.232 0 0 1-2.642 4.183Zm3.693-5.618a5.057 5.057 0 0 0-1.514-1.146 5.25 5.25 0 0 0-1.943-.28c-.577 0-1.242 0-1.461-.254-.219-.254-.236-.875-.254-1.461a5.25 5.25 0 0 0-.28-1.943 5.059 5.059 0 0 0-1.155-1.522c-.402-.394-.875-.919-.875-1.269 0-.35.473-.875.875-1.269.478-.427.87-.94 1.155-1.514a5.25 5.25 0 0 0 .28-1.942c0-.578 0-1.234.254-1.461.254-.228.875-.237 1.461-.254a5.25 5.25 0 0 0 1.943-.28A5.058 5.058 0 0 0 14.732 5.5c.428-.411.875-.875 1.268-.875.394 0 .875.473 1.269.875.428.474.941.863 1.514 1.146a5.25 5.25 0 0 0 1.942.28c.578 0 1.243 0 1.461.254.22.254.237.875.254 1.461a5.25 5.25 0 0 0 .28 1.943 5.055 5.055 0 0 0 1.155 1.522c.412.429.875.875.875 1.269 0 .394-.472.875-.875 1.269a5.057 5.057 0 0 0-1.146 1.513 5.25 5.25 0 0 0-.28 1.943c0 .577 0 1.234-.254 1.461-.253.228-.875.236-1.461.254a5.25 5.25 0 0 0-1.943.28 5.056 5.056 0 0 0-1.522 1.155c-.429.411-.919.875-1.269.875-.35 0-.875-.473-1.268-.875Zm7.778 3.579-1.549 2.047a21.236 21.236 0 0 1-2.677-4.182l.201-.193c.295-.314.638-.58 1.015-.787.424-.121.864-.171 1.304-.149a5.922 5.922 0 0 0 1.75-.228 16.119 16.119 0 0 0 2.196 3.116l-2.24.376Z"></path><path d="M21.25 11.879a1.084 1.084 0 0 0-.875-.744l-2.362-.341L16.98 8.65a1.093 1.093 0 0 0-1.96 0l-1.059 2.144-2.336.341a1.094 1.094 0 0 0-.604 1.864l1.75 1.671-.402 2.362a1.093 1.093 0 0 0 1.584 1.147L16 17.068l2.118 1.11c.156.084.33.127.507.123a1.084 1.084 0 0 0 1.076-1.277L19.3 14.67l1.75-1.671a1.084 1.084 0 0 0 .201-1.12Zm-3.867 2.178L17.75 16 16 15.125 14.25 16l.333-1.951-1.418-1.374 1.96-.28.875-1.75.875 1.75 1.96.28-1.452 1.382Z"></path></svg>';
 
 class IconRibbonStarLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconRibbonStarLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--ribbonStarLarge', '', null, 'IconRibbonStarLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--ribbonStarLarge', '', null, 'IconRibbonStarLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--ribbonStarLarge');
         this.root.append(svg);
     }