@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/dist/IconLocationPinFood.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--locationPinFood"><path d="M8 14.825 4 10.783c-2.196-2.223-2.196-5.837 0-8.06A5.592 5.592 0 0 1 8 1.054c1.514 0 2.931.594 3.999 1.67 2.196 2.223 2.196 5.837 0 8.06l-4 4.042Zm0-12.46a4.262 4.262 0 0 0-3.063 1.286 4.426 4.426 0 0 0 0 6.213L8 12.96l3.062-3.097a4.426 4.426 0 0 0 0-6.213A4.276 4.276 0 0 0 8 2.365Z"></path><path d="M7.501 4.316a.147.147 0 0 0-.149.149c-.035.63-.043 1.374-.026 2.117 0 .097-.079.184-.175.184-.096 0-.184-.079-.184-.175-.008-.735 0-1.479.027-2.1a.152.152 0 0 0-.158-.157.147.147 0 0 0-.149.149c-.035.63-.043 1.382-.026 2.126 0 .096-.079.184-.175.184a.186.186 0 0 1-.131-.062s-.018-.008-.018-.017a.183.183 0 0 1-.035-.097c-.008-.734 0-1.478.027-2.117a.152.152 0 0 0-.158-.157c-.017 0-.035 0-.044.017H6.11a.18.18 0 0 0-.088.122c-.052.946-.035 2.162 0 3.203 0 .105.035.201.08.298 0 .008.017.017.017.035a.87.87 0 0 0 .21.262l.017.018v1.417h.98c-.009-.105-.026-.219-.035-.367-.07-.762-.052-.92-.052-.92 0-.052.026-.087.07-.113a.832.832 0 0 0 .358-.674v-.026c-.035-1.033-.052-2.196 0-3.115a.152.152 0 0 0-.157-.157L7.5 4.316Z"></path><path d="M9.977 4.15c0-.052-.008-.07-.008-.07-.027-.061-.08-.105-.15-.105a.146.146 0 0 0-.095.035s-.018.009-.053.044c0 0-.105.114-.262.367-.07.114-.15.263-.228.447-.175.385-.359.918-.507 1.636a14.097 14.097 0 0 0-.228 1.671v.079a.18.18 0 0 0 .149.131h.07l.464.07.052.026v.517c-.017.183-.035.41-.061.69h.77c.017-.34.052-.935.079-1.635.052-1.287.096-2.94 0-3.912l.008.009Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--locationPinFood"><path d="M8 14.825 4 10.783c-2.196-2.223-2.196-5.837 0-8.06A5.592 5.592 0 0 1 8 1.054c1.514 0 2.931.594 3.999 1.67 2.196 2.223 2.196 5.837 0 8.06l-4 4.042Zm0-12.46a4.262 4.262 0 0 0-3.063 1.286 4.426 4.426 0 0 0 0 6.213L8 12.96l3.062-3.097a4.426 4.426 0 0 0 0-6.213A4.276 4.276 0 0 0 8 2.365Z"></path><path d="M7.501 4.316a.147.147 0 0 0-.149.149c-.035.63-.043 1.374-.026 2.117 0 .097-.079.184-.175.184-.096 0-.184-.079-.184-.175-.008-.735 0-1.479.027-2.1a.152.152 0 0 0-.158-.157.147.147 0 0 0-.149.149c-.035.63-.043 1.382-.026 2.126 0 .096-.079.184-.175.184a.186.186 0 0 1-.131-.062s-.018-.008-.018-.017a.183.183 0 0 1-.035-.097c-.008-.734 0-1.478.027-2.117a.152.152 0 0 0-.158-.157c-.017 0-.035 0-.044.017H6.11a.18.18 0 0 0-.088.122c-.052.946-.035 2.162 0 3.203 0 .105.035.201.08.298 0 .008.017.017.017.035a.87.87 0 0 0 .21.262l.017.018v1.417h.98c-.009-.105-.026-.219-.035-.367-.07-.762-.052-.92-.052-.92 0-.052.026-.087.07-.113a.832.832 0 0 0 .358-.674v-.026c-.035-1.033-.052-2.196 0-3.115a.152.152 0 0 0-.157-.157L7.5 4.316Z"></path><path d="M9.977 4.15c0-.052-.008-.07-.008-.07-.027-.061-.08-.105-.15-.105a.146.146 0 0 0-.095.035s-.018.009-.053.044c0 0-.105.114-.262.367-.07.114-.15.263-.228.447-.175.385-.359.918-.507 1.636a14.097 14.097 0 0 0-.228 1.671v.079a.18.18 0 0 0 .149.131h.07l.464.07.052.026v.517c-.017.183-.035.41-.061.69h.77c.017-.34.052-.935.079-1.635.052-1.287.096-2.94 0-3.912l.008.009Z"></path></svg>';
 
 class IconLocationPinFood extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconLocationPinFood extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationPinFood', '', null, 'IconLocationPinFood');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationPinFood', '', null, 'IconLocationPinFood');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--locationPinFood');
         this.root.append(svg);
     }

package/dist/IconLocationPinFoodFilled.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--locationPinFoodFilled"><path d="M11.999 2.724a5.592 5.592 0 0 0-4-1.672 5.592 5.592 0 0 0-3.998 1.672c-2.196 2.222-2.196 5.836 0 8.059L8 14.825l3.999-4.042c2.196-2.223 2.196-5.837 0-8.06Zm-4.34 1.741c-.053.919-.035 2.082 0 3.106v.026c0 .298-.14.543-.36.692-.043.026-.06.07-.07.113 0 0-.017.158.053.92.018.148.027.262.035.367h-.98V8.27l-.017-.017a.775.775 0 0 1-.21-.263c0-.009-.018-.017-.018-.035a.83.83 0 0 1-.078-.297c-.044-1.05-.062-2.258 0-3.203 0-.052.035-.105.087-.122h.018c.017 0 .026-.009.043-.018.088 0 .158.061.158.149a28.054 28.054 0 0 0-.026 2.126c0 .035.017.07.035.096 0 0 .017.01.017.018a.186.186 0 0 0 .131.061.172.172 0 0 0 .175-.184c-.008-.743 0-1.496.027-2.126 0-.079.07-.14.148-.149.088 0 .158.062.158.15a27.82 27.82 0 0 0-.026 2.117c0 .096.087.175.183.175.097 0 .175-.088.175-.184-.008-.735 0-1.488.027-2.118 0-.078.07-.14.148-.148.088 0 .158.061.158.148l.009.018Zm2.318 3.596c-.026.691-.06 1.286-.078 1.636h-.77c.026-.28.052-.507.06-.69V8.49s-.025-.026-.052-.026l-.463-.062h-.07c-.088-.026-.132-.078-.15-.14-.008-.035 0-.078 0-.078.045-.648.123-1.199.228-1.672.15-.717.333-1.25.508-1.636.079-.184.157-.324.227-.446a1.97 1.97 0 0 1 .263-.368.388.388 0 0 1 .052-.043.183.183 0 0 1 .097-.035c.07 0 .122.043.148.105 0 0 0 .017.01.07.087.971.043 2.625 0 3.911l-.01-.009Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--locationPinFoodFilled"><path d="M11.999 2.724a5.592 5.592 0 0 0-4-1.672 5.592 5.592 0 0 0-3.998 1.672c-2.196 2.222-2.196 5.836 0 8.059L8 14.825l3.999-4.042c2.196-2.223 2.196-5.837 0-8.06Zm-4.34 1.741c-.053.919-.035 2.082 0 3.106v.026c0 .298-.14.543-.36.692-.043.026-.06.07-.07.113 0 0-.017.158.053.92.018.148.027.262.035.367h-.98V8.27l-.017-.017a.775.775 0 0 1-.21-.263c0-.009-.018-.017-.018-.035a.83.83 0 0 1-.078-.297c-.044-1.05-.062-2.258 0-3.203 0-.052.035-.105.087-.122h.018c.017 0 .026-.009.043-.018.088 0 .158.061.158.149a28.054 28.054 0 0 0-.026 2.126c0 .035.017.07.035.096 0 0 .017.01.017.018a.186.186 0 0 0 .131.061.172.172 0 0 0 .175-.184c-.008-.743 0-1.496.027-2.126 0-.079.07-.14.148-.149.088 0 .158.062.158.15a27.82 27.82 0 0 0-.026 2.117c0 .096.087.175.183.175.097 0 .175-.088.175-.184-.008-.735 0-1.488.027-2.118 0-.078.07-.14.148-.148.088 0 .158.061.158.148l.009.018Zm2.318 3.596c-.026.691-.06 1.286-.078 1.636h-.77c.026-.28.052-.507.06-.69V8.49s-.025-.026-.052-.026l-.463-.062h-.07c-.088-.026-.132-.078-.15-.14-.008-.035 0-.078 0-.078.045-.648.123-1.199.228-1.672.15-.717.333-1.25.508-1.636.079-.184.157-.324.227-.446a1.97 1.97 0 0 1 .263-.368.388.388 0 0 1 .052-.043.183.183 0 0 1 .097-.035c.07 0 .122.043.148.105 0 0 0 .017.01.07.087.971.043 2.625 0 3.911l-.01-.009Z"></path></svg>';
 
 class IconLocationPinFoodFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconLocationPinFoodFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationPinFoodFilled', '', null, 'IconLocationPinFoodFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationPinFoodFilled', '', null, 'IconLocationPinFoodFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--locationPinFoodFilled');
         this.root.append(svg);
     }

package/dist/IconLocationPinFoodFilledLarge.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--locationPinFoodFilledLarge"><path d="M24.05 5.491c-2.152-2.17-5.014-3.368-8.05-3.368-3.036 0-5.898 1.198-8.05 3.368-4.427 4.48-4.427 11.769 0 16.249L16 29.878l8.05-8.138c4.427-4.48 4.427-11.769 0-16.249Zm-8.776 3.474c-.123 1.951-.079 4.419 0 6.589v.079c0 .595-.298 1.11-.753 1.426a.337.337 0 0 0-.149.245s-.043.332.114 1.942c.026.306.053.56.079.779h-2.082v-3.01s-.027-.018-.044-.035a1.822 1.822 0 0 1-.447-.551c-.008-.026-.026-.044-.043-.07a1.68 1.68 0 0 1-.166-.63c-.088-2.223-.132-4.786 0-6.79 0-.123.078-.219.175-.271.008 0 .026 0 .043-.01.035-.008.062-.025.097-.025.183 0 .323.14.332.315v.026c-.079 1.338-.088 2.922-.061 4.48 0 .079.026.148.07.21.008.017.026.026.043.035.07.079.167.14.28.131.21 0 .386-.175.377-.394-.026-1.575-.018-3.167.061-4.506a.33.33 0 0 1 .315-.306c.184 0 .324.14.332.315v.026c-.078 1.33-.087 2.905-.06 4.454 0 .21.183.376.393.376.21 0 .376-.175.376-.385-.026-1.566-.017-3.15.062-4.489 0-.166.148-.297.314-.306.184 0 .324.14.333.315v.026l.009.009Zm4.909 7.595c-.062 1.47-.132 2.73-.175 3.465H18.38c.061-.586.105-1.085.131-1.461V17.47s-.061-.052-.105-.061l-.98-.14-.14-.018c-.184-.035-.28-.14-.315-.28-.026-.079-.017-.175-.017-.175.096-1.365.262-2.537.472-3.543.315-1.523.709-2.66 1.085-3.474.175-.377.341-.691.482-.937.323-.542.55-.787.55-.787.062-.061.106-.087.106-.087a.35.35 0 0 1 .201-.07c.149 0 .262.096.315.218 0 0 .018.044.026.158.193 2.056.097 5.556-.017 8.286h.009Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--locationPinFoodFilledLarge"><path d="M24.05 5.491c-2.152-2.17-5.014-3.368-8.05-3.368-3.036 0-5.898 1.198-8.05 3.368-4.427 4.48-4.427 11.769 0 16.249L16 29.878l8.05-8.138c4.427-4.48 4.427-11.769 0-16.249Zm-8.776 3.474c-.123 1.951-.079 4.419 0 6.589v.079c0 .595-.298 1.11-.753 1.426a.337.337 0 0 0-.149.245s-.043.332.114 1.942c.026.306.053.56.079.779h-2.082v-3.01s-.027-.018-.044-.035a1.822 1.822 0 0 1-.447-.551c-.008-.026-.026-.044-.043-.07a1.68 1.68 0 0 1-.166-.63c-.088-2.223-.132-4.786 0-6.79 0-.123.078-.219.175-.271.008 0 .026 0 .043-.01.035-.008.062-.025.097-.025.183 0 .323.14.332.315v.026c-.079 1.338-.088 2.922-.061 4.48 0 .079.026.148.07.21.008.017.026.026.043.035.07.079.167.14.28.131.21 0 .386-.175.377-.394-.026-1.575-.018-3.167.061-4.506a.33.33 0 0 1 .315-.306c.184 0 .324.14.332.315v.026c-.078 1.33-.087 2.905-.06 4.454 0 .21.183.376.393.376.21 0 .376-.175.376-.385-.026-1.566-.017-3.15.062-4.489 0-.166.148-.297.314-.306.184 0 .324.14.333.315v.026l.009.009Zm4.909 7.595c-.062 1.47-.132 2.73-.175 3.465H18.38c.061-.586.105-1.085.131-1.461V17.47s-.061-.052-.105-.061l-.98-.14-.14-.018c-.184-.035-.28-.14-.315-.28-.026-.079-.017-.175-.017-.175.096-1.365.262-2.537.472-3.543.315-1.523.709-2.66 1.085-3.474.175-.377.341-.691.482-.937.323-.542.55-.787.55-.787.062-.061.106-.087.106-.087a.35.35 0 0 1 .201-.07c.149 0 .262.096.315.218 0 0 .018.044.026.158.193 2.056.097 5.556-.017 8.286h.009Z"></path></svg>';
 
 class IconLocationPinFoodFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconLocationPinFoodFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationPinFoodFilledLarge', '', null, 'IconLocationPinFoodFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationPinFoodFilledLarge', '', null, 'IconLocationPinFoodFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--locationPinFoodFilledLarge');
         this.root.append(svg);
     }

package/dist/IconLocationPinFoodLarge.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--locationPinFoodLarge"><path d="M24.05 5.491c-2.152-2.17-5.014-3.368-8.05-3.368-3.036 0-5.898 1.198-8.05 3.368-4.427 4.48-4.427 11.769 0 16.249L16 29.878l8.05-8.138c4.427-4.48 4.427-11.769 0-16.249Zm-1.242 15.015-6.8 6.878-6.798-6.878c-3.754-3.797-3.754-9.983 0-13.79 1.82-1.837 4.235-2.852 6.799-2.852a9.498 9.498 0 0 1 6.799 2.852c3.753 3.798 3.753 9.984 0 13.79Z"></path><path d="M14.933 8.624a.318.318 0 0 0-.315.306c-.08 1.339-.088 2.922-.062 4.489a.387.387 0 0 1-.376.385.383.383 0 0 1-.394-.377c-.026-1.548-.017-3.123.062-4.453v-.027a.335.335 0 0 0-.333-.315.318.318 0 0 0-.315.307c-.079 1.338-.087 2.931-.061 4.506 0 .21-.166.394-.376.394a.372.372 0 0 1-.28-.132c-.01-.017-.027-.017-.044-.035a.356.356 0 0 1-.07-.21c-.026-1.557-.018-3.14.061-4.48v-.026c0-.175-.157-.315-.332-.315-.035 0-.07.018-.097.026-.008 0-.026 0-.043.01a.315.315 0 0 0-.175.27c-.123 2.013-.08 4.568 0 6.79.008.228.078.438.166.63.009.027.026.044.044.07a1.7 1.7 0 0 0 .446.552c.017.008.026.017.044.035v3.01h2.082c-.026-.219-.044-.473-.079-.779-.157-1.61-.113-1.942-.113-1.942 0-.105.06-.184.148-.245.455-.316.753-.832.753-1.427v-.079c-.079-2.17-.123-4.637 0-6.588v-.027c0-.175-.158-.315-.333-.315l-.008-.008Z"></path><path d="M20.165 8.125a.354.354 0 0 0-.315-.219.35.35 0 0 0-.201.07s-.044.026-.105.088c0 0-.228.245-.551.787-.15.245-.315.56-.482.936-.367.814-.77 1.952-1.085 3.474a26.489 26.489 0 0 0-.472 3.544s0 .096.017.175c.035.14.14.245.315.28l.14.017.98.14s.08.027.105.062v1.094c-.026.384-.07.875-.13 1.46h1.627c.043-.726.113-1.994.175-3.464.113-2.73.21-6.23.017-8.286 0-.114-.026-.158-.026-.158h-.009Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--locationPinFoodLarge"><path d="M24.05 5.491c-2.152-2.17-5.014-3.368-8.05-3.368-3.036 0-5.898 1.198-8.05 3.368-4.427 4.48-4.427 11.769 0 16.249L16 29.878l8.05-8.138c4.427-4.48 4.427-11.769 0-16.249Zm-1.242 15.015-6.8 6.878-6.798-6.878c-3.754-3.797-3.754-9.983 0-13.79 1.82-1.837 4.235-2.852 6.799-2.852a9.498 9.498 0 0 1 6.799 2.852c3.753 3.798 3.753 9.984 0 13.79Z"></path><path d="M14.933 8.624a.318.318 0 0 0-.315.306c-.08 1.339-.088 2.922-.062 4.489a.387.387 0 0 1-.376.385.383.383 0 0 1-.394-.377c-.026-1.548-.017-3.123.062-4.453v-.027a.335.335 0 0 0-.333-.315.318.318 0 0 0-.315.307c-.079 1.338-.087 2.931-.061 4.506 0 .21-.166.394-.376.394a.372.372 0 0 1-.28-.132c-.01-.017-.027-.017-.044-.035a.356.356 0 0 1-.07-.21c-.026-1.557-.018-3.14.061-4.48v-.026c0-.175-.157-.315-.332-.315-.035 0-.07.018-.097.026-.008 0-.026 0-.043.01a.315.315 0 0 0-.175.27c-.123 2.013-.08 4.568 0 6.79.008.228.078.438.166.63.009.027.026.044.044.07a1.7 1.7 0 0 0 .446.552c.017.008.026.017.044.035v3.01h2.082c-.026-.219-.044-.473-.079-.779-.157-1.61-.113-1.942-.113-1.942 0-.105.06-.184.148-.245.455-.316.753-.832.753-1.427v-.079c-.079-2.17-.123-4.637 0-6.588v-.027c0-.175-.158-.315-.333-.315l-.008-.008Z"></path><path d="M20.165 8.125a.354.354 0 0 0-.315-.219.35.35 0 0 0-.201.07s-.044.026-.105.088c0 0-.228.245-.551.787-.15.245-.315.56-.482.936-.367.814-.77 1.952-1.085 3.474a26.489 26.489 0 0 0-.472 3.544s0 .096.017.175c.035.14.14.245.315.28l.14.017.98.14s.08.027.105.062v1.094c-.026.384-.07.875-.13 1.46h1.627c.043-.726.113-1.994.175-3.464.113-2.73.21-6.23.017-8.286 0-.114-.026-.158-.026-.158h-.009Z"></path></svg>';
 
 class IconLocationPinFoodLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconLocationPinFoodLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationPinFoodLarge', '', null, 'IconLocationPinFoodLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationPinFoodLarge', '', null, 'IconLocationPinFoodLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--locationPinFoodLarge');
         this.root.append(svg);
     }

package/dist/IconLocationPinLarge.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--locationPinLarge"><path d="M24.75 26.5c0 2.406-4.533 3.5-8.75 3.5-4.218 0-8.75-1.094-8.75-3.5 0-1.313 1.339-2.214 3.15-2.765l1.426 1.435C9.875 25.625 9 26.237 9 26.5c0 .446 2.406 1.75 7 1.75 4.594 0 7-1.304 7-1.75 0-.262-.875-.875-2.826-1.33l1.426-1.435c1.811.551 3.15 1.453 3.15 2.765ZM8.746 19.605a10.255 10.255 0 1 1 14.508 0L16 26.859l-7.254-7.254Zm-1.251-7.254a8.478 8.478 0 0 0 2.485 6.02l6.02 6.02 6.02-6.02a8.513 8.513 0 1 0-14.525-6.02Zm4.13.149a4.376 4.376 0 1 1 8.751 0 4.376 4.376 0 0 1-8.751 0Zm1.75 0a2.624 2.624 0 1 0 5.248 0 2.624 2.624 0 0 0-5.248 0Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--locationPinLarge"><path d="M24.75 26.5c0 2.406-4.533 3.5-8.75 3.5-4.218 0-8.75-1.094-8.75-3.5 0-1.313 1.339-2.214 3.15-2.765l1.426 1.435C9.875 25.625 9 26.237 9 26.5c0 .446 2.406 1.75 7 1.75 4.594 0 7-1.304 7-1.75 0-.262-.875-.875-2.826-1.33l1.426-1.435c1.811.551 3.15 1.453 3.15 2.765ZM8.746 19.605a10.255 10.255 0 1 1 14.508 0L16 26.859l-7.254-7.254Zm-1.251-7.254a8.478 8.478 0 0 0 2.485 6.02l6.02 6.02 6.02-6.02a8.513 8.513 0 1 0-14.525-6.02Zm4.13.149a4.376 4.376 0 1 1 8.751 0 4.376 4.376 0 0 1-8.751 0Zm1.75 0a2.624 2.624 0 1 0 5.248 0 2.624 2.624 0 0 0-5.248 0Z"></path></svg>';
 
 class IconLocationPinLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconLocationPinLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationPinLarge', '', null, 'IconLocationPinLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationPinLarge', '', null, 'IconLocationPinLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--locationPinLarge');
         this.root.append(svg);
     }

package/dist/IconLocationPinRestaurant.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--locationPinRestaurant"><g clip-path="url(#prefix__clip0_3_53)"><path d="m8 12.436 3.29-3.325a4.734 4.734 0 0 0 0-6.624 4.602 4.602 0 0 0-6.58 0 4.734 4.734 0 0 0 0 6.624L8 12.436Zm-2.354-9.03a3.299 3.299 0 0 1 4.708 0 3.404 3.404 0 0 1 0 4.778L8 10.564l-2.354-2.38a3.404 3.404 0 0 1 0-4.778ZM4.5 13.47h7v1.312h-7V13.47Z"></path></g><defs><clipPath id="prefix__clip0_3_53"><rect width="16" height="16"></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--locationPinRestaurant"><g clip-path="url(#prefix__clip0_3_53)"><path d="m8 12.436 3.29-3.325a4.734 4.734 0 0 0 0-6.624 4.602 4.602 0 0 0-6.58 0 4.734 4.734 0 0 0 0 6.624L8 12.436Zm-2.354-9.03a3.299 3.299 0 0 1 4.708 0 3.404 3.404 0 0 1 0 4.778L8 10.564l-2.354-2.38a3.404 3.404 0 0 1 0-4.778ZM4.5 13.47h7v1.312h-7V13.47Z"></path></g><defs><clipPath id="prefix__clip0_3_53"><rect width="16" height="16"></rect></clipPath></defs></svg>';
 
 class IconLocationPinRestaurant extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconLocationPinRestaurant extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationPinRestaurant', '', null, 'IconLocationPinRestaurant');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationPinRestaurant', '', null, 'IconLocationPinRestaurant');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--locationPinRestaurant');
         this.root.append(svg);
     }

package/dist/IconLocationPinRestaurantLarge.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--locationPinRestaurantLarge"><path d="M22.038 8.895 20.856 7.74a1.688 1.688 0 0 0-1.18-.49H12.35a1.698 1.698 0 0 0-1.172.481L9.98 8.886A3.159 3.159 0 0 0 9 11.153a3.106 3.106 0 0 0 1.794 2.808v4.664a.875.875 0 0 0 .831.875h8.75a.875.875 0 0 0 .875-.875v-4.664a3.107 3.107 0 0 0 .831-5.066h-.043Zm-5.163 8.899V16h-1.75v1.794H12.5V14.25a3.096 3.096 0 0 0 1.601-.63 3.133 3.133 0 0 0 3.894 0c.46.357 1.012.579 1.593.639v3.587l-2.713-.052Zm3.36-5.294a1.408 1.408 0 0 1-1.522-.648H17.18a1.364 1.364 0 0 1-2.362 0h-1.531a1.383 1.383 0 0 1-1.514.648 1.339 1.339 0 0 1-1.024-1.348 1.4 1.4 0 0 1 .438-1.006L12.35 9h7.29l1.18 1.155a1.374 1.374 0 0 1 .43.998 1.338 1.338 0 0 1-1.016 1.347Zm3.815-7a11.305 11.305 0 0 0-16.1 0 11.603 11.603 0 0 0 0 16.249L16 29.886l8.05-8.137a11.603 11.603 0 0 0 0-16.301V5.5ZM22.8 20.462 16 27.375l-6.799-6.913a9.835 9.835 0 0 1 0-13.79 9.546 9.546 0 0 1 13.598 0 9.835 9.835 0 0 1 0 13.79Z"></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--locationPinRestaurantLarge"><path d="M22.038 8.895 20.856 7.74a1.688 1.688 0 0 0-1.18-.49H12.35a1.698 1.698 0 0 0-1.172.481L9.98 8.886A3.159 3.159 0 0 0 9 11.153a3.106 3.106 0 0 0 1.794 2.808v4.664a.875.875 0 0 0 .831.875h8.75a.875.875 0 0 0 .875-.875v-4.664a3.107 3.107 0 0 0 .831-5.066h-.043Zm-5.163 8.899V16h-1.75v1.794H12.5V14.25a3.096 3.096 0 0 0 1.601-.63 3.133 3.133 0 0 0 3.894 0c.46.357 1.012.579 1.593.639v3.587l-2.713-.052Zm3.36-5.294a1.408 1.408 0 0 1-1.522-.648H17.18a1.364 1.364 0 0 1-2.362 0h-1.531a1.383 1.383 0 0 1-1.514.648 1.339 1.339 0 0 1-1.024-1.348 1.4 1.4 0 0 1 .438-1.006L12.35 9h7.29l1.18 1.155a1.374 1.374 0 0 1 .43.998 1.338 1.338 0 0 1-1.016 1.347Zm3.815-7a11.305 11.305 0 0 0-16.1 0 11.603 11.603 0 0 0 0 16.249L16 29.886l8.05-8.137a11.603 11.603 0 0 0 0-16.301V5.5ZM22.8 20.462 16 27.375l-6.799-6.913a9.835 9.835 0 0 1 0-13.79 9.546 9.546 0 0 1 13.598 0 9.835 9.835 0 0 1 0 13.79Z"></path></svg>';
 
 class IconLocationPinRestaurantLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconLocationPinRestaurantLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationPinRestaurantLarge', '', null, 'IconLocationPinRestaurantLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationPinRestaurantLarge', '', null, 'IconLocationPinRestaurantLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--locationPinRestaurantLarge');
         this.root.append(svg);
     }

package/dist/IconLocationPinUser.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--locationPinUser"><path d="M8 4.08a1.54 1.54 0 1 0 0 3.08 1.54 1.54 0 0 0 0-3.08Z"></path><path d="M11.658 3.187a5.136 5.136 0 0 0-7.315 0 5.25 5.25 0 0 0 0 7.377L8 14.265l3.658-3.701a5.25 5.25 0 0 0 0-7.377Zm-2.46 8.164L8 12.56 5.375 9.934a2.012 2.012 0 0 1 1.47-.613h2.126a2.004 2.004 0 0 1 1.549.718L9.199 11.35Zm2.118-2.257a3.238 3.238 0 0 0-2.345-.998H6.845a3.246 3.246 0 0 0-2.231.875A4.078 4.078 0 0 1 5.19 4.02a3.946 3.946 0 0 1 5.618 0 4.095 4.095 0 0 1 .507 5.075Z"></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--locationPinUser"><path d="M8 4.08a1.54 1.54 0 1 0 0 3.08 1.54 1.54 0 0 0 0-3.08Z"></path><path d="M11.658 3.187a5.136 5.136 0 0 0-7.315 0 5.25 5.25 0 0 0 0 7.377L8 14.265l3.658-3.701a5.25 5.25 0 0 0 0-7.377Zm-2.46 8.164L8 12.56 5.375 9.934a2.012 2.012 0 0 1 1.47-.613h2.126a2.004 2.004 0 0 1 1.549.718L9.199 11.35Zm2.118-2.257a3.238 3.238 0 0 0-2.345-.998H6.845a3.246 3.246 0 0 0-2.231.875A4.078 4.078 0 0 1 5.19 4.02a3.946 3.946 0 0 1 5.618 0 4.095 4.095 0 0 1 .507 5.075Z"></path></svg>';
 
 class IconLocationPinUser extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconLocationPinUser extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationPinUser', '', null, 'IconLocationPinUser');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationPinUser', '', null, 'IconLocationPinUser');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--locationPinUser');
         this.root.append(svg);
     }

package/dist/IconLocationPinUserLarge.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--locationPinUserLarge"><path d="M15.799 15.256a4.13 4.13 0 1 0-4.13-4.121 4.122 4.122 0 0 0 4.13 4.121Zm0-6.597a2.476 2.476 0 1 1 0 4.952 2.476 2.476 0 0 1 0-4.952Z"></path><path d="M23.586 6.13a10.65 10.65 0 0 0-15.172 0 10.92 10.92 0 0 0 0 15.321L16 29.125l7.586-7.674a10.92 10.92 0 0 0 0-15.321Zm-4.655 17.684-2.056 2.117-.875.875-2.765-2.791-3.57-3.64a4.908 4.908 0 0 1 3.833-1.82H18.1a4.847 4.847 0 0 1 4.025 2.065l-3.194 3.194Zm4.288-4.463a6.554 6.554 0 0 0-5.119-2.476h-4.603a6.564 6.564 0 0 0-4.9 2.179 9.275 9.275 0 0 1 .99-11.804 9.004 9.004 0 0 1 12.827 0 9.275 9.275 0 0 1 .805 12.101Z"></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--locationPinUserLarge"><path d="M15.799 15.256a4.13 4.13 0 1 0-4.13-4.121 4.122 4.122 0 0 0 4.13 4.121Zm0-6.597a2.476 2.476 0 1 1 0 4.952 2.476 2.476 0 0 1 0-4.952Z"></path><path d="M23.586 6.13a10.65 10.65 0 0 0-15.172 0 10.92 10.92 0 0 0 0 15.321L16 29.125l7.586-7.674a10.92 10.92 0 0 0 0-15.321Zm-4.655 17.684-2.056 2.117-.875.875-2.765-2.791-3.57-3.64a4.908 4.908 0 0 1 3.833-1.82H18.1a4.847 4.847 0 0 1 4.025 2.065l-3.194 3.194Zm4.288-4.463a6.554 6.554 0 0 0-5.119-2.476h-4.603a6.564 6.564 0 0 0-4.9 2.179 9.275 9.275 0 0 1 .99-11.804 9.004 9.004 0 0 1 12.827 0 9.275 9.275 0 0 1 .805 12.101Z"></path></svg>';
 
 class IconLocationPinUserLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconLocationPinUserLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationPinUserLarge', '', null, 'IconLocationPinUserLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationPinUserLarge', '', null, 'IconLocationPinUserLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--locationPinUserLarge');
         this.root.append(svg);
     }

package/dist/IconLocationRestaurant.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--locationRestaurant"><path d="M12.727 7.834A3.22 3.22 0 0 0 8.194 12.4l2.266 2.302 2.267-2.302a3.246 3.246 0 0 0 0-4.567Zm-.928 3.649L10.46 12.83l-1.338-1.347a1.943 1.943 0 0 1 0-2.722 1.881 1.881 0 0 1 2.677 0 1.943 1.943 0 0 1 0 2.722ZM4.694 5.61a2.284 2.284 0 0 0 2.783 0 2.336 2.336 0 0 0 1.916.42 2.275 2.275 0 0 0 1.067-3.84l-.875-.832A1.251 1.251 0 0 0 8.71 1H3.46a1.234 1.234 0 0 0-.875.35l-.875.875a2.257 2.257 0 0 0 .167 3.43v4.751a.665.665 0 0 0 .656.657h3.552V9.75H3.242V6.075a2.24 2.24 0 0 0 1.452-.464ZM2.673 3.126l.787-.813h5.198l.875.875a.989.989 0 0 1 .297.708.927.927 0 0 1-.7.875.971.971 0 0 1-1.085-.49H6.908a.989.989 0 0 1-1.645 0H4.125a.945.945 0 0 1-1.05.447.919.919 0 0 1-.63-1.27c.053-.125.13-.237.228-.332Z"></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--locationRestaurant"><path d="M12.727 7.834A3.22 3.22 0 0 0 8.194 12.4l2.266 2.302 2.267-2.302a3.246 3.246 0 0 0 0-4.567Zm-.928 3.649L10.46 12.83l-1.338-1.347a1.943 1.943 0 0 1 0-2.722 1.881 1.881 0 0 1 2.677 0 1.943 1.943 0 0 1 0 2.722ZM4.694 5.61a2.284 2.284 0 0 0 2.783 0 2.336 2.336 0 0 0 1.916.42 2.275 2.275 0 0 0 1.067-3.84l-.875-.832A1.251 1.251 0 0 0 8.71 1H3.46a1.234 1.234 0 0 0-.875.35l-.875.875a2.257 2.257 0 0 0 .167 3.43v4.751a.665.665 0 0 0 .656.657h3.552V9.75H3.242V6.075a2.24 2.24 0 0 0 1.452-.464ZM2.673 3.126l.787-.813h5.198l.875.875a.989.989 0 0 1 .297.708.927.927 0 0 1-.7.875.971.971 0 0 1-1.085-.49H6.908a.989.989 0 0 1-1.645 0H4.125a.945.945 0 0 1-1.05.447.919.919 0 0 1-.63-1.27c.053-.125.13-.237.228-.332Z"></path></svg>';
 
 class IconLocationRestaurant extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconLocationRestaurant extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationRestaurant', '', null, 'IconLocationRestaurant');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationRestaurant', '', null, 'IconLocationRestaurant');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--locationRestaurant');
         this.root.append(svg);
     }

package/dist/IconLocationRestaurantLarge.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--locationRestaurantLarge"><path d="m16 14.618 3.596-3.632a5.171 5.171 0 0 0 0-7.236 5.05 5.05 0 0 0-7.192 0 5.171 5.171 0 0 0 0 7.236L16 14.618Zm-2.345-9.625a3.3 3.3 0 0 1 4.69 0 3.404 3.404 0 0 1 0 4.777L16 12.133l-2.345-2.38a3.404 3.404 0 0 1 0-4.778v.018Zm13.3 10.132a3.982 3.982 0 0 0-1.453-3.036l-1.933-1.654a2.46 2.46 0 0 0-.875-.455l-1.112 1.645h.464a.542.542 0 0 1 .376.14l1.943 1.68a2.248 2.248 0 0 1 .875 1.75 2.468 2.468 0 0 1-2.1 2.293 3.028 3.028 0 0 1-3.168-1.173h-1.505A2.904 2.904 0 0 1 16 17.523a2.905 2.905 0 0 1-2.468-1.243h-1.47a3.028 3.028 0 0 1-3.167 1.173 2.467 2.467 0 0 1-2.1-2.328 2.266 2.266 0 0 1 .875-1.75l1.969-1.68a.603.603 0 0 1 .358-.07h.875L9.77 9.875a2.406 2.406 0 0 0-1.278.534l-1.977 1.706a3.998 3.998 0 0 0-1.47 3.01 4.051 4.051 0 0 0 2.205 3.5v10.5h17.5V18.686a4.069 4.069 0 0 0 2.205-3.56Zm-11.83 12.25V24.75a.875.875 0 1 1 1.75 0v2.625h-1.75Zm3.5 0V24.75a2.625 2.625 0 1 0-5.25 0v2.625H9V19.23a4.9 4.9 0 0 0 3.797-1.146 4.9 4.9 0 0 0 6.405 0A4.9 4.9 0 0 0 23 19.229v8.146h-4.375Z"></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--locationRestaurantLarge"><path d="m16 14.618 3.596-3.632a5.171 5.171 0 0 0 0-7.236 5.05 5.05 0 0 0-7.192 0 5.171 5.171 0 0 0 0 7.236L16 14.618Zm-2.345-9.625a3.3 3.3 0 0 1 4.69 0 3.404 3.404 0 0 1 0 4.777L16 12.133l-2.345-2.38a3.404 3.404 0 0 1 0-4.778v.018Zm13.3 10.132a3.982 3.982 0 0 0-1.453-3.036l-1.933-1.654a2.46 2.46 0 0 0-.875-.455l-1.112 1.645h.464a.542.542 0 0 1 .376.14l1.943 1.68a2.248 2.248 0 0 1 .875 1.75 2.468 2.468 0 0 1-2.1 2.293 3.028 3.028 0 0 1-3.168-1.173h-1.505A2.904 2.904 0 0 1 16 17.523a2.905 2.905 0 0 1-2.468-1.243h-1.47a3.028 3.028 0 0 1-3.167 1.173 2.467 2.467 0 0 1-2.1-2.328 2.266 2.266 0 0 1 .875-1.75l1.969-1.68a.603.603 0 0 1 .358-.07h.875L9.77 9.875a2.406 2.406 0 0 0-1.278.534l-1.977 1.706a3.998 3.998 0 0 0-1.47 3.01 4.051 4.051 0 0 0 2.205 3.5v10.5h17.5V18.686a4.069 4.069 0 0 0 2.205-3.56Zm-11.83 12.25V24.75a.875.875 0 1 1 1.75 0v2.625h-1.75Zm3.5 0V24.75a2.625 2.625 0 1 0-5.25 0v2.625H9V19.23a4.9 4.9 0 0 0 3.797-1.146 4.9 4.9 0 0 0 6.405 0A4.9 4.9 0 0 0 23 19.229v8.146h-4.375Z"></path></svg>';
 
 class IconLocationRestaurantLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconLocationRestaurantLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationRestaurantLarge', '', null, 'IconLocationRestaurantLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationRestaurantLarge', '', null, 'IconLocationRestaurantLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--locationRestaurantLarge');
         this.root.append(svg);
     }

package/dist/IconLocationTarget.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--locationTarget"><path d="M14.624 7.344h-1.636a5.05 5.05 0 0 0-4.332-4.332V1.376H7.344v1.636a5.049 5.049 0 0 0-4.332 4.375H1.376V8.7h1.636a5.049 5.049 0 0 0 4.375 4.331v1.636H8.7v-1.68a5.049 5.049 0 0 0 4.288-4.33h1.636V7.343ZM8 11.719A3.719 3.719 0 1 1 11.719 8 3.728 3.728 0 0 1 8 11.719ZM9.417 8A1.417 1.417 0 1 1 8 6.582 1.409 1.409 0 0 1 9.417 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--locationTarget"><path d="M14.624 7.344h-1.636a5.05 5.05 0 0 0-4.332-4.332V1.376H7.344v1.636a5.049 5.049 0 0 0-4.332 4.375H1.376V8.7h1.636a5.049 5.049 0 0 0 4.375 4.331v1.636H8.7v-1.68a5.049 5.049 0 0 0 4.288-4.33h1.636V7.343ZM8 11.719A3.719 3.719 0 1 1 11.719 8 3.728 3.728 0 0 1 8 11.719ZM9.417 8A1.417 1.417 0 1 1 8 6.582 1.409 1.409 0 0 1 9.417 8Z"></path></svg>';
 
 class IconLocationTarget extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconLocationTarget extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationTarget', '', null, 'IconLocationTarget');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationTarget', '', null, 'IconLocationTarget');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--locationTarget');
         this.root.append(svg);
     }

package/dist/IconLocationTargetLarge.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--locationTargetLarge"><path d="M29.125 15.125h-3.5a9.625 9.625 0 0 0-8.75-8.706V2.875h-1.75v3.544a9.625 9.625 0 0 0-8.706 8.706H2.875v1.75h3.544a9.625 9.625 0 0 0 8.706 8.75v3.5h1.75v-3.5a9.625 9.625 0 0 0 8.75-8.75h3.5v-1.75ZM16 23.875a7.875 7.875 0 1 1 0-15.75 7.875 7.875 0 0 1 0 15.75Zm0-12.25a4.375 4.375 0 1 0 0 8.75 4.375 4.375 0 0 0 0-8.75Zm0 7a2.625 2.625 0 1 1 0-5.25 2.625 2.625 0 0 1 0 5.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--locationTargetLarge"><path d="M29.125 15.125h-3.5a9.625 9.625 0 0 0-8.75-8.706V2.875h-1.75v3.544a9.625 9.625 0 0 0-8.706 8.706H2.875v1.75h3.544a9.625 9.625 0 0 0 8.706 8.75v3.5h1.75v-3.5a9.625 9.625 0 0 0 8.75-8.75h3.5v-1.75ZM16 23.875a7.875 7.875 0 1 1 0-15.75 7.875 7.875 0 0 1 0 15.75Zm0-12.25a4.375 4.375 0 1 0 0 8.75 4.375 4.375 0 0 0 0-8.75Zm0 7a2.625 2.625 0 1 1 0-5.25 2.625 2.625 0 0 1 0 5.25Z"></path></svg>';
 
 class IconLocationTargetLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconLocationTargetLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationTargetLarge', '', null, 'IconLocationTargetLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--locationTargetLarge', '', null, 'IconLocationTargetLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--locationTargetLarge');
         this.root.append(svg);
     }

package/dist/IconLock.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--lock"><path d="M7.344 11.5V8.875h1.312V11.5H7.344Z"></path><path fill-rule="evenodd" d="M3.844 5.375v1.094h-1.75v6.221l.245.201A9.362 9.362 0 0 0 8 14.781a9.205 9.205 0 0 0 5.661-1.89l.245-.201V6.469h-1.75V5.375a4.156 4.156 0 1 0-8.312 0Zm7 0v1.094H5.156V5.375a2.844 2.844 0 1 1 5.688 0Zm-7.438 6.676A8.094 8.094 0 0 0 8 13.47a7.945 7.945 0 0 0 4.594-1.418v-4.27H3.406v4.27Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--lock"><path d="M7.344 11.5V8.875h1.312V11.5H7.344Z"></path><path fill-rule="evenodd" d="M3.844 5.375v1.094h-1.75v6.221l.245.201A9.362 9.362 0 0 0 8 14.781a9.205 9.205 0 0 0 5.661-1.89l.245-.201V6.469h-1.75V5.375a4.156 4.156 0 1 0-8.312 0Zm7 0v1.094H5.156V5.375a2.844 2.844 0 1 1 5.688 0Zm-7.438 6.676A8.094 8.094 0 0 0 8 13.47a7.945 7.945 0 0 0 4.594-1.418v-4.27H3.406v4.27Z" clip-rule="evenodd"></path></svg>';
 
 class IconLock extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconLock extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--lock', '', null, 'IconLock');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--lock', '', null, 'IconLock');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--lock');
         this.root.append(svg);
     }

package/dist/IconLockLarge.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--lockLarge"><path d="M23.875 14.25h-1.75v-3.5a6.125 6.125 0 1 0-12.25 0v3.5h-1.75v-3.5a7.875 7.875 0 0 1 15.75 0v3.5Z"></path><path d="M16 29.125a18.209 18.209 0 0 1-11.043-3.692l-.332-.263V13.375h22.75V25.17l-.332.262A17.92 17.92 0 0 1 16 29.126Zm-9.625-4.804A16.625 16.625 0 0 0 16 27.375a16.267 16.267 0 0 0 9.625-3.054v-9.196H6.375v9.196Z"></path><path d="M16.875 17.75h-1.75V23h1.75v-5.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--lockLarge"><path d="M23.875 14.25h-1.75v-3.5a6.125 6.125 0 1 0-12.25 0v3.5h-1.75v-3.5a7.875 7.875 0 0 1 15.75 0v3.5Z"></path><path d="M16 29.125a18.209 18.209 0 0 1-11.043-3.692l-.332-.263V13.375h22.75V25.17l-.332.262A17.92 17.92 0 0 1 16 29.126Zm-9.625-4.804A16.625 16.625 0 0 0 16 27.375a16.267 16.267 0 0 0 9.625-3.054v-9.196H6.375v9.196Z"></path><path d="M16.875 17.75h-1.75V23h1.75v-5.25Z"></path></svg>';
 
 class IconLockLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconLockLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--lockLarge', '', null, 'IconLockLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--lockLarge', '', null, 'IconLockLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--lockLarge');
         this.root.append(svg);
     }

package/dist/IconLogOut.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--logOut"><path d="M13.906 8a5.906 5.906 0 1 1-8.531-5.25v1.487a4.594 4.594 0 1 0 5.25 0V2.75A5.915 5.915 0 0 1 13.906 8Zm-5.25-7H7.344v5.25h1.312V1Z"></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--logOut"><path d="M13.906 8a5.906 5.906 0 1 1-8.531-5.25v1.487a4.594 4.594 0 1 0 5.25 0V2.75A5.915 5.915 0 0 1 13.906 8Zm-5.25-7H7.344v5.25h1.312V1Z"></path></svg>';
 
 class IconLogOut extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconLogOut extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--logOut', '', null, 'IconLogOut');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--logOut', '', null, 'IconLogOut');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--logOut');
         this.root.append(svg);
     }

package/dist/IconLogOutLarge.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--logOutLarge"><path d="M27.375 16.875a11.375 11.375 0 1 1-15.75-10.5v1.934a9.625 9.625 0 1 0 8.75 0V6.375a11.375 11.375 0 0 1 7 10.5Zm-10.5-14h-1.75v10.5h1.75v-10.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--logOutLarge"><path d="M27.375 16.875a11.375 11.375 0 1 1-15.75-10.5v1.934a9.625 9.625 0 1 0 8.75 0V6.375a11.375 11.375 0 0 1 7 10.5Zm-10.5-14h-1.75v10.5h1.75v-10.5Z"></path></svg>';
 
 class IconLogOutLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconLogOutLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--logOutLarge', '', null, 'IconLogOutLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--logOutLarge', '', null, 'IconLogOutLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--logOutLarge');
         this.root.append(svg);
     }

package/dist/IconLogoPoints.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--points"><path d="M14.125 6.066c0-.84-.639-1.522-1.452-1.618.192-.254.332-.552.393-.875a1.743 1.743 0 0 0-.866-1.838c-1.4-.796-2.642.306-3.071.683-.446.393-.831.752-1.155 1.076A27.011 27.011 0 0 0 6.8 2.409c-.41-.368-1.653-1.47-3.053-.665A1.743 1.743 0 0 0 2.88 3.58c.062.324.202.622.403.884a1.637 1.637 0 0 0-1.391 1.61V8.84h1.11v4.043c0 .892.727 1.627 1.628 1.636l6.72.026a1.629 1.629 0 0 0 1.636-1.627V8.84h1.147V6.075l-.009-.009Zm-1.312 0V7.52H8.62V5.743h3.877c.175 0 .323.148.323.323h-.008Zm-2.8-2.686c.49-.437 1.015-.805 1.54-.507a.463.463 0 0 1 .227.455c-.07.35-.315.507-.359.542-.656.394-1.662.446-2.37.411.28-.271.603-.568.97-.892l-.008-.009Zm-5.627-.507a.824.824 0 0 1 .385-.105c.394 0 .78.288 1.164.63.35.315.674.603.954.875-.718.035-1.715-.018-2.371-.412a.777.777 0 0 1-.36-.533.445.445 0 0 1 .228-.455Zm-1.19 3.193c0-.175.15-.323.324-.323H7.3v1.776H3.188V6.066h.008Zm1.112 6.817V8.84h3v4.375H4.624a.343.343 0 0 1-.324-.332h.009Zm7.367.026a.326.326 0 0 1-.096.227.325.325 0 0 1-.228.097h-2.73V8.84h3.045v4.078l.01-.01Z"></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--points"><path d="M14.125 6.066c0-.84-.639-1.522-1.452-1.618.192-.254.332-.552.393-.875a1.743 1.743 0 0 0-.866-1.838c-1.4-.796-2.642.306-3.071.683-.446.393-.831.752-1.155 1.076A27.011 27.011 0 0 0 6.8 2.409c-.41-.368-1.653-1.47-3.053-.665A1.743 1.743 0 0 0 2.88 3.58c.062.324.202.622.403.884a1.637 1.637 0 0 0-1.391 1.61V8.84h1.11v4.043c0 .892.727 1.627 1.628 1.636l6.72.026a1.629 1.629 0 0 0 1.636-1.627V8.84h1.147V6.075l-.009-.009Zm-1.312 0V7.52H8.62V5.743h3.877c.175 0 .323.148.323.323h-.008Zm-2.8-2.686c.49-.437 1.015-.805 1.54-.507a.463.463 0 0 1 .227.455c-.07.35-.315.507-.359.542-.656.394-1.662.446-2.37.411.28-.271.603-.568.97-.892l-.008-.009Zm-5.627-.507a.824.824 0 0 1 .385-.105c.394 0 .78.288 1.164.63.35.315.674.603.954.875-.718.035-1.715-.018-2.371-.412a.777.777 0 0 1-.36-.533.445.445 0 0 1 .228-.455Zm-1.19 3.193c0-.175.15-.323.324-.323H7.3v1.776H3.188V6.066h.008Zm1.112 6.817V8.84h3v4.375H4.624a.343.343 0 0 1-.324-.332h.009Zm7.367.026a.326.326 0 0 1-.096.227.325.325 0 0 1-.228.097h-2.73V8.84h3.045v4.078l.01-.01Z"></path></svg>';
 
 class IconLogoPoints extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconLogoPoints extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--points', '', null, 'IconLogoPoints');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--points', '', null, 'IconLogoPoints');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--points');
         this.root.append(svg);
     }

package/dist/IconLogoPointsLarge.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--pointsLarge"><path d="M26.614 12.535a2.627 2.627 0 0 0-2.625-2.625h-.298a3.602 3.602 0 0 0 1.033-1.89c.218-1.155-.35-2.38-1.4-2.975-2.328-1.321-4.428.542-5.154 1.19a45.752 45.752 0 0 0-2.266 2.117 48.599 48.599 0 0 0-2.31-2.152c-.692-.613-2.792-2.476-5.12-1.155-1.05.595-1.627 1.82-1.4 2.975.14.726.508 1.391 1.033 1.89h-.166a2.627 2.627 0 0 0-2.625 2.625v4.646h1.986v7.543a2.63 2.63 0 0 0 2.617 2.625l12.03.043h.01c.7 0 1.356-.27 1.855-.76.498-.5.77-1.156.77-1.856V17.19h2.056v-4.646l-.026-.009ZM19.36 7.504c.919-.814 2.004-1.558 3.089-.945.472.271.612.77.542 1.128-.114.578-.481.98-.787 1.164-1.514.901-3.824.858-5.067.718a49.913 49.913 0 0 1 2.223-2.065ZM9.332 6.559c.28-.158.56-.228.832-.228.805 0 1.583.578 2.3 1.208a51.69 51.69 0 0 1 2.18 2.03c-1.252.14-3.553.183-5.067-.718a1.781 1.781 0 0 1-.787-1.164c-.07-.35.07-.857.542-1.128ZM7.05 12.535c0-.481.393-.875.875-.875h7.087v3.78H7.05v-2.905Zm1.986 12.189V17.18h5.976v8.435L9.91 25.6a.87.87 0 0 1-.866-.875h-.01Zm13.781.043a.866.866 0 0 1-.866.875l-5.18-.017v-8.444h6.055v7.586h-.009Zm2.056-9.336h-8.11v-3.78h7.227c.48 0 .875.394.875.875v2.896l.008.01Z"></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--pointsLarge"><path d="M26.614 12.535a2.627 2.627 0 0 0-2.625-2.625h-.298a3.602 3.602 0 0 0 1.033-1.89c.218-1.155-.35-2.38-1.4-2.975-2.328-1.321-4.428.542-5.154 1.19a45.752 45.752 0 0 0-2.266 2.117 48.599 48.599 0 0 0-2.31-2.152c-.692-.613-2.792-2.476-5.12-1.155-1.05.595-1.627 1.82-1.4 2.975.14.726.508 1.391 1.033 1.89h-.166a2.627 2.627 0 0 0-2.625 2.625v4.646h1.986v7.543a2.63 2.63 0 0 0 2.617 2.625l12.03.043h.01c.7 0 1.356-.27 1.855-.76.498-.5.77-1.156.77-1.856V17.19h2.056v-4.646l-.026-.009ZM19.36 7.504c.919-.814 2.004-1.558 3.089-.945.472.271.612.77.542 1.128-.114.578-.481.98-.787 1.164-1.514.901-3.824.858-5.067.718a49.913 49.913 0 0 1 2.223-2.065ZM9.332 6.559c.28-.158.56-.228.832-.228.805 0 1.583.578 2.3 1.208a51.69 51.69 0 0 1 2.18 2.03c-1.252.14-3.553.183-5.067-.718a1.781 1.781 0 0 1-.787-1.164c-.07-.35.07-.857.542-1.128ZM7.05 12.535c0-.481.393-.875.875-.875h7.087v3.78H7.05v-2.905Zm1.986 12.189V17.18h5.976v8.435L9.91 25.6a.87.87 0 0 1-.866-.875h-.01Zm13.781.043a.866.866 0 0 1-.866.875l-5.18-.017v-8.444h6.055v7.586h-.009Zm2.056-9.336h-8.11v-3.78h7.227c.48 0 .875.394.875.875v2.896l.008.01Z"></path></svg>';
 
 class IconLogoPointsLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconLogoPointsLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pointsLarge', '', null, 'IconLogoPointsLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--pointsLarge', '', null, 'IconLogoPointsLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--pointsLarge');
         this.root.append(svg);
     }

package/dist/IconLogoSkip.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--skip"><path fill-rule="evenodd" d="M9.421 6.878c-.439-.542-.721-.928-.655-1.353.08-.529.429-1.063 1.04-1.063.672 0 .846.15 1.222.346a.303.303 0 0 0 .14.036c.129 0 .243-.09.28-.222L12 2.548l-.382-.198-.056-.028-.018-.01A3.245 3.245 0 0 0 10.105 2C8.024 2 6.131 3.655 5.82 5.69c-.218 1.423.603 2.427 1.202 3.16l.053.064c.433.516.737.917.663 1.382-.124.807-.721 1.073-1.22 1.073-.79 0-1.02-.137-1.455-.364-.061-.032-.176-.091-.274-.056a.308.308 0 0 0-.194.211l-.526 2-.068.257S5.035 14 6.233 14c1.774 0 3.307-.755 4.217-2.58.228-.467.363-.977.396-1.5.046-1.333-.884-2.38-1.425-3.042Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--skip"><path fill-rule="evenodd" d="M9.421 6.878c-.439-.542-.721-.928-.655-1.353.08-.529.429-1.063 1.04-1.063.672 0 .846.15 1.222.346a.303.303 0 0 0 .14.036c.129 0 .243-.09.28-.222L12 2.548l-.382-.198-.056-.028-.018-.01A3.245 3.245 0 0 0 10.105 2C8.024 2 6.131 3.655 5.82 5.69c-.218 1.423.603 2.427 1.202 3.16l.053.064c.433.516.737.917.663 1.382-.124.807-.721 1.073-1.22 1.073-.79 0-1.02-.137-1.455-.364-.061-.032-.176-.091-.274-.056a.308.308 0 0 0-.194.211l-.526 2-.068.257S5.035 14 6.233 14c1.774 0 3.307-.755 4.217-2.58.228-.467.363-.977.396-1.5.046-1.333-.884-2.38-1.425-3.042Z" clip-rule="evenodd"></path></svg>';
 
 class IconLogoSkip extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconLogoSkip extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--skip', '', null, 'IconLogoSkip');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--skip', '', null, 'IconLogoSkip');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--skip');
         this.root.append(svg);
     }