@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/dist/IconUserHighlightLarge.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--userHighlightLarge"><path d="M16.875 9h-1.75V3.75h1.75V9ZM23.7 7.775l-1.4-1.05-2.625 3.5 1.4 1.05 2.625-3.5Zm-11.375 2.45L9.7 6.725l-1.4 1.05 2.625 3.5 1.4-1.05ZM11.188 16A4.813 4.813 0 1 1 16 20.813 4.821 4.821 0 0 1 11.187 16Zm1.75 0a3.063 3.063 0 1 0 6.125 0 3.063 3.063 0 0 0-6.125 0Zm11.165 9.879a6.249 6.249 0 0 0-5.924-3.754h-4.375a6.248 6.248 0 0 0-5.924 3.754l-.892 2.371H8.86l.674-1.75a4.498 4.498 0 0 1 4.287-2.625h4.375a4.498 4.498 0 0 1 4.288 2.625l.673 1.75h1.882l-.936-2.371Z"></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--userHighlightLarge"><path d="M16.875 9h-1.75V3.75h1.75V9ZM23.7 7.775l-1.4-1.05-2.625 3.5 1.4 1.05 2.625-3.5Zm-11.375 2.45L9.7 6.725l-1.4 1.05 2.625 3.5 1.4-1.05ZM11.188 16A4.813 4.813 0 1 1 16 20.813 4.821 4.821 0 0 1 11.187 16Zm1.75 0a3.063 3.063 0 1 0 6.125 0 3.063 3.063 0 0 0-6.125 0Zm11.165 9.879a6.249 6.249 0 0 0-5.924-3.754h-4.375a6.248 6.248 0 0 0-5.924 3.754l-.892 2.371H8.86l.674-1.75a4.498 4.498 0 0 1 4.287-2.625h4.375a4.498 4.498 0 0 1 4.288 2.625l.673 1.75h1.882l-.936-2.371Z"></path></svg>';
 
 class IconUserHighlightLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconUserHighlightLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--userHighlightLarge', '', null, 'IconUserHighlightLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--userHighlightLarge', '', null, 'IconUserHighlightLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--userHighlightLarge');
         this.root.append(svg);
     }

package/dist/IconUserLarge.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--userLarge"><path d="M23.823 22.501a6.011 6.011 0 0 0-5.723-3.876H13.91a6.029 6.029 0 0 0-5.731 3.894l-1.182 3.316h1.83l.98-2.756a4.296 4.296 0 0 1 4.103-2.704H18.1a4.305 4.305 0 0 1 4.104 2.747l.971 2.757h1.838l-1.19-3.378Z"></path><path d="M14.994 16.656a4.437 4.437 0 0 0 5.32-5.329 4.426 4.426 0 0 0-7.442-2.11 4.428 4.428 0 0 0 2.122 7.44Zm.481-7a2.704 2.704 0 1 1-2.1 2.153 2.704 2.704 0 0 1 2.1-2.118v-.035Z"></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--userLarge"><path d="M23.823 22.501a6.011 6.011 0 0 0-5.723-3.876H13.91a6.029 6.029 0 0 0-5.731 3.894l-1.182 3.316h1.83l.98-2.756a4.296 4.296 0 0 1 4.103-2.704H18.1a4.305 4.305 0 0 1 4.104 2.747l.971 2.757h1.838l-1.19-3.378Z"></path><path d="M14.994 16.656a4.437 4.437 0 0 0 5.32-5.329 4.426 4.426 0 0 0-7.442-2.11 4.428 4.428 0 0 0 2.122 7.44Zm.481-7a2.704 2.704 0 1 1-2.1 2.153 2.704 2.704 0 0 1 2.1-2.118v-.035Z"></path></svg>';
 
 class IconUserLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconUserLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--userLarge', '', null, 'IconUserLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--userLarge', '', null, 'IconUserLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--userLarge');
         this.root.append(svg);
     }

package/dist/IconUserMarker.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--userMarker"><g clip-path="url(#prefix__clip0_18_1932)"><path d="M9.855 7.895a2.23 2.23 0 0 0-.306-2.747 2.266 2.266 0 0 0-3.124 0A2.223 2.223 0 0 0 6.154 8c-.585.25-1.05.717-1.295 1.304l-.499 1.321h1.4l.324-.875a1.295 1.295 0 0 1 1.225-.744h1.566a1.286 1.286 0 0 1 1.225.744l.324.875h1.409l-.5-1.321a2.477 2.477 0 0 0-1.478-1.409Zm-2.503-1.82A.875.875 0 0 1 8 5.812a.875.875 0 0 1 .639 1.54.906.906 0 1 1-1.286-1.277Zm5.898-3.981H2.75a1.54 1.54 0 0 0-1.531 1.531V11.5a1.54 1.54 0 0 0 1.531 1.531h3.229L8 15.052l2.021-2.02h3.229a1.54 1.54 0 0 0 1.531-1.532V3.625a1.54 1.54 0 0 0-1.531-1.531Zm.219 9.406a.219.219 0 0 1-.219.219H9.479L8 13.198l-1.479-1.48H2.75a.219.219 0 0 1-.219-.218V3.625a.219.219 0 0 1 .219-.219h10.5a.219.219 0 0 1 .219.219V11.5Z"></path></g><defs><clipPath id="prefix__clip0_18_1932"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userMarker"><g clip-path="url(#prefix__clip0_18_1932)"><path d="M9.855 7.895a2.23 2.23 0 0 0-.306-2.747 2.266 2.266 0 0 0-3.124 0A2.223 2.223 0 0 0 6.154 8c-.585.25-1.05.717-1.295 1.304l-.499 1.321h1.4l.324-.875a1.295 1.295 0 0 1 1.225-.744h1.566a1.286 1.286 0 0 1 1.225.744l.324.875h1.409l-.5-1.321a2.477 2.477 0 0 0-1.478-1.409Zm-2.503-1.82A.875.875 0 0 1 8 5.812a.875.875 0 0 1 .639 1.54.906.906 0 1 1-1.286-1.277Zm5.898-3.981H2.75a1.54 1.54 0 0 0-1.531 1.531V11.5a1.54 1.54 0 0 0 1.531 1.531h3.229L8 15.052l2.021-2.02h3.229a1.54 1.54 0 0 0 1.531-1.532V3.625a1.54 1.54 0 0 0-1.531-1.531Zm.219 9.406a.219.219 0 0 1-.219.219H9.479L8 13.198l-1.479-1.48H2.75a.219.219 0 0 1-.219-.218V3.625a.219.219 0 0 1 .219-.219h10.5a.219.219 0 0 1 .219.219V11.5Z"></path></g><defs><clipPath id="prefix__clip0_18_1932"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconUserMarker extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconUserMarker extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--userMarker', '', null, 'IconUserMarker');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--userMarker', '', null, 'IconUserMarker');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--userMarker');
         this.root.append(svg);
     }

package/dist/IconUserMarkerLarge.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--userMarkerLarge"><path d="M16 15.125a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0-5.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5Zm5.25 8.566.691 1.934H20.07l-.499-1.313a2.204 2.204 0 0 0-2.126-1.312h-2.511a2.205 2.205 0 0 0-2.127 1.313l-.498 1.312h-1.873l.726-1.934A3.972 3.972 0 0 1 14.932 16h2.512a3.972 3.972 0 0 1 3.806 2.441ZM26.5 4.625h-21A2.625 2.625 0 0 0 2.875 7.25v14.875A2.625 2.625 0 0 0 5.5 24.75h6.641L16 28.609l3.859-3.859H26.5a2.625 2.625 0 0 0 2.625-2.625V7.25A2.625 2.625 0 0 0 26.5 4.625Zm.875 17.5A.875.875 0 0 1 26.5 23h-7.359L16 26.141 12.859 23H5.5a.875.875 0 0 1-.875-.875V7.25a.875.875 0 0 1 .875-.875h21a.875.875 0 0 1 .875.875v14.875Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--userMarkerLarge"><path d="M16 15.125a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0-5.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5Zm5.25 8.566.691 1.934H20.07l-.499-1.313a2.204 2.204 0 0 0-2.126-1.312h-2.511a2.205 2.205 0 0 0-2.127 1.313l-.498 1.312h-1.873l.726-1.934A3.972 3.972 0 0 1 14.932 16h2.512a3.972 3.972 0 0 1 3.806 2.441ZM26.5 4.625h-21A2.625 2.625 0 0 0 2.875 7.25v14.875A2.625 2.625 0 0 0 5.5 24.75h6.641L16 28.609l3.859-3.859H26.5a2.625 2.625 0 0 0 2.625-2.625V7.25A2.625 2.625 0 0 0 26.5 4.625Zm.875 17.5A.875.875 0 0 1 26.5 23h-7.359L16 26.141 12.859 23H5.5a.875.875 0 0 1-.875-.875V7.25a.875.875 0 0 1 .875-.875h21a.875.875 0 0 1 .875.875v14.875Z"></path></svg>';
 
 class IconUserMarkerLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconUserMarkerLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--userMarkerLarge', '', null, 'IconUserMarkerLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--userMarkerLarge', '', null, 'IconUserMarkerLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--userMarkerLarge');
         this.root.append(svg);
     }

package/dist/IconUserPartnership.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--userPartnership"><path d="M12.865 7.598a2.424 2.424 0 1 0-2.091-.132 3.106 3.106 0 0 0-1.829 1.409L8 10.293l-.936-1.418a3.133 3.133 0 0 0-1.838-1.374 2.389 2.389 0 1 0-2.091.132 3.089 3.089 0 0 0-1.916 2.808v3.684H2.53v-3.684a1.811 1.811 0 0 1 1.838-1.75 1.846 1.846 0 0 1 1.583.875L8 12.707l2.047-3.176a1.854 1.854 0 0 1 1.584-.875 1.812 1.812 0 0 1 1.838 1.75v3.719h1.312v-3.684a3.088 3.088 0 0 0-1.916-2.843ZM4.062 4.28a1.094 1.094 0 1 1 0 2.188 1.094 1.094 0 0 1 0-2.188Zm7.875 0a1.094 1.094 0 1 1 0 2.188 1.094 1.094 0 0 1 0-2.188ZM4.72 11.5H6.03v2.625H4.72V11.5Zm5.25 0h1.312v2.625H9.97V11.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--userPartnership"><path d="M12.865 7.598a2.424 2.424 0 1 0-2.091-.132 3.106 3.106 0 0 0-1.829 1.409L8 10.293l-.936-1.418a3.133 3.133 0 0 0-1.838-1.374 2.389 2.389 0 1 0-2.091.132 3.089 3.089 0 0 0-1.916 2.808v3.684H2.53v-3.684a1.811 1.811 0 0 1 1.838-1.75 1.846 1.846 0 0 1 1.583.875L8 12.707l2.047-3.176a1.854 1.854 0 0 1 1.584-.875 1.812 1.812 0 0 1 1.838 1.75v3.719h1.312v-3.684a3.088 3.088 0 0 0-1.916-2.843ZM4.062 4.28a1.094 1.094 0 1 1 0 2.188 1.094 1.094 0 0 1 0-2.188Zm7.875 0a1.094 1.094 0 1 1 0 2.188 1.094 1.094 0 0 1 0-2.188ZM4.72 11.5H6.03v2.625H4.72V11.5Zm5.25 0h1.312v2.625H9.97V11.5Z"></path></svg>';
 
 class IconUserPartnership extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconUserPartnership extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--userPartnership', '', null, 'IconUserPartnership');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--userPartnership', '', null, 'IconUserPartnership');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--userPartnership');
         this.root.append(svg);
     }

package/dist/IconUserPartnershipLarge.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--userPartnershipLarge"><path d="M8.125 14.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.25Zm15.75 7a4.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.25Zm5.25 13.633v7.367h-1.75v-7.367a4.058 4.058 0 0 0-4.113-4.008 4.174 4.174 0 0 0-3.5 1.951L16 24.62l-3.719-5.775a4.182 4.182 0 0 0-3.543-1.969 4.06 4.06 0 0 0-4.113 4.008v7.367h-1.75v-7.367a5.819 5.819 0 0 1 5.863-5.758 5.897 5.897 0 0 1 5.022 2.791l2.24 3.5 2.249-3.5a5.898 5.898 0 0 1 5.014-2.791 5.818 5.818 0 0 1 5.862 5.758Zm-17.754 1.496 3.5 3.5-1.242 1.242-2.004-2.012v3.141h-1.75V23a.875.875 0 0 1 .543-.805.875.875 0 0 1 .953.184ZM22.125 23v5.25h-1.75v-3.141l-2.004 2.012-1.242-1.242 3.5-3.5a.875.875 0 0 1 .953-.184.874.874 0 0 1 .543.805Z"></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--userPartnershipLarge"><path d="M8.125 14.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.25Zm15.75 7a4.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.25Zm5.25 13.633v7.367h-1.75v-7.367a4.058 4.058 0 0 0-4.113-4.008 4.174 4.174 0 0 0-3.5 1.951L16 24.62l-3.719-5.775a4.182 4.182 0 0 0-3.543-1.969 4.06 4.06 0 0 0-4.113 4.008v7.367h-1.75v-7.367a5.819 5.819 0 0 1 5.863-5.758 5.897 5.897 0 0 1 5.022 2.791l2.24 3.5 2.249-3.5a5.898 5.898 0 0 1 5.014-2.791 5.818 5.818 0 0 1 5.862 5.758Zm-17.754 1.496 3.5 3.5-1.242 1.242-2.004-2.012v3.141h-1.75V23a.875.875 0 0 1 .543-.805.875.875 0 0 1 .953.184ZM22.125 23v5.25h-1.75v-3.141l-2.004 2.012-1.242-1.242 3.5-3.5a.875.875 0 0 1 .953-.184.874.874 0 0 1 .543.805Z"></path></svg>';
 
 class IconUserPartnershipLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconUserPartnershipLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--userPartnershipLarge', '', null, 'IconUserPartnershipLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--userPartnershipLarge', '', null, 'IconUserPartnershipLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--userPartnershipLarge');
         this.root.append(svg);
     }

package/dist/IconUserRepeat.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--userRepeat"><path d="m4.386 10.161-.14.525h1.365l.044-.184a1.636 1.636 0 0 1 1.47-1.347h1.75a1.636 1.636 0 0 1 1.453 1.348l.043.183h1.365l-.14-.525a3.062 3.062 0 0 0-2.117-2.24c.052 0 .105-.079.157-.131a2.31 2.31 0 1 0-3.272 0l.157.131a3.063 3.063 0 0 0-2.135 2.24Zm2.905-4.716A1.006 1.006 0 1 1 8.72 6.862a1.006 1.006 0 0 1-1.429-1.417ZM14.781 8A6.781 6.781 0 1 1 1.22 8a6.711 6.711 0 0 1 .971-3.5L1.15 3.485l3.404-.682-.464 3.622-.936-.945A5.469 5.469 0 1 0 8 2.531V1.22A6.79 6.79 0 0 1 14.781 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--userRepeat"><path d="m4.386 10.161-.14.525h1.365l.044-.184a1.636 1.636 0 0 1 1.47-1.347h1.75a1.636 1.636 0 0 1 1.453 1.348l.043.183h1.365l-.14-.525a3.062 3.062 0 0 0-2.117-2.24c.052 0 .105-.079.157-.131a2.31 2.31 0 1 0-3.272 0l.157.131a3.063 3.063 0 0 0-2.135 2.24Zm2.905-4.716A1.006 1.006 0 1 1 8.72 6.862a1.006 1.006 0 0 1-1.429-1.417ZM14.781 8A6.781 6.781 0 1 1 1.22 8a6.711 6.711 0 0 1 .971-3.5L1.15 3.485l3.404-.682-.464 3.622-.936-.945A5.469 5.469 0 1 0 8 2.531V1.22A6.79 6.79 0 0 1 14.781 8Z"></path></svg>';
 
 class IconUserRepeat extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconUserRepeat extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--userRepeat', '', null, 'IconUserRepeat');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--userRepeat', '', null, 'IconUserRepeat');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--userRepeat');
         this.root.append(svg);
     }

package/dist/IconUserRepeatLarge.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--userRepeatLarge"><path d="m9.56 20.436-.254.928h1.82l.123-.464c.498-1.811 1.837-3.019 3.333-3.019h3.562c1.496 0 2.835 1.208 3.333 3.019l.123.464h1.82l-.254-.928a5.53 5.53 0 0 0-4.454-4.252c.175-.12.34-.255.49-.403a4.016 4.016 0 1 0-5.678 0c.151.148.315.283.49.403a5.53 5.53 0 0 0-4.454 4.252Zm5.197-9.108a2.275 2.275 0 1 1 0 3.22 2.266 2.266 0 0 1 0-3.22ZM28.617 16a12.25 12.25 0 0 1-24.5 0 12.101 12.101 0 0 1 1.83-6.431l-2.626.376-.245-1.75 4.804-.691a.875.875 0 0 1 .989.744l.69 4.812-1.75.245-.367-2.835A10.369 10.369 0 0 0 5.867 16a10.5 10.5 0 1 0 10.5-10.5V3.75A12.25 12.25 0 0 1 28.617 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--userRepeatLarge"><path d="m9.56 20.436-.254.928h1.82l.123-.464c.498-1.811 1.837-3.019 3.333-3.019h3.562c1.496 0 2.835 1.208 3.333 3.019l.123.464h1.82l-.254-.928a5.53 5.53 0 0 0-4.454-4.252c.175-.12.34-.255.49-.403a4.016 4.016 0 1 0-5.678 0c.151.148.315.283.49.403a5.53 5.53 0 0 0-4.454 4.252Zm5.197-9.108a2.275 2.275 0 1 1 0 3.22 2.266 2.266 0 0 1 0-3.22ZM28.617 16a12.25 12.25 0 0 1-24.5 0 12.101 12.101 0 0 1 1.83-6.431l-2.626.376-.245-1.75 4.804-.691a.875.875 0 0 1 .989.744l.69 4.812-1.75.245-.367-2.835A10.369 10.369 0 0 0 5.867 16a10.5 10.5 0 1 0 10.5-10.5V3.75A12.25 12.25 0 0 1 28.617 16Z"></path></svg>';
 
 class IconUserRepeatLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconUserRepeatLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--userRepeatLarge', '', null, 'IconUserRepeatLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--userRepeatLarge', '', null, 'IconUserRepeatLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--userRepeatLarge');
         this.root.append(svg);
     }

package/dist/IconUserShield.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--userShield"><path d="M13.127 3.791 8 1.14 2.872 3.791a1.525 1.525 0 0 0-.831 1.374v3.588c0 .043.07 4.637 5.793 6.124l.166.044.166-.043c5.723-1.497 5.793-6.082 5.793-6.134V5.165c0-.577-.316-1.102-.832-1.374ZM3.362 5.165c0-.087.044-.157.123-.201L8 2.628l4.515 2.345c.07.035.122.113.122.2v3.58c0 .166-.122 3.56-4.637 4.812-4.524-1.26-4.629-4.664-4.638-4.812V5.165Z"></path><path d="M9.251 8.149a1.787 1.787 0 0 0-1.278-3.036c-.98 0-1.784.805-1.784 1.785 0 .49.2.936.525 1.26-1.147.385-1.97 1.25-1.97 2.24h1.313c0-.464.744-1.138 1.917-1.138 1.172 0 1.968.656 1.968 1.138h1.313c0-1.015-.832-1.882-2.013-2.258l.009.009ZM7.974 6.425a.47.47 0 0 1 .472.473.47.47 0 0 1-.472.472.47.47 0 0 1-.473-.472.47.47 0 0 1 .473-.473Z"></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--userShield"><path d="M13.127 3.791 8 1.14 2.872 3.791a1.525 1.525 0 0 0-.831 1.374v3.588c0 .043.07 4.637 5.793 6.124l.166.044.166-.043c5.723-1.497 5.793-6.082 5.793-6.134V5.165c0-.577-.316-1.102-.832-1.374ZM3.362 5.165c0-.087.044-.157.123-.201L8 2.628l4.515 2.345c.07.035.122.113.122.2v3.58c0 .166-.122 3.56-4.637 4.812-4.524-1.26-4.629-4.664-4.638-4.812V5.165Z"></path><path d="M9.251 8.149a1.787 1.787 0 0 0-1.278-3.036c-.98 0-1.784.805-1.784 1.785 0 .49.2.936.525 1.26-1.147.385-1.97 1.25-1.97 2.24h1.313c0-.464.744-1.138 1.917-1.138 1.172 0 1.968.656 1.968 1.138h1.313c0-1.015-.832-1.882-2.013-2.258l.009.009ZM7.974 6.425a.47.47 0 0 1 .472.473.47.47 0 0 1-.472.472.47.47 0 0 1-.473-.472.47.47 0 0 1 .473-.473Z"></path></svg>';
 
 class IconUserShield extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconUserShield extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--userShield', '', null, 'IconUserShield');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--userShield', '', null, 'IconUserShield');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--userShield');
         this.root.append(svg);
     }

package/dist/IconUserShieldLarge.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--userShieldLarge"><path d="M22.816 21.25c-.717-2.328-2.738-3.894-5.031-3.894h-.595a3.72 3.72 0 0 0 1.418-.866 3.691 3.691 0 0 0 0-5.224c-1.444-1.435-3.79-1.443-5.224 0-.7.7-1.085 1.628-1.085 2.617 0 .988.385 1.916 1.085 2.616.402.402.892.691 1.417.866h-.595c-2.292 0-4.313 1.566-5.031 3.894L9 21.836h1.829l.017-.061c.49-1.584 1.838-2.651 3.351-2.651h3.57c1.514 0 2.87 1.067 3.352 2.651l.017.061h1.829l-.175-.577.026-.009Zm-8.19-5.994a1.933 1.933 0 0 1-.569-1.373 1.941 1.941 0 0 1 3.316-1.374 1.949 1.949 0 0 1 0 2.756c-.76.761-2.02.735-2.756 0l.01-.009Z"></path><path d="M25.957 7.933 16 2.77 6.043 7.933a2.617 2.617 0 0 0-1.418 2.327v7.114c0 .087.21 8.872 11.156 11.725l.219.061.219-.061c10.946-2.861 11.156-11.638 11.156-11.734V10.26c0-.98-.543-1.881-1.418-2.327Zm-.332 9.423c0 .306-.227 7.429-9.625 9.993-9.398-2.564-9.616-9.686-9.625-9.984V10.26c0-.332.184-.621.473-.779L16 4.74l9.152 4.742a.872.872 0 0 1 .473.779v7.096Z"></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--userShieldLarge"><path d="M22.816 21.25c-.717-2.328-2.738-3.894-5.031-3.894h-.595a3.72 3.72 0 0 0 1.418-.866 3.691 3.691 0 0 0 0-5.224c-1.444-1.435-3.79-1.443-5.224 0-.7.7-1.085 1.628-1.085 2.617 0 .988.385 1.916 1.085 2.616.402.402.892.691 1.417.866h-.595c-2.292 0-4.313 1.566-5.031 3.894L9 21.836h1.829l.017-.061c.49-1.584 1.838-2.651 3.351-2.651h3.57c1.514 0 2.87 1.067 3.352 2.651l.017.061h1.829l-.175-.577.026-.009Zm-8.19-5.994a1.933 1.933 0 0 1-.569-1.373 1.941 1.941 0 0 1 3.316-1.374 1.949 1.949 0 0 1 0 2.756c-.76.761-2.02.735-2.756 0l.01-.009Z"></path><path d="M25.957 7.933 16 2.77 6.043 7.933a2.617 2.617 0 0 0-1.418 2.327v7.114c0 .087.21 8.872 11.156 11.725l.219.061.219-.061c10.946-2.861 11.156-11.638 11.156-11.734V10.26c0-.98-.543-1.881-1.418-2.327Zm-.332 9.423c0 .306-.227 7.429-9.625 9.993-9.398-2.564-9.616-9.686-9.625-9.984V10.26c0-.332.184-.621.473-.779L16 4.74l9.152 4.742a.872.872 0 0 1 .473.779v7.096Z"></path></svg>';
 
 class IconUserShieldLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconUserShieldLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--userShieldLarge', '', null, 'IconUserShieldLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--userShieldLarge', '', null, 'IconUserShieldLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--userShieldLarge');
         this.root.append(svg);
     }

package/dist/IconUsers.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--users"><path d="m1.21 11.824.49-1.392a2.87 2.87 0 0 1 2.021-1.75 2.704 2.704 0 0 1-.481-.367 2.406 2.406 0 1 1 3.395 0 1.898 1.898 0 0 1-.324.271A2.905 2.905 0 0 1 8 9.085a2.94 2.94 0 0 1 1.697-.534 2.415 2.415 0 0 1-1.04-1.977 2.406 2.406 0 1 1 4.103 1.75c-.146.14-.308.263-.481.367a2.853 2.853 0 0 1 2.021 1.75l.49 1.391h-1.391l-.341-.953A1.584 1.584 0 0 0 11.5 9.855H9.75a1.584 1.584 0 0 0-1.523 1.015l-.34.954H6.46l.49-1.392c0-.122.105-.236.157-.35a1.654 1.654 0 0 0-.857-.227H4.5a1.584 1.584 0 0 0-1.523 1.015l-.34.954H1.21Zm8.75-5.25a1.094 1.094 0 1 0 .324-.77 1.084 1.084 0 0 0-.315.77H9.96Zm-6.125 0a1.094 1.094 0 1 0 .324-.77 1.085 1.085 0 0 0-.315.77h-.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--users"><path d="m1.21 11.824.49-1.392a2.87 2.87 0 0 1 2.021-1.75 2.704 2.704 0 0 1-.481-.367 2.406 2.406 0 1 1 3.395 0 1.898 1.898 0 0 1-.324.271A2.905 2.905 0 0 1 8 9.085a2.94 2.94 0 0 1 1.697-.534 2.415 2.415 0 0 1-1.04-1.977 2.406 2.406 0 1 1 4.103 1.75c-.146.14-.308.263-.481.367a2.853 2.853 0 0 1 2.021 1.75l.49 1.391h-1.391l-.341-.953A1.584 1.584 0 0 0 11.5 9.855H9.75a1.584 1.584 0 0 0-1.523 1.015l-.34.954H6.46l.49-1.392c0-.122.105-.236.157-.35a1.654 1.654 0 0 0-.857-.227H4.5a1.584 1.584 0 0 0-1.523 1.015l-.34.954H1.21Zm8.75-5.25a1.094 1.094 0 1 0 .324-.77 1.084 1.084 0 0 0-.315.77H9.96Zm-6.125 0a1.094 1.094 0 1 0 .324-.77 1.085 1.085 0 0 0-.315.77h-.009Z"></path></svg>';
 
 class IconUsers extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconUsers extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--users', '', null, 'IconUsers');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--users', '', null, 'IconUsers');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--users');
         this.root.append(svg);
     }

package/dist/IconUsersLarge.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--usersLarge"><path d="M10.461 8.563a3.938 3.938 0 1 1 0 7.875 3.938 3.938 0 0 1 0-7.875Zm0 1.75a2.187 2.187 0 1 0 2.135 2.187 2.17 2.17 0 0 0-2.135-2.188Zm11.113-1.75A3.937 3.937 0 1 1 17.75 12.5a3.902 3.902 0 0 1 3.824-3.938Zm0 1.75a2.187 2.187 0 1 0 2.135 2.187 2.161 2.161 0 0 0-2.135-2.188ZM27.9 20.374a5.25 5.25 0 0 0-4.97-3.036h-3.57A5.767 5.767 0 0 0 16 18.363a5.67 5.67 0 0 0-3.351-1.05H9.105a5.25 5.25 0 0 0-4.979 3.062l-1.251 3.063h1.864l.971-2.415a3.605 3.605 0 0 1 3.395-1.96h3.561a4.21 4.21 0 0 1 2.109.56 4.14 4.14 0 0 0-.385.726l-1.242 3.088h1.846L16 21.023a3.614 3.614 0 0 1 3.395-1.96h3.57a3.614 3.614 0 0 1 3.395 1.96l.971 2.416h1.794L27.9 20.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--usersLarge"><path d="M10.461 8.563a3.938 3.938 0 1 1 0 7.875 3.938 3.938 0 0 1 0-7.875Zm0 1.75a2.187 2.187 0 1 0 2.135 2.187 2.17 2.17 0 0 0-2.135-2.188Zm11.113-1.75A3.937 3.937 0 1 1 17.75 12.5a3.902 3.902 0 0 1 3.824-3.938Zm0 1.75a2.187 2.187 0 1 0 2.135 2.187 2.161 2.161 0 0 0-2.135-2.188ZM27.9 20.374a5.25 5.25 0 0 0-4.97-3.036h-3.57A5.767 5.767 0 0 0 16 18.363a5.67 5.67 0 0 0-3.351-1.05H9.105a5.25 5.25 0 0 0-4.979 3.062l-1.251 3.063h1.864l.971-2.415a3.605 3.605 0 0 1 3.395-1.96h3.561a4.21 4.21 0 0 1 2.109.56 4.14 4.14 0 0 0-.385.726l-1.242 3.088h1.846L16 21.023a3.614 3.614 0 0 1 3.395-1.96h3.57a3.614 3.614 0 0 1 3.395 1.96l.971 2.416h1.794L27.9 20.375Z"></path></svg>';
 
 class IconUsersLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconUsersLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--usersLarge', '', null, 'IconUsersLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--usersLarge', '', null, 'IconUsersLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--usersLarge');
         this.root.append(svg);
     }

package/dist/IconVegan.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--vegan"><path d="m14.484 1.718-.158-.657-.656.184c-.473.131-4.672 1.348-5.933 3.5C6.25 3.214 3.162 2.418 2.75 2.321l-.656-.157-.14.665c-.079.429-.84 4.296.359 6.212a3.623 3.623 0 0 0 3.053 1.75c.14.009.28.009.42 0l1.339 3.255h1.75l1.409-3.561c.205.038.412.059.621.061a3.938 3.938 0 0 0 3.386-1.96c1.278-2.135.306-6.387.193-6.868ZM3.424 8.34c-.674-1.023-.482-3.228-.289-4.55 1.277.394 3.343 1.217 3.99 2.24.038.07.07.143.096.219a3.806 3.806 0 0 0 .088 1.505c.02.068.043.136.07.201a2.24 2.24 0 0 1-.621.919l-.64-1.645h-1.75l.876 2.196a2.319 2.319 0 0 1-1.82-1.085ZM8 12.244l-.787-2.065c.342-.236.639-.532.875-.875a3.5 3.5 0 0 0 .743.639L8 12.243Zm5.154-4.323A2.625 2.625 0 0 1 10.8 9.225l.787-1.995H9.925l-.543 1.444a2.415 2.415 0 0 1-.804-1.269 2.625 2.625 0 0 1 .297-2.03c.7-1.19 3.063-2.187 4.471-2.625.271 1.426.543 3.973-.166 5.171h-.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--vegan"><path d="m14.484 1.718-.158-.657-.656.184c-.473.131-4.672 1.348-5.933 3.5C6.25 3.214 3.162 2.418 2.75 2.321l-.656-.157-.14.665c-.079.429-.84 4.296.359 6.212a3.623 3.623 0 0 0 3.053 1.75c.14.009.28.009.42 0l1.339 3.255h1.75l1.409-3.561c.205.038.412.059.621.061a3.938 3.938 0 0 0 3.386-1.96c1.278-2.135.306-6.387.193-6.868ZM3.424 8.34c-.674-1.023-.482-3.228-.289-4.55 1.277.394 3.343 1.217 3.99 2.24.038.07.07.143.096.219a3.806 3.806 0 0 0 .088 1.505c.02.068.043.136.07.201a2.24 2.24 0 0 1-.621.919l-.64-1.645h-1.75l.876 2.196a2.319 2.319 0 0 1-1.82-1.085ZM8 12.244l-.787-2.065c.342-.236.639-.532.875-.875a3.5 3.5 0 0 0 .743.639L8 12.243Zm5.154-4.323A2.625 2.625 0 0 1 10.8 9.225l.787-1.995H9.925l-.543 1.444a2.415 2.415 0 0 1-.804-1.269 2.625 2.625 0 0 1 .297-2.03c.7-1.19 3.063-2.187 4.471-2.625.271 1.426.543 3.973-.166 5.171h-.026Z"></path></svg>';
 
 class IconVegan extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconVegan extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--vegan', '', null, 'IconVegan');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--vegan', '', null, 'IconVegan');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--vegan');
         this.root.append(svg);
     }

package/dist/IconVeganLarge.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--veganLarge"><path d="m27.944 4.004-.21-.875-.875.236c-.359.105-9.109 2.573-11.603 6.764a6.2 6.2 0 0 0-.28.534C12.16 7.372 5.167 5.604 4.853 5.5l-.875-.21-.228.91c-.07.341-1.75 8.365.604 12.11a6.843 6.843 0 0 0 5.783 3.203c.367-.005.733-.04 1.094-.106l2.87 7.15h2.625l3.054-7.613c.485.11.981.17 1.479.175a7.465 7.465 0 0 0 6.405-3.701c2.458-4.2.367-13.038.28-13.414ZM5.876 17.383c-1.435-2.258-.98-7.298-.551-9.914 2.546.752 7.245 2.52 8.689 4.821.105.166.198.338.28.516a7.453 7.453 0 0 0 .14 3.01c.052.175.105.359.166.534a4.708 4.708 0 0 1-1.986 2.695l-1.637-4.139H8.624l1.942 4.83a5.049 5.049 0 0 1-4.69-2.354Zm9.625 8.88-2.196-5.582.263-.14a6.405 6.405 0 0 0 2.126-2.205 7 7 0 0 0 2.039 1.82l.148.07-2.38 6.038Zm10.64-9.738a5.68 5.68 0 0 1-5.722 2.774l1.75-4.375h-2.232l-1.443 3.701a5.25 5.25 0 0 1-2.363-3.203 5.687 5.687 0 0 1 .63-4.375c1.707-2.922 7.455-5.004 9.678-5.722.569 2.87 1.268 8.54-.298 11.2Z"></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--veganLarge"><path d="m27.944 4.004-.21-.875-.875.236c-.359.105-9.109 2.573-11.603 6.764a6.2 6.2 0 0 0-.28.534C12.16 7.372 5.167 5.604 4.853 5.5l-.875-.21-.228.91c-.07.341-1.75 8.365.604 12.11a6.843 6.843 0 0 0 5.783 3.203c.367-.005.733-.04 1.094-.106l2.87 7.15h2.625l3.054-7.613c.485.11.981.17 1.479.175a7.465 7.465 0 0 0 6.405-3.701c2.458-4.2.367-13.038.28-13.414ZM5.876 17.383c-1.435-2.258-.98-7.298-.551-9.914 2.546.752 7.245 2.52 8.689 4.821.105.166.198.338.28.516a7.453 7.453 0 0 0 .14 3.01c.052.175.105.359.166.534a4.708 4.708 0 0 1-1.986 2.695l-1.637-4.139H8.624l1.942 4.83a5.049 5.049 0 0 1-4.69-2.354Zm9.625 8.88-2.196-5.582.263-.14a6.405 6.405 0 0 0 2.126-2.205 7 7 0 0 0 2.039 1.82l.148.07-2.38 6.038Zm10.64-9.738a5.68 5.68 0 0 1-5.722 2.774l1.75-4.375h-2.232l-1.443 3.701a5.25 5.25 0 0 1-2.363-3.203 5.687 5.687 0 0 1 .63-4.375c1.707-2.922 7.455-5.004 9.678-5.722.569 2.87 1.268 8.54-.298 11.2Z"></path></svg>';
 
 class IconVeganLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconVeganLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--veganLarge', '', null, 'IconVeganLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--veganLarge', '', null, 'IconVeganLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--veganLarge');
         this.root.append(svg);
     }

package/dist/IconVegetarian.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--vegetarian"><path fill-rule="evenodd" d="m10.844 1.044.324.568c.007.016.025.048.05.097.43.798 3.179 5.91 2.33 8.986a5.18 5.18 0 0 1-4.97 3.806 4.96 4.96 0 0 1-1.374-.192 4.86 4.86 0 0 1-1.059-.42 6.606 6.606 0 0 1-2.992.735A6.414 6.414 0 0 1 2 14.509v-1.334a5.197 5.197 0 0 0 2.938-.179A5.18 5.18 0 0 1 3.625 8c.857-3.23 6.186-6.36 6.629-6.62l.021-.013.569-.323Zm-.367 11.644a3.859 3.859 0 0 0 1.81-2.325v-.01c.552-2.03-.997-5.678-1.942-7.498C8.604 3.94 5.375 6.25 4.859 8.35a3.85 3.85 0 0 0 1.312 4.025 5.163 5.163 0 0 0 2.03-2.984l1.269.359a6.431 6.431 0 0 1-2.048 3.255l.132.052a3.859 3.859 0 0 0 2.923-.37Z" 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--vegetarian"><path fill-rule="evenodd" d="m10.844 1.044.324.568c.007.016.025.048.05.097.43.798 3.179 5.91 2.33 8.986a5.18 5.18 0 0 1-4.97 3.806 4.96 4.96 0 0 1-1.374-.192 4.86 4.86 0 0 1-1.059-.42 6.606 6.606 0 0 1-2.992.735A6.414 6.414 0 0 1 2 14.509v-1.334a5.197 5.197 0 0 0 2.938-.179A5.18 5.18 0 0 1 3.625 8c.857-3.23 6.186-6.36 6.629-6.62l.021-.013.569-.323Zm-.367 11.644a3.859 3.859 0 0 0 1.81-2.325v-.01c.552-2.03-.997-5.678-1.942-7.498C8.604 3.94 5.375 6.25 4.859 8.35a3.85 3.85 0 0 0 1.312 4.025 5.163 5.163 0 0 0 2.03-2.984l1.269.359a6.431 6.431 0 0 1-2.048 3.255l.132.052a3.859 3.859 0 0 0 2.923-.37Z" clip-rule="evenodd"></path></svg>';
 
 class IconVegetarian extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconVegetarian extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--vegetarian', '', null, 'IconVegetarian');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--vegetarian', '', null, 'IconVegetarian');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--vegetarian');
         this.root.append(svg);
     }

package/dist/IconVegetarianFilled.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--vegetarianFilled"><path d="m10.844 1.052.324.57.01.018c.242.437 3.254 5.86 2.378 9.09a5.18 5.18 0 0 1-4.978 3.806 5.29 5.29 0 0 1-1.374-.184 5.438 5.438 0 0 1-1.068-.428l.35-.175.359-.237c.21-.145.411-.303.604-.472A6.458 6.458 0 0 0 9.47 9.75L8.201 9.4a5.171 5.171 0 0 1-2.047 2.94c-.05.034-.098.072-.147.11-.062.05-.126.1-.194.144l-.22.114c-.21.116-.43.216-.655.297A5.162 5.162 0 0 1 3.625 8c.857-3.221 6.185-6.35 6.628-6.611l.022-.013.569-.324Z"></path><path d="M2 14.518c.386.073.777.111 1.17.114a6.529 6.529 0 0 0 2.966-.734 5.25 5.25 0 0 1-1.199-.875A5.154 5.154 0 0 1 2 13.185v1.333Z"></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--vegetarianFilled"><path d="m10.844 1.052.324.57.01.018c.242.437 3.254 5.86 2.378 9.09a5.18 5.18 0 0 1-4.978 3.806 5.29 5.29 0 0 1-1.374-.184 5.438 5.438 0 0 1-1.068-.428l.35-.175.359-.237c.21-.145.411-.303.604-.472A6.458 6.458 0 0 0 9.47 9.75L8.201 9.4a5.171 5.171 0 0 1-2.047 2.94c-.05.034-.098.072-.147.11-.062.05-.126.1-.194.144l-.22.114c-.21.116-.43.216-.655.297A5.162 5.162 0 0 1 3.625 8c.857-3.221 6.185-6.35 6.628-6.611l.022-.013.569-.324Z"></path><path d="M2 14.518c.386.073.777.111 1.17.114a6.529 6.529 0 0 0 2.966-.734 5.25 5.25 0 0 1-1.199-.875A5.154 5.154 0 0 1 2 13.185v1.333Z"></path></svg>';
 
 class IconVegetarianFilled extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconVegetarianFilled extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--vegetarianFilled', '', null, 'IconVegetarianFilled');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--vegetarianFilled', '', null, 'IconVegetarianFilled');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--vegetarianFilled');
         this.root.append(svg);
     }

package/dist/IconVegetarianFilledLarge.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--vegetarianFilledLarge"><path d="m23.166 3.155-.428-.753-.762.473c-.463.262-11.375 6.562-13.125 12.924a9.905 9.905 0 0 0 3.316 10.281c.28-.131.57-.289.876-.446l.078-.044c.254-.149.481-.306.718-.473a10.818 10.818 0 0 0 1.522-1.294 2.922 2.922 0 0 0 .525-2.258 4.017 4.017 0 0 0-1.802-2.625l.971-1.461a5.933 5.933 0 0 1 2.424 3.202c.254-.564.46-1.15.612-1.75l.534-2.564 1.75.42-.639 2.547a12.627 12.627 0 0 1-2.992 5.486l-.271.262c-.314.31-.644.602-.99.875-.253.21-.524.412-.804.604-.28.193-.464.324-.709.473l-.158.087c.62.322 1.27.577 1.943.762.854.24 1.738.36 2.625.358a9.914 9.914 0 0 0 9.538-7.28c1.715-6.343-4.49-17.334-4.752-17.806Z"></path><path d="M5.5 26.859v1.75a12.364 12.364 0 0 0 8.295-1.505A9.784 9.784 0 0 1 12.133 26a10.684 10.684 0 0 1-6.633.858Z"></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--vegetarianFilledLarge"><path d="m23.166 3.155-.428-.753-.762.473c-.463.262-11.375 6.562-13.125 12.924a9.905 9.905 0 0 0 3.316 10.281c.28-.131.57-.289.876-.446l.078-.044c.254-.149.481-.306.718-.473a10.818 10.818 0 0 0 1.522-1.294 2.922 2.922 0 0 0 .525-2.258 4.017 4.017 0 0 0-1.802-2.625l.971-1.461a5.933 5.933 0 0 1 2.424 3.202c.254-.564.46-1.15.612-1.75l.534-2.564 1.75.42-.639 2.547a12.627 12.627 0 0 1-2.992 5.486l-.271.262c-.314.31-.644.602-.99.875-.253.21-.524.412-.804.604-.28.193-.464.324-.709.473l-.158.087c.62.322 1.27.577 1.943.762.854.24 1.738.36 2.625.358a9.914 9.914 0 0 0 9.538-7.28c1.715-6.343-4.49-17.334-4.752-17.806Z"></path><path d="M5.5 26.859v1.75a12.364 12.364 0 0 0 8.295-1.505A9.784 9.784 0 0 1 12.133 26a10.684 10.684 0 0 1-6.633.858Z"></path></svg>';
 
 class IconVegetarianFilledLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconVegetarianFilledLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--vegetarianFilledLarge', '', null, 'IconVegetarianFilledLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--vegetarianFilledLarge', '', null, 'IconVegetarianFilledLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--vegetarianFilledLarge');
         this.root.append(svg);
     }

package/dist/IconVegetarianLarge.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--vegetarianLarge"><path d="m23.166 3.146-.428-.761-.762.438c-.463.262-11.375 6.562-13.125 12.923a9.87 9.87 0 0 0 .945 7.508c.612 1.06 1.413 2 2.363 2.773a10.754 10.754 0 0 1-7.28.692l-.438 1.697c1.027.26 2.082.393 3.141.394a12.574 12.574 0 0 0 6.248-1.68 9.724 9.724 0 0 0 1.951.761 9.994 9.994 0 0 0 2.625.359 9.905 9.905 0 0 0 9.52-7.28c1.707-6.361-4.497-17.36-4.76-17.824Zm3.037 17.36A8.146 8.146 0 0 1 16.2 26.203l-.735-.237c.34-.273.664-.565.972-.875l.253-.114.053-.183a12.477 12.477 0 0 0 2.975-5.469l.639-2.537-1.733-.438-.639 2.537c-.153.6-.358 1.186-.612 1.75a5.932 5.932 0 0 0-2.424-3.202l-.971 1.461a4.015 4.015 0 0 1 1.802 2.625 2.921 2.921 0 0 1-.525 2.258c-.467.48-.98.913-1.531 1.295a8.111 8.111 0 0 1-3.22-8.873c1.313-4.76 9.074-9.826 11.568-11.401 1.364 2.59 5.442 10.938 4.13 15.706Z"></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--vegetarianLarge"><path d="m23.166 3.146-.428-.761-.762.438c-.463.262-11.375 6.562-13.125 12.923a9.87 9.87 0 0 0 .945 7.508c.612 1.06 1.413 2 2.363 2.773a10.754 10.754 0 0 1-7.28.692l-.438 1.697c1.027.26 2.082.393 3.141.394a12.574 12.574 0 0 0 6.248-1.68 9.724 9.724 0 0 0 1.951.761 9.994 9.994 0 0 0 2.625.359 9.905 9.905 0 0 0 9.52-7.28c1.707-6.361-4.497-17.36-4.76-17.824Zm3.037 17.36A8.146 8.146 0 0 1 16.2 26.203l-.735-.237c.34-.273.664-.565.972-.875l.253-.114.053-.183a12.477 12.477 0 0 0 2.975-5.469l.639-2.537-1.733-.438-.639 2.537c-.153.6-.358 1.186-.612 1.75a5.932 5.932 0 0 0-2.424-3.202l-.971 1.461a4.015 4.015 0 0 1 1.802 2.625 2.921 2.921 0 0 1-.525 2.258c-.467.48-.98.913-1.531 1.295a8.111 8.111 0 0 1-3.22-8.873c1.313-4.76 9.074-9.826 11.568-11.401 1.364 2.59 5.442 10.938 4.13 15.706Z"></path></svg>';
 
 class IconVegetarianLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconVegetarianLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--vegetarianLarge', '', null, 'IconVegetarianLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--vegetarianLarge', '', null, 'IconVegetarianLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--vegetarianLarge');
         this.root.append(svg);
     }

package/dist/IconVision.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--vision"><path d="M14.379 4.01a3.8 3.8 0 0 0-2.284-1.872 2.992 2.992 0 0 0-2.345.27c-.205.122-.396.265-.569.43l-6.43 4.935a1.19 1.19 0 0 0-.325 1.513v.053l-.962.499L2.068 11l.988-.507a1.19 1.19 0 0 0 1.007.586.875.875 0 0 0 .262 0l1.715-.455-1.33 3.5H6.12l1.33-3.5 1.33 3.5h1.409l-1.558-4.06 3.815-.875c.306-.058.6-.16.875-.306A3.605 3.605 0 0 0 14.38 4.01ZM4.159 9.75l-.534-.997 4.568-3.5a3.999 3.999 0 0 0 .49 2.012c.27.475.634.892 1.067 1.225L4.16 9.75Zm8.496-2.012a1.671 1.671 0 0 1-1.339.148A2.468 2.468 0 0 1 9.83 6.644a2.275 2.275 0 0 1 .577-3.089c.25-.146.534-.222.823-.219.174.003.347.027.516.07A2.572 2.572 0 0 1 13.25 4.64a2.284 2.284 0 0 1-.595 3.089v.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--vision"><path d="M14.379 4.01a3.8 3.8 0 0 0-2.284-1.872 2.992 2.992 0 0 0-2.345.27c-.205.122-.396.265-.569.43l-6.43 4.935a1.19 1.19 0 0 0-.325 1.513v.053l-.962.499L2.068 11l.988-.507a1.19 1.19 0 0 0 1.007.586.875.875 0 0 0 .262 0l1.715-.455-1.33 3.5H6.12l1.33-3.5 1.33 3.5h1.409l-1.558-4.06 3.815-.875c.306-.058.6-.16.875-.306A3.605 3.605 0 0 0 14.38 4.01ZM4.159 9.75l-.534-.997 4.568-3.5a3.999 3.999 0 0 0 .49 2.012c.27.475.634.892 1.067 1.225L4.16 9.75Zm8.496-2.012a1.671 1.671 0 0 1-1.339.148A2.468 2.468 0 0 1 9.83 6.644a2.275 2.275 0 0 1 .577-3.089c.25-.146.534-.222.823-.219.174.003.347.027.516.07A2.572 2.572 0 0 1 13.25 4.64a2.284 2.284 0 0 1-.595 3.089v.009Z"></path></svg>';
 
 class IconVision extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconVision extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--vision', '', null, 'IconVision');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--vision', '', null, 'IconVision');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--vision');
         this.root.append(svg);
     }

package/dist/IconVisionLarge.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--visionLarge"><path d="M27.296 8.002A7.191 7.191 0 0 0 23 4.46a5.591 5.591 0 0 0-4.375.498c-.403.241-.77.535-1.094.875L4.625 15.66a1.933 1.933 0 0 0-.525 2.458l.28.508-1.505.779.805 1.557 1.54-.796.184.324a1.881 1.881 0 0 0 1.671.988c.141-.001.282-.016.42-.043l4.209-.963L8.71 28.25h1.873l3.176-8.251h.096l3.185 8.251h1.873l-3.334-8.663 7.998-1.837h.113a5.251 5.251 0 0 0 1.619-.604c2.94-1.706 3.815-5.792 1.986-9.144ZM7.093 19.727a.148.148 0 0 1-.14-.078l-1.296-2.372a.175.175 0 0 1 .044-.227l10.08-7.718a7.604 7.604 0 0 0 .875 4.743 7.438 7.438 0 0 0 2.739 2.861L7.093 19.727Zm17.342-4.12a3.887 3.887 0 0 1-3.01.332 5.46 5.46 0 0 1-3.238-2.695C16.805 10.75 17.4 7.679 19.5 6.47a3.798 3.798 0 0 1 1.881-.49c.385.001.767.054 1.138.158a5.46 5.46 0 0 1 3.237 2.695c1.383 2.529.788 5.565-1.321 6.772Z"></path><path d="M22.125 8.125a6.24 6.24 0 0 1-.945 1.68 6.24 6.24 0 0 1-1.68.945 6.24 6.24 0 0 1 1.68.945c.4.508.719 1.074.945 1.68a6.24 6.24 0 0 1 .945-1.68 6.24 6.24 0 0 1 1.68-.945 6.24 6.24 0 0 1-1.68-.945 6.24 6.24 0 0 1-.945-1.68Z"></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--visionLarge"><path d="M27.296 8.002A7.191 7.191 0 0 0 23 4.46a5.591 5.591 0 0 0-4.375.498c-.403.241-.77.535-1.094.875L4.625 15.66a1.933 1.933 0 0 0-.525 2.458l.28.508-1.505.779.805 1.557 1.54-.796.184.324a1.881 1.881 0 0 0 1.671.988c.141-.001.282-.016.42-.043l4.209-.963L8.71 28.25h1.873l3.176-8.251h.096l3.185 8.251h1.873l-3.334-8.663 7.998-1.837h.113a5.251 5.251 0 0 0 1.619-.604c2.94-1.706 3.815-5.792 1.986-9.144ZM7.093 19.727a.148.148 0 0 1-.14-.078l-1.296-2.372a.175.175 0 0 1 .044-.227l10.08-7.718a7.604 7.604 0 0 0 .875 4.743 7.438 7.438 0 0 0 2.739 2.861L7.093 19.727Zm17.342-4.12a3.887 3.887 0 0 1-3.01.332 5.46 5.46 0 0 1-3.238-2.695C16.805 10.75 17.4 7.679 19.5 6.47a3.798 3.798 0 0 1 1.881-.49c.385.001.767.054 1.138.158a5.46 5.46 0 0 1 3.237 2.695c1.383 2.529.788 5.565-1.321 6.772Z"></path><path d="M22.125 8.125a6.24 6.24 0 0 1-.945 1.68 6.24 6.24 0 0 1-1.68.945 6.24 6.24 0 0 1 1.68.945c.4.508.719 1.074.945 1.68a6.24 6.24 0 0 1 .945-1.68 6.24 6.24 0 0 1 1.68-.945 6.24 6.24 0 0 1-1.68-.945 6.24 6.24 0 0 1-.945-1.68Z"></path></svg>';
 
 class IconVisionLarge extends HTMLElement {
     constructor () {
@@ -35,9 +35,13 @@ class IconVisionLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--visionLarge', '', null, 'IconVisionLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--visionLarge', '', null, 'IconVisionLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--visionLarge');
         this.root.append(svg);
     }