@justeattakeaway/pie-icons-webc 0.1.0

package/LICENSE

@@ -0,0 +1,17 @@
+Apache License
+Version 2.0, January 2004
+http://www.apache.org/licenses/
+
+Copyright (c) Just Eat Takeaway.com
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,99 @@
+
+# pie-icons-webc
+
+Shared PIE Icon Components for Web Components.
+
+This package generates a Web Component iconset for applications using the base [pie-icons](https://www.npmjs.com/package/@justeattakeaway/pie-icons) package. The SVGs in pie-icons are compiled into web components that can be imported into applications.
+
+---
+
+[![npm version](https://img.shields.io/npm/v/@justeattakeaway/pie-icons-webc.svg)](https://img.shields.io/npm/v/@justeattakeaway/pie-icons-webc.svg)
+
+---
+## Usage
+
+### Installation
+
+Add the module to your project
+
+```bash
+yarn add @justeattakeaway/pie-icons-webc
+```
+
+### Applications
+
+```js
+// Only import what you need!
+import { IconAppRestaurant, IconAppRestaurantLarge } from '@justeattakeaway/pie-icons-webc';
+```
+Within the context of a Lit app, that will look like:
+
+  ```js
+import { IconAppRestaurant } from '@justeattakeaway/pie-icons-webc';
+export { IconAppRestaurant }
+
+  export class IconButton extends LitElement {
+    render () {
+      return html`
+        <button>
+          <icon-app-restaurant size="xs" />
+        </button>`;
+    }
+  }
+  ```
+
+If you require icons for a React app, please head to [pie-icons-react](https://www.npmjs.com/package/@justeattakeaway/pie-icons-react)
+
+
+If you require icons for a Vue app, please head to [pie-icons-vue](https://www.npmjs.com/package/@justeattakeaway/pie-icons-vue)
+
+#### Props
+
+Icons accept any standard attribute, except for `width` and `height` since those are set implicitly by using the `size` prop.
+
+##### `size`
+
+Icons are made available in different size variants:
+- regular
+- large, when its name has the `Large` suffix
+
+Regular icons default size is `xs` and can use one of the following pre-determined values for `size`: `xs`, `s`, `m`, `l`, `xl`, and `xxl`. You can learn more about regular icon sizes [here](https://www.pie.design/foundations/iconography/overview/#:~:text=Sizes%20for%20the%20Small%20icon%20set).
+
+Large icons `size` default and minimum value is `32`. Values larger than the minimum must be multiples of `8`, otherwise will be automatically rounded. You can learn more about large icon sizes [here](https://www.pie.design/foundations/iconography/overview/#:~:text=Sizes%20for%20the%20Large%20icon%20set).
+
+Example:
+
+```js
+<icon-alert-triangle size="s" />
+<icon-alert-triangle-large size="80" />
+```
+
+### Tree shaking
+
+By using ES imports like `import { IconCalendar } from '@justeattakeaway/pie-icons-webc'` with Webpack v4+ or Rollup, unused exports in this module will be automatically eliminated.
+
+If you can't use a tree-shaking compatible build tool, then you can use the per-file icons from the [`/icons`](https://unpkg.com/@justeattakeaway/pie-icons-vue/icons/) directory, e.g. `import IconCalendar from '@justeattakeaway/pie-icons-webc/icons/IconCalendar'`.
+
+
+### Browser Support
+
+The component extends [@justeat/browserslist-config-fozzie](https://github.com/justeat/browserslist-config-fozzie) package for the list of browsers to support.
+
+
+## Contributing
+
+Before starting please read our [contributing guide](https://pie.design/engineers/contributing/)
+
+### Adding new icons
+
+Icons should be added as SVGs to the main pie-icons package and published, before simply incrementing the dependency of `pie-icons` in the `pie-icons-webc` package, to generate the new set of Web Components.
+
+The PIE iconset is managed by our PIE design team and new icon requests should go through them to ensure that they are designed in-line with our standards and guildelines. Please reach out to PIE design system team using #help-designsystem slack channel.
+
+### Building the Module
+
+Run `yarn build --filter=pie-icons-webc` from the project level or `yarn turbo run build --filter=pie-icons-webc` from the root level to compile the module.
+
+## Icon list
+
+You can check the list of all the icons on our [documentation site](https://pie.design/foundations/iconography/library/).

package/dist/IconAlcohol.js

@@ -0,0 +1,61 @@
+'use strict';
+
+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--alcohol"><path d="M6.4 5.28V2.576c0-.419-.17-.82-.472-1.115A1.624 1.624 0 0 0 4.791 1h-.68c-.426 0-.835.166-1.137.462a1.561 1.561 0 0 0-.47 1.115v2.702a2.11 2.11 0 0 1-.534 1.45 4.613 4.613 0 0 0-.964 3.055v3.603c-.015.401.132.792.409 1.087.277.295.661.471 1.07.49h3.933a1.566 1.566 0 0 0 1.07-.49c.277-.295.424-.686.41-1.087V9.784a4.611 4.611 0 0 0-.92-3.054A2.112 2.112 0 0 1 6.4 5.28ZM3.881 2.576c0-.06.024-.117.067-.16a.232.232 0 0 1 .162-.066h.68c.061 0 .12.024.163.066.043.043.067.1.067.16v1.126h-1.14V2.577Zm1.14 2.477v.225a3.426 3.426 0 0 0 .77 2.19c.168.222.313.46.433.711H2.678c.12-.25.265-.489.432-.712a3.426 3.426 0 0 0 .772-2.189v-.225h1.14Zm1.497 8.333a.257.257 0 0 1-.101.226H2.485a.262.262 0 0 1-.101-.226V9.56H6.51v.225l.009 3.603ZM8.605 3.081v4c0 .713.249 1.405.705 1.96a3.198 3.198 0 0 0 1.803 1.094v3.514h-1.46V15h4.3v-1.351h-1.461v-3.514a3.198 3.198 0 0 0 1.803-1.093A3.088 3.088 0 0 0 15 7.082v-4H8.605Zm5.035 4c0 .478-.194.936-.538 1.274a1.856 1.856 0 0 1-1.3.528c-.487 0-.954-.19-1.3-.528a1.784 1.784 0 0 1-.537-1.274V4.432h3.675v2.65Z"></path></svg>';
+
+class IconAlcohol extends HTMLElement {
+    constructor () {
+        super();
+        const clone = template.content.cloneNode(true);
+        this.root = this.attachShadow({ mode: 'open' });
+        this.root.append(clone);
+    }
+
+    static get observedAttributes () {
+        return ['size'];
+    }
+
+    get size () {
+        return this.getAttribute('size');
+    }
+
+    set size (value) {
+        this.setAttribute('size', value);
+    }
+
+    get class () {
+        return this.getAttribute('class');
+    }
+
+    set class (value) {
+        this.setAttribute('class', value);
+    }
+
+    connectedCallback () {
+        const svg = this.root.querySelector('svg');
+        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--alcohol', '', null, 'IconAlcohol');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--alcohol');
+        this.root.append(svg);
+    }
+
+    attributeChangedCallback (attr, oldVal, newVal) {
+        const svg = this.root.querySelector('svg');
+        let svgSize;
+
+        if (attr === 'size') {
+            svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--alcohol', '', newVal, 'IconAlcohol');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-alcohol', IconAlcohol);
+
+exports.IconAlcohol = IconAlcohol;

package/dist/IconAlcoholFilled.js

@@ -0,0 +1,61 @@
+'use strict';
+
+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--alcoholFilled"><path d="M6.396 5.28V2.576c0-.419-.17-.82-.47-1.115A1.623 1.623 0 0 0 4.788 1h-.68c-.426 0-.834.166-1.136.462-.301.295-.47.696-.47 1.115v2.702a2.111 2.111 0 0 1-.533 1.424 4.668 4.668 0 0 0-.964 3.08v3.604c-.015.401.132.792.409 1.087.277.295.66.471 1.07.49h3.93a1.565 1.565 0 0 0 1.069-.49c.277-.295.424-.686.409-1.087V9.784a4.613 4.613 0 0 0-.918-3.054 2.113 2.113 0 0 1-.579-1.45ZM5.02 5.026v.252c-.008.797.268 1.571.78 2.19.161.225.302.463.423.711H2.677c.124-.248.268-.487.432-.712A3.427 3.427 0 0 0 3.88 5.28v-.225l1.139-.027Z"></path><path d="M8.6 3.081v4c0 .713.249 1.405.705 1.96a3.196 3.196 0 0 0 1.802 1.094v3.514h-1.46V15h4.297v-1.351h-1.46v-3.514a3.205 3.205 0 0 0 1.806-1.093 3.098 3.098 0 0 0 .71-1.96v-4H8.6Z"></path></svg>';
+
+class IconAlcoholFilled extends HTMLElement {
+    constructor () {
+        super();
+        const clone = template.content.cloneNode(true);
+        this.root = this.attachShadow({ mode: 'open' });
+        this.root.append(clone);
+    }
+
+    static get observedAttributes () {
+        return ['size'];
+    }
+
+    get size () {
+        return this.getAttribute('size');
+    }
+
+    set size (value) {
+        this.setAttribute('size', value);
+    }
+
+    get class () {
+        return this.getAttribute('class');
+    }
+
+    set class (value) {
+        this.setAttribute('class', value);
+    }
+
+    connectedCallback () {
+        const svg = this.root.querySelector('svg');
+        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--alcoholFilled', '', null, 'IconAlcoholFilled');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--alcoholFilled');
+        this.root.append(svg);
+    }
+
+    attributeChangedCallback (attr, oldVal, newVal) {
+        const svg = this.root.querySelector('svg');
+        let svgSize;
+
+        if (attr === 'size') {
+            svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--alcoholFilled', '', newVal, 'IconAlcoholFilled');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-alcohol-filled', IconAlcoholFilled);
+
+exports.IconAlcoholFilled = IconAlcoholFilled;

package/dist/IconAlcoholFilledLarge.js

@@ -0,0 +1,61 @@
+'use strict';
+
+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--alcoholFilledLarge"><path d="M17.444 6.918v7.253a5.67 5.67 0 0 0 4.786 5.583v7.621h-3.22v1.75h8.199v-1.75H23.98v-7.621a5.662 5.662 0 0 0 4.786-5.583V6.918H17.444Zm9.572 4.278c-2.406.691-3.325.394-4.375 0a7 7 0 0 0-3.5-.411V8.668h7.823l.052 2.528Z"></path><path d="M14.679 16a10.049 10.049 0 0 0-1.208-2.188 5.005 5.005 0 0 1-1.024-2.187 5.82 5.82 0 0 1-.06-.822V5.5A2.625 2.625 0 0 0 9.76 2.875H8.466A2.625 2.625 0 0 0 5.841 5.5v5.303c.001.275-.022.55-.07.822a5.005 5.005 0 0 1-1.024 2.188A9.696 9.696 0 0 0 3.55 16a8.751 8.751 0 0 0-.438 1.75c-.08.58-.122 1.165-.122 1.75v7a2.511 2.511 0 0 0 2.371 2.625h7.499a2.52 2.52 0 0 0 2.38-2.625v-7c.007-.585-.031-1.17-.114-1.75a8.262 8.262 0 0 0-.446-1.75ZM6.19 14.81a6.484 6.484 0 0 0 1.4-4.008v-.927h3.045v.928c0 .274.015.549.044.822a6.484 6.484 0 0 0 1.356 3.185c.271.38.517.777.735 1.19H5.5a9.41 9.41 0 0 1 .691-1.19Z"></path></svg>';
+
+class IconAlcoholFilledLarge extends HTMLElement {
+    constructor () {
+        super();
+        const clone = template.content.cloneNode(true);
+        this.root = this.attachShadow({ mode: 'open' });
+        this.root.append(clone);
+    }
+
+    static get observedAttributes () {
+        return ['size'];
+    }
+
+    get size () {
+        return this.getAttribute('size');
+    }
+
+    set size (value) {
+        this.setAttribute('size', value);
+    }
+
+    get class () {
+        return this.getAttribute('class');
+    }
+
+    set class (value) {
+        this.setAttribute('class', value);
+    }
+
+    connectedCallback () {
+        const svg = this.root.querySelector('svg');
+        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--alcoholFilledLarge', '', null, 'IconAlcoholFilledLarge');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--alcoholFilledLarge');
+        this.root.append(svg);
+    }
+
+    attributeChangedCallback (attr, oldVal, newVal) {
+        const svg = this.root.querySelector('svg');
+        let svgSize;
+
+        if (attr === 'size') {
+            svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--alcoholFilledLarge', '', newVal, 'IconAlcoholFilledLarge');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-alcohol-filled-large', IconAlcoholFilledLarge);
+
+exports.IconAlcoholFilledLarge = IconAlcoholFilledLarge;

package/dist/IconAlcoholLarge.js

@@ -0,0 +1,61 @@
+'use strict';
+
+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--alcoholLarge"><path d="M12.386 10.811V5.5a2.625 2.625 0 0 0-2.625-2.625H8.466A2.625 2.625 0 0 0 5.841 5.5v5.311a4.655 4.655 0 0 1-1.085 3.01 8.671 8.671 0 0 0-1.75 5.679v7a2.52 2.52 0 0 0 2.38 2.625h7.499a2.511 2.511 0 0 0 2.371-2.625v-7a8.75 8.75 0 0 0-1.75-5.679 4.612 4.612 0 0 1-1.12-3.01ZM7.591 5.5a.875.875 0 0 1 .875-.875H9.77a.875.875 0 0 1 .875.875v2.625H7.591V5.5Zm-1.4 9.31a6.248 6.248 0 0 0 1.4-3.999v-.936h3.045v.936a6.248 6.248 0 0 0 1.4 3.999c.27.38.516.778.735 1.19H5.5c.184-.429.438-.805.691-1.19ZM13.49 26.5c0 .473-.28.875-.622.875H5.37c-.341 0-.63-.402-.63-.875v-7c-.005-.586.042-1.172.14-1.75h8.496c.098.578.145 1.164.14 1.75l-.026 7Zm15.286-12.329V6.918H17.453v7.253a5.679 5.679 0 0 0 4.786 5.591v7.613h-3.22v1.75h8.199v-1.75h-3.23v-7.613a5.67 5.67 0 0 0 4.787-5.59Zm-1.75-5.503v2.528c-2.406.7-3.325.403-4.375.044a6.825 6.825 0 0 0-3.5-.42V8.668h7.875Zm-7.822 5.503V12.58a5.127 5.127 0 0 1 2.896.315 6.93 6.93 0 0 0 2.45.481 10.232 10.232 0 0 0 2.476-.359v1.155a3.911 3.911 0 1 1-7.822 0Z"></path></svg>';
+
+class IconAlcoholLarge extends HTMLElement {
+    constructor () {
+        super();
+        const clone = template.content.cloneNode(true);
+        this.root = this.attachShadow({ mode: 'open' });
+        this.root.append(clone);
+    }
+
+    static get observedAttributes () {
+        return ['size'];
+    }
+
+    get size () {
+        return this.getAttribute('size');
+    }
+
+    set size (value) {
+        this.setAttribute('size', value);
+    }
+
+    get class () {
+        return this.getAttribute('class');
+    }
+
+    set class (value) {
+        this.setAttribute('class', value);
+    }
+
+    connectedCallback () {
+        const svg = this.root.querySelector('svg');
+        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--alcoholLarge', '', null, 'IconAlcoholLarge');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--alcoholLarge');
+        this.root.append(svg);
+    }
+
+    attributeChangedCallback (attr, oldVal, newVal) {
+        const svg = this.root.querySelector('svg');
+        let svgSize;
+
+        if (attr === 'size') {
+            svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--alcoholLarge', '', newVal, 'IconAlcoholLarge');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-alcohol-large', IconAlcoholLarge);
+
+exports.IconAlcoholLarge = IconAlcoholLarge;

package/dist/IconAlertCircle.js

@@ -0,0 +1,61 @@
+'use strict';
+
+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--alertCircle"><path d="M8 14.781A6.782 6.782 0 1 1 14.781 8 6.79 6.79 0 0 1 8 14.781Zm0-12.25A5.469 5.469 0 1 0 8 13.47 5.469 5.469 0 0 0 8 2.53Z"></path><path d="M7.055 4.631a3.5 3.5 0 0 1 1.89 0l-.481 4.244h-.928l-.481-4.244Zm1.82 5.994a.875.875 0 1 1-1.75 0 .875.875 0 0 1 1.75 0Z"></path></svg>';
+
+class IconAlertCircle extends HTMLElement {
+    constructor () {
+        super();
+        const clone = template.content.cloneNode(true);
+        this.root = this.attachShadow({ mode: 'open' });
+        this.root.append(clone);
+    }
+
+    static get observedAttributes () {
+        return ['size'];
+    }
+
+    get size () {
+        return this.getAttribute('size');
+    }
+
+    set size (value) {
+        this.setAttribute('size', value);
+    }
+
+    get class () {
+        return this.getAttribute('class');
+    }
+
+    set class (value) {
+        this.setAttribute('class', value);
+    }
+
+    connectedCallback () {
+        const svg = this.root.querySelector('svg');
+        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--alertCircle', '', null, 'IconAlertCircle');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--alertCircle');
+        this.root.append(svg);
+    }
+
+    attributeChangedCallback (attr, oldVal, newVal) {
+        const svg = this.root.querySelector('svg');
+        let svgSize;
+
+        if (attr === 'size') {
+            svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--alertCircle', '', newVal, 'IconAlertCircle');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-alert-circle', IconAlertCircle);
+
+exports.IconAlertCircle = IconAlertCircle;

package/dist/IconAlertCircleFilled.js

@@ -0,0 +1,61 @@
+'use strict';
+
+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--alertCircleFilled"><path d="M8 1.219A6.781 6.781 0 1 0 14.781 8 6.79 6.79 0 0 0 8 1.219ZM8 11.5a.875.875 0 1 1 0-1.75.875.875 0 0 1 0 1.75Zm.464-2.625h-.928l-.481-4.244a3.5 3.5 0 0 1 1.89 0l-.481 4.244Z"></path></svg>';
+
+class IconAlertCircleFilled extends HTMLElement {
+    constructor () {
+        super();
+        const clone = template.content.cloneNode(true);
+        this.root = this.attachShadow({ mode: 'open' });
+        this.root.append(clone);
+    }
+
+    static get observedAttributes () {
+        return ['size'];
+    }
+
+    get size () {
+        return this.getAttribute('size');
+    }
+
+    set size (value) {
+        this.setAttribute('size', value);
+    }
+
+    get class () {
+        return this.getAttribute('class');
+    }
+
+    set class (value) {
+        this.setAttribute('class', value);
+    }
+
+    connectedCallback () {
+        const svg = this.root.querySelector('svg');
+        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--alertCircleFilled', '', null, 'IconAlertCircleFilled');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--alertCircleFilled');
+        this.root.append(svg);
+    }
+
+    attributeChangedCallback (attr, oldVal, newVal) {
+        const svg = this.root.querySelector('svg');
+        let svgSize;
+
+        if (attr === 'size') {
+            svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--alertCircleFilled', '', newVal, 'IconAlertCircleFilled');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-alert-circle-filled', IconAlertCircleFilled);
+
+exports.IconAlertCircleFilled = IconAlertCircleFilled;

package/dist/IconAlertCircleFilledLarge.js

@@ -0,0 +1,61 @@
+'use strict';
+
+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--alertCircleFilledLarge"><path d="M16 3.75a12.25 12.25 0 1 0 0 24.5 12.25 12.25 0 0 0 0-24.5Zm-1.313 17.063a1.313 1.313 0 1 1 2.626 0 1.313 1.313 0 0 1-2.625 0Zm2.022-3.063H15.29l-.744-7.639a4.586 4.586 0 0 1 2.905 0l-.743 7.639Z"></path></svg>';
+
+class IconAlertCircleFilledLarge extends HTMLElement {
+    constructor () {
+        super();
+        const clone = template.content.cloneNode(true);
+        this.root = this.attachShadow({ mode: 'open' });
+        this.root.append(clone);
+    }
+
+    static get observedAttributes () {
+        return ['size'];
+    }
+
+    get size () {
+        return this.getAttribute('size');
+    }
+
+    set size (value) {
+        this.setAttribute('size', value);
+    }
+
+    get class () {
+        return this.getAttribute('class');
+    }
+
+    set class (value) {
+        this.setAttribute('class', value);
+    }
+
+    connectedCallback () {
+        const svg = this.root.querySelector('svg');
+        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--alertCircleFilledLarge', '', null, 'IconAlertCircleFilledLarge');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--alertCircleFilledLarge');
+        this.root.append(svg);
+    }
+
+    attributeChangedCallback (attr, oldVal, newVal) {
+        const svg = this.root.querySelector('svg');
+        let svgSize;
+
+        if (attr === 'size') {
+            svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--alertCircleFilledLarge', '', newVal, 'IconAlertCircleFilledLarge');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-alert-circle-filled-large', IconAlertCircleFilledLarge);
+
+exports.IconAlertCircleFilledLarge = IconAlertCircleFilledLarge;

package/dist/IconAlertCircleLarge.js

@@ -0,0 +1,61 @@
+'use strict';
+
+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--alertCircleLarge"><path d="M16 28.25a12.25 12.25 0 1 1 0-24.5 12.25 12.25 0 0 1 0 24.5ZM16 5.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21Z"></path><path d="M14.547 10.111a4.584 4.584 0 0 1 2.905 0l-.743 7.639H15.29l-.744-7.639Zm2.765 10.701a1.313 1.313 0 1 1-2.625 0 1.313 1.313 0 0 1 2.626 0Z"></path></svg>';
+
+class IconAlertCircleLarge extends HTMLElement {
+    constructor () {
+        super();
+        const clone = template.content.cloneNode(true);
+        this.root = this.attachShadow({ mode: 'open' });
+        this.root.append(clone);
+    }
+
+    static get observedAttributes () {
+        return ['size'];
+    }
+
+    get size () {
+        return this.getAttribute('size');
+    }
+
+    set size (value) {
+        this.setAttribute('size', value);
+    }
+
+    get class () {
+        return this.getAttribute('class');
+    }
+
+    set class (value) {
+        this.setAttribute('class', value);
+    }
+
+    connectedCallback () {
+        const svg = this.root.querySelector('svg');
+        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--alertCircleLarge', '', null, 'IconAlertCircleLarge');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--alertCircleLarge');
+        this.root.append(svg);
+    }
+
+    attributeChangedCallback (attr, oldVal, newVal) {
+        const svg = this.root.querySelector('svg');
+        let svgSize;
+
+        if (attr === 'size') {
+            svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--alertCircleLarge', '', newVal, 'IconAlertCircleLarge');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-alert-circle-large', IconAlertCircleLarge);
+
+exports.IconAlertCircleLarge = IconAlertCircleLarge;

package/dist/IconAlertTriangle.js

@@ -0,0 +1,61 @@
+'use strict';
+
+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--alertTriangle"><path d="M8.656 5.375H7.344V8h1.312V5.375Z"></path><path d="M8 10.625a.875.875 0 1 0 0-1.75.875.875 0 0 0 0 1.75Z"></path><path d="M13.408 13.031H2.591a1.496 1.496 0 0 1-1.33-.796 1.593 1.593 0 0 1 .044-1.61l5.408-8.662A1.505 1.505 0 0 1 8 1.219a1.505 1.505 0 0 1 1.286.726l5.408 8.68a1.593 1.593 0 0 1 0 1.627 1.496 1.496 0 0 1-1.287.78ZM8 2.531a.192.192 0 0 0-.175.105l-5.408 8.671a.297.297 0 0 0 0 .298.2.2 0 0 0 .184.114h10.806a.2.2 0 0 0 .184-.114.297.297 0 0 0 0-.298l-5.416-8.67A.192.192 0 0 0 8 2.53Z"></path></svg>';
+
+class IconAlertTriangle extends HTMLElement {
+    constructor () {
+        super();
+        const clone = template.content.cloneNode(true);
+        this.root = this.attachShadow({ mode: 'open' });
+        this.root.append(clone);
+    }
+
+    static get observedAttributes () {
+        return ['size'];
+    }
+
+    get size () {
+        return this.getAttribute('size');
+    }
+
+    set size (value) {
+        this.setAttribute('size', value);
+    }
+
+    get class () {
+        return this.getAttribute('class');
+    }
+
+    set class (value) {
+        this.setAttribute('class', value);
+    }
+
+    connectedCallback () {
+        const svg = this.root.querySelector('svg');
+        const svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--alertTriangle', '', null, 'IconAlertTriangle');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--alertTriangle');
+        this.root.append(svg);
+    }
+
+    attributeChangedCallback (attr, oldVal, newVal) {
+        const svg = this.root.querySelector('svg');
+        let svgSize;
+
+        if (attr === 'size') {
+            svgSize = configs.getSvgProps('c-pieIcon c-pieIcon--alertTriangle', '', newVal, 'IconAlertTriangle');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-alert-triangle', IconAlertTriangle);
+
+exports.IconAlertTriangle = IconAlertTriangle;