@justeattakeaway/pie-icons-webc 0.2.0 → 0.3.0

package/icons/IconWorld.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--world"><path d="M8 1.28a6.72 6.72 0 1 0 0 13.44A6.72 6.72 0 0 0 8 1.28Zm4.594 3.876c.206.346.377.713.507 1.094l-1.724 1.986V6.154l-1.12-.175a.386.386 0 0 1-.262-.175.543.543 0 0 1-.122-.429.367.367 0 0 1 .385-.245l2.336.026Zm-7-1.995v1.812l-1.488.813-.105.377-.875-.464A5.46 5.46 0 0 1 5.594 3.16Zm.455 5.495h.621l.586.49-.428 1.479a2.423 2.423 0 0 1-1.392-1.453l.613-.516ZM8 13.408A5.408 5.408 0 0 1 2.593 8c-.002-.35.034-.699.105-1.041l1.312.691c.122.227.288.426.49.586l-.446.377v.323c0 .097.114 2.345 3.019 3.194l.63.184 1.04-3.632-1.618-1.338H5.743a.569.569 0 0 1-.604-.368l.087-.306 1.68-.875V2.75h-.183A5.548 5.548 0 0 1 8 2.592a5.399 5.399 0 0 1 3.5 1.252h-1.242A1.636 1.636 0 0 0 8.595 5.12a1.811 1.811 0 0 0 .777 1.916c.197.123.419.204.65.237l.07 2.625 1.504.157L13.4 7.87a.963.963 0 0 1 0 .157A5.407 5.407 0 0 1 8 13.408Z"></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--world"><path d="M8 1.28a6.72 6.72 0 1 0 0 13.44A6.72 6.72 0 0 0 8 1.28Zm4.594 3.876c.206.346.377.713.507 1.094l-1.724 1.986V6.154l-1.12-.175a.386.386 0 0 1-.262-.175.543.543 0 0 1-.122-.429.367.367 0 0 1 .385-.245l2.336.026Zm-7-1.995v1.812l-1.488.813-.105.377-.875-.464A5.46 5.46 0 0 1 5.594 3.16Zm.455 5.495h.621l.586.49-.428 1.479a2.423 2.423 0 0 1-1.392-1.453l.613-.516ZM8 13.408A5.408 5.408 0 0 1 2.593 8c-.002-.35.034-.699.105-1.041l1.312.691c.122.227.288.426.49.586l-.446.377v.323c0 .097.114 2.345 3.019 3.194l.63.184 1.04-3.632-1.618-1.338H5.743a.569.569 0 0 1-.604-.368l.087-.306 1.68-.875V2.75h-.183A5.548 5.548 0 0 1 8 2.592a5.399 5.399 0 0 1 3.5 1.252h-1.242A1.636 1.636 0 0 0 8.595 5.12a1.811 1.811 0 0 0 .777 1.916c.197.123.419.204.65.237l.07 2.625 1.504.157L13.4 7.87a.963.963 0 0 1 0 .157A5.407 5.407 0 0 1 8 13.408Z"></path></svg>';
 
 export class IconWorld extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconWorld extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--world', '', null, 'IconWorld');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--world', '', null, 'IconWorld');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--world');
         this.root.append(svg);
     }

package/icons/IconWorldLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--worldLarge"><path d="M16 3.811a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm7.551 6.598.727-.77a10.378 10.378 0 0 1 1.898 3.955l-4.06 4.375-.105-4.892-1.828-.288a1.156 1.156 0 0 1-.805-.499 1.426 1.426 0 0 1-.21-1.111 1.085 1.085 0 0 1 1.146-.805l3.237.035ZM11.88 6.375v3.841L8.842 11.87l-.306 1.103-2.161-1.13a10.5 10.5 0 0 1 5.504-5.468ZM16 26.5A10.5 10.5 0 0 1 5.5 16c.007-.844.112-1.684.315-2.502l2.756 1.452c.304.633.8 1.153 1.418 1.488l-1.182.988v.429c0 .175.21 4.375 5.723 5.985l.875.245 1.864-6.571-2.888-2.389h-2.625a1.557 1.557 0 0 1-1.627-1.076l.271-1.015 3.299-1.75V5.84A10.597 10.597 0 0 1 16 5.561c2.63-.001 5.161.993 7.087 2.783l-.297.315h-2.476a2.835 2.835 0 0 0-2.861 2.178 3.193 3.193 0 0 0 .49 2.486 2.912 2.912 0 0 0 1.977 1.233l.376.062.079 5.048 2.336.254 3.789-4.06v.166A10.5 10.5 0 0 1 16 26.5Zm-3.806-9.625h1.557l1.505 1.26-1.059 3.736c-2.694-1.067-3.394-2.887-3.57-3.692l1.567-1.304Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--worldLarge"><path d="M16 3.811a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm7.551 6.598.727-.77a10.378 10.378 0 0 1 1.898 3.955l-4.06 4.375-.105-4.892-1.828-.288a1.156 1.156 0 0 1-.805-.499 1.426 1.426 0 0 1-.21-1.111 1.085 1.085 0 0 1 1.146-.805l3.237.035ZM11.88 6.375v3.841L8.842 11.87l-.306 1.103-2.161-1.13a10.5 10.5 0 0 1 5.504-5.468ZM16 26.5A10.5 10.5 0 0 1 5.5 16c.007-.844.112-1.684.315-2.502l2.756 1.452c.304.633.8 1.153 1.418 1.488l-1.182.988v.429c0 .175.21 4.375 5.723 5.985l.875.245 1.864-6.571-2.888-2.389h-2.625a1.557 1.557 0 0 1-1.627-1.076l.271-1.015 3.299-1.75V5.84A10.597 10.597 0 0 1 16 5.561c2.63-.001 5.161.993 7.087 2.783l-.297.315h-2.476a2.835 2.835 0 0 0-2.861 2.178 3.193 3.193 0 0 0 .49 2.486 2.912 2.912 0 0 0 1.977 1.233l.376.062.079 5.048 2.336.254 3.789-4.06v.166A10.5 10.5 0 0 1 16 26.5Zm-3.806-9.625h1.557l1.505 1.26-1.059 3.736c-2.694-1.067-3.394-2.887-3.57-3.692l1.567-1.304Z"></path></svg>';
 
 export class IconWorldLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconWorldLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--worldLarge', '', null, 'IconWorldLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--worldLarge', '', null, 'IconWorldLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--worldLarge');
         this.root.append(svg);
     }

package/icons/IconWrap.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--wrap"><path d="M14.947 4.693a1.794 1.794 0 0 0-1.154-1.584 1.75 1.75 0 0 0-.98-1.759A1.75 1.75 0 0 0 11 1.604a1.75 1.75 0 0 0-1.181-.525 1.654 1.654 0 0 0-1.636 1.19c-.07.157-.131.317-.184.481L1.263 9.339a.665.665 0 0 0-.184.516.061.061 0 0 0 0 .044c.254 3.202 1.837 5.005 4.462 5.057a.647.647 0 0 0 .438-.175L13.1 8.28c.262-.075.507-.203.718-.376a1.53 1.53 0 0 0 .568-1.269 1.672 1.672 0 0 0-.14-.516 1.75 1.75 0 0 0 .7-1.426Zm-7.183.148v1.077c.052 1.295.087 2.143-.875 3.106-1.216 1.19-2.958.875-3.99.56L7.764 4.84Zm-2.45 8.803c-1.479-.123-2.406-1.068-2.774-2.8.68.227 1.392.348 2.109.359A4.374 4.374 0 0 0 7.808 9.96a3.981 3.981 0 0 0 1.294-2.791 6.248 6.248 0 0 0 2.136 1.059l-5.924 5.416Zm7.796-8.435a.665.665 0 0 0-.56.499.647.647 0 0 0 .28.7c.088.06.262.236.262.332 0 .096 0 .105-.14.193-.332.18-.722.22-1.085.113a4.533 4.533 0 0 1-2.79-1.828 7.21 7.21 0 0 1 .35-2.538c.104-.306.27-.289.332-.297a.551.551 0 0 1 .472.428.675.675 0 0 0 .534.508.647.647 0 0 0 .665-.298s.438-.656.875-.472c.438.184.14.875.14.875a.648.648 0 0 0 .3.778c.088.05.186.08.286.088.446 0 .613.263.621.473.01.21-.2.402-.542.446Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--wrap"><path d="M14.947 4.693a1.794 1.794 0 0 0-1.154-1.584 1.75 1.75 0 0 0-.98-1.759A1.75 1.75 0 0 0 11 1.604a1.75 1.75 0 0 0-1.181-.525 1.654 1.654 0 0 0-1.636 1.19c-.07.157-.131.317-.184.481L1.263 9.339a.665.665 0 0 0-.184.516.061.061 0 0 0 0 .044c.254 3.202 1.837 5.005 4.462 5.057a.647.647 0 0 0 .438-.175L13.1 8.28c.262-.075.507-.203.718-.376a1.53 1.53 0 0 0 .568-1.269 1.672 1.672 0 0 0-.14-.516 1.75 1.75 0 0 0 .7-1.426Zm-7.183.148v1.077c.052 1.295.087 2.143-.875 3.106-1.216 1.19-2.958.875-3.99.56L7.764 4.84Zm-2.45 8.803c-1.479-.123-2.406-1.068-2.774-2.8.68.227 1.392.348 2.109.359A4.374 4.374 0 0 0 7.808 9.96a3.981 3.981 0 0 0 1.294-2.791 6.248 6.248 0 0 0 2.136 1.059l-5.924 5.416Zm7.796-8.435a.665.665 0 0 0-.56.499.647.647 0 0 0 .28.7c.088.06.262.236.262.332 0 .096 0 .105-.14.193-.332.18-.722.22-1.085.113a4.533 4.533 0 0 1-2.79-1.828 7.21 7.21 0 0 1 .35-2.538c.104-.306.27-.289.332-.297a.551.551 0 0 1 .472.428.675.675 0 0 0 .534.508.647.647 0 0 0 .665-.298s.438-.656.875-.472c.438.184.14.875.14.875a.648.648 0 0 0 .3.778c.088.05.186.08.286.088.446 0 .613.263.621.473.01.21-.2.402-.542.446Z"></path></svg>';
 
 export class IconWrap extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconWrap extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--wrap', '', null, 'IconWrap');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--wrap', '', null, 'IconWrap');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--wrap');
         this.root.append(svg);
     }

package/icons/IconWrapLarge.js

@@ -1,7 +1,7 @@
 import { getSvgProps } from '@justeattakeaway/pie-icons-configs';
 
 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--wrapLarge"><path d="M29.615 9.543a3.133 3.133 0 0 0-2.327-2.88 3.132 3.132 0 0 0-1.663-3.42 3.238 3.238 0 0 0-3.5.7 3.177 3.177 0 0 0-2.345-1.208 2.8 2.8 0 0 0-2.853 2.083c-.113.35-.21.682-.297 1.023l-13.641 13.3a.874.874 0 0 0-.245.692c.463 6.22 3.5 9.703 8.522 9.808a.875.875 0 0 0 .586-.236L26.23 16.28a2.739 2.739 0 0 0 1.295-.604 2.485 2.485 0 0 0 .595-3.395 3.036 3.036 0 0 0 1.496-2.738ZM21.6 11.625c.63 0 1.041.123 1.155.306.114.184.061.823-.499 1.75a9.524 9.524 0 0 1-1.496-.875c.327-.385.607-.778.84-1.181Zm-1.286-1.234c-.252.46-.545.896-.875 1.304a6.404 6.404 0 0 1-1.488-2.17c.919-.612 2.24-.752 2.625-.455.193.14.088.656-.262 1.321Zm-4.13-1.671v3.229c.122 2.73.245 5.556-1.75 7.875a5.715 5.715 0 0 1-4.226 2.266h-.088c-2.231 0-4.261-1.47-5.25-2.319L16.184 8.72Zm-5.25 19.154c-3.868-.228-5.504-3.019-6.125-5.959a9.528 9.528 0 0 0 5.328 1.908h.14a7.395 7.395 0 0 0 5.53-2.88c2.188-2.554 2.267-5.52 2.17-8.233.308.309.633.6.972.875a12.491 12.491 0 0 0 3.298 2.012 9.858 9.858 0 0 0 1.532.517l-12.845 11.76Zm15.487-16.87a.874.874 0 0 0-.7 1.184.874.874 0 0 0 .324.408c.365.235.63.596.744 1.015a.997.997 0 0 1-.429.726c-.341.307-1.225.394-2.468 0 .753-1.347.875-2.467.36-3.325a2.54 2.54 0 0 0-1.908-1.12 2.135 2.135 0 0 0-.692-2.248 3.885 3.885 0 0 0-3.578-.158c.052-.341.113-.682.192-1.015.079-.332.193-.743.324-1.128a1.094 1.094 0 0 1 1.102-.875 1.514 1.514 0 0 1 1.357 1.198.875.875 0 0 0 1.601.272s1.041-1.637 2.258-1.112c1.067.473.516 2.24.507 2.258a.876.876 0 0 0 .788 1.146c1.19.061 1.636.77 1.662 1.365.026.595-.341 1.269-1.444 1.409Z"></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--wrapLarge"><path d="M29.615 9.543a3.133 3.133 0 0 0-2.327-2.88 3.132 3.132 0 0 0-1.663-3.42 3.238 3.238 0 0 0-3.5.7 3.177 3.177 0 0 0-2.345-1.208 2.8 2.8 0 0 0-2.853 2.083c-.113.35-.21.682-.297 1.023l-13.641 13.3a.874.874 0 0 0-.245.692c.463 6.22 3.5 9.703 8.522 9.808a.875.875 0 0 0 .586-.236L26.23 16.28a2.739 2.739 0 0 0 1.295-.604 2.485 2.485 0 0 0 .595-3.395 3.036 3.036 0 0 0 1.496-2.738ZM21.6 11.625c.63 0 1.041.123 1.155.306.114.184.061.823-.499 1.75a9.524 9.524 0 0 1-1.496-.875c.327-.385.607-.778.84-1.181Zm-1.286-1.234c-.252.46-.545.896-.875 1.304a6.404 6.404 0 0 1-1.488-2.17c.919-.612 2.24-.752 2.625-.455.193.14.088.656-.262 1.321Zm-4.13-1.671v3.229c.122 2.73.245 5.556-1.75 7.875a5.715 5.715 0 0 1-4.226 2.266h-.088c-2.231 0-4.261-1.47-5.25-2.319L16.184 8.72Zm-5.25 19.154c-3.868-.228-5.504-3.019-6.125-5.959a9.528 9.528 0 0 0 5.328 1.908h.14a7.395 7.395 0 0 0 5.53-2.88c2.188-2.554 2.267-5.52 2.17-8.233.308.309.633.6.972.875a12.491 12.491 0 0 0 3.298 2.012 9.858 9.858 0 0 0 1.532.517l-12.845 11.76Zm15.487-16.87a.874.874 0 0 0-.7 1.184.874.874 0 0 0 .324.408c.365.235.63.596.744 1.015a.997.997 0 0 1-.429.726c-.341.307-1.225.394-2.468 0 .753-1.347.875-2.467.36-3.325a2.54 2.54 0 0 0-1.908-1.12 2.135 2.135 0 0 0-.692-2.248 3.885 3.885 0 0 0-3.578-.158c.052-.341.113-.682.192-1.015.079-.332.193-.743.324-1.128a1.094 1.094 0 0 1 1.102-.875 1.514 1.514 0 0 1 1.357 1.198.875.875 0 0 0 1.601.272s1.041-1.637 2.258-1.112c1.067.473.516 2.24.507 2.258a.876.876 0 0 0 .788 1.146c1.19.061 1.636.77 1.662 1.365.026.595-.341 1.269-1.444 1.409Z"></path></svg>';
 
 export class IconWrapLarge extends HTMLElement {
     constructor () {
@@ -33,9 +33,13 @@ export class IconWrapLarge extends HTMLElement {
 
     connectedCallback () {
         const svg = this.root.querySelector('svg');
-        const svgSize = getSvgProps('c-pieIcon c-pieIcon--wrapLarge', '', null, 'IconWrapLarge');
-        svg.setAttribute('width', svgSize.width);
-        svg.setAttribute('height', svgSize.height);
+
+        if (svg.getAttribute('width') === null) {
+            const svgSize = getSvgProps('c-pieIcon c-pieIcon--wrapLarge', '', null, 'IconWrapLarge');
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+        }
+
         this.setAttribute('class', 'c-pieIcon c-pieIcon--wrapLarge');
         this.root.append(svg);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-icons-webc",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "main": "icons/index.js",
   "type": "module",
   "files": [