@justeattakeaway/pie-icons-webc 0.1.0

package/dist/IconCookiePolicyLarge.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--cookiePolicyLarge"><path fill-rule="evenodd" d="M16 28.25C9.245 28.25 3.75 22.755 3.75 16S9.245 3.75 16 3.75c.831 0 1.654.087 2.459.245l.376 1.54c-.656.534-1.041 1.304-1.041 2.135a2.752 2.752 0 0 0 2.747 2.748l.02-.003c.053-.008.1-.015.155-.015l.875 1.164c-.114.323-.175.63-.175.918a2.752 2.752 0 0 0 2.748 2.748c1.111 0 2.152-.543 2.213-.989h1.733c.096.665.14 1.216.14 1.759 0 6.755-5.495 12.25-12.25 12.25ZM16 5.5C10.207 5.5 5.5 10.207 5.5 16S10.207 26.5 16 26.5s10.255-4.462 10.491-10.045c-.7.35-1.54.525-2.327.525a4.507 4.507 0 0 1-4.498-4.498c0-.13 0-.262.018-.402a4.507 4.507 0 0 1-3.64-4.419c0-.761.192-1.496.56-2.152A13.903 13.903 0 0 0 16 5.49V5.5Zm-4.568 8.444a1.846 1.846 0 1 0 0-3.693 1.846 1.846 0 0 0 0 3.693Zm6.073 7.656a1.846 1.846 0 1 1-3.693 0 1.846 1.846 0 0 1 3.693 0Zm-.639-4.646a1.208 1.208 0 1 0 0-2.415 1.208 1.208 0 0 0 0 2.415Zm-5.661 1.4a1.207 1.207 0 1 1-2.415 0 1.207 1.207 0 0 1 2.415 0Zm10.343 2.424a1.207 1.207 0 1 0 0-2.415 1.207 1.207 0 0 0 0 2.415Zm4.33-12.39a1.207 1.207 0 1 1-2.414 0 1.207 1.207 0 0 1 2.415 0Z" clip-rule="evenodd"></path></svg>';
+
+class IconCookiePolicyLarge 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--cookiePolicyLarge', '', null, 'IconCookiePolicyLarge');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--cookiePolicyLarge');
+        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--cookiePolicyLarge', '', newVal, 'IconCookiePolicyLarge');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-cookie-policy-large', IconCookiePolicyLarge);
+
+exports.IconCookiePolicyLarge = IconCookiePolicyLarge;

package/dist/IconCopy.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--copy"><g clip-path="url(#prefix__clip0_1597_572)"><path d="M8.184 6.501h-3.44v1.356h3.44V6.502Z"></path><path d="M8.184 9.135h-3.44v1.356h3.44V9.135Z"></path><path d="M14.212 1.627a1.356 1.356 0 0 0-.875-.56L7.265 0A1.374 1.374 0 0 0 5.69 1.111l-.166.963h1.32l.123-.726a.061.061 0 0 1 .07-.044l6.073 1.041.044.079-1.085 6.326v3.036a1.356 1.356 0 0 0 .97-1.067l1.4-8.094a1.391 1.391 0 0 0-.227-.998Z"></path><path d="M9.54 14H3.415a1.365 1.365 0 0 1-1.365-1.365V4.428A1.356 1.356 0 0 1 3.389 3.07h6.125a1.357 1.357 0 0 1 1.365 1.357v8.19A1.366 1.366 0 0 1 9.539 14ZM3.415 4.375a.061.061 0 0 0-.061.061v8.19a.061.061 0 0 0 .06.062H9.54a.07.07 0 0 0 .07-.062V4.428a.07.07 0 0 0-.07-.053H3.415Z"></path></g><defs><clipPath id="prefix__clip0_1597_572"><rect width="14" height="14" transform="translate(1)"></rect></clipPath></defs></svg>';
+
+class IconCopy 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--copy', '', null, 'IconCopy');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--copy');
+        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--copy', '', newVal, 'IconCopy');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-copy', IconCopy);
+
+exports.IconCopy = IconCopy;

package/dist/IconCopyFilled.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--copyFilled"><g clip-path="url(#prefix__clip0_1597_575)"><path d="M13.795 1.627a1.345 1.345 0 0 0-.862-.56L6.946 0a1.34 1.34 0 0 0-1 .233c-.291.208-.49.523-.552.878l-.07.639h3.874c.69.014 1.346.3 1.83.8.483.498.755 1.17.757 1.869v7.28c.21-.08.394-.215.536-.39.143-.175.237-.384.275-.608l1.424-8.076a1.363 1.363 0 0 0-.225-.998Z"></path><path fill-rule="evenodd" d="M9.198 14H3.159a1.32 1.32 0 0 1-.977-.394 1.357 1.357 0 0 1-.394-.989v-8.19a1.364 1.364 0 0 1 .389-.961 1.327 1.327 0 0 1 .948-.395h6.038a1.312 1.312 0 0 1 .948.395 1.35 1.35 0 0 1 .39.962v8.19c.006.358-.127.704-.371.963-.244.26-.58.41-.932.419ZM7.86 6.501H4.47v1.357h3.39V6.5ZM4.47 9.135h3.39v1.356H4.47V9.135Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_1597_575"><rect width="14" height="14" transform="translate(1)"></rect></clipPath></defs></svg>';
+
+class IconCopyFilled 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--copyFilled', '', null, 'IconCopyFilled');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--copyFilled');
+        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--copyFilled', '', newVal, 'IconCopyFilled');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-copy-filled', IconCopyFilled);
+
+exports.IconCopyFilled = IconCopyFilled;

package/dist/IconCopyFilledLarge.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--copyFilledLarge"><path d="M12.596 2.079 25.844 4.37A2.424 2.424 0 0 1 27.82 7.18L24.75 24.811a2.388 2.388 0 0 1-.945 1.54V9.57a4.183 4.183 0 0 0-4.174-4.183H9.56l.227-1.33a2.38 2.38 0 0 1 .963-1.566 2.45 2.45 0 0 1 1.846-.411Z"></path><path fill-rule="evenodd" d="M6.183 7.136h13.44a2.433 2.433 0 0 1 2.432 2.433v17.885a2.432 2.432 0 0 1-2.433 2.432H6.182a2.432 2.432 0 0 1-2.432-2.432V9.569a2.433 2.433 0 0 1 2.433-2.433Zm2.344 6.93h8.75v1.75h-8.75v-1.75Zm8.75 3.78h-8.75v1.75h8.75v-1.75Zm-8.75 3.771h8.75v1.75h-8.75v-1.75Z" clip-rule="evenodd"></path></svg>';
+
+class IconCopyFilledLarge 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--copyFilledLarge', '', null, 'IconCopyFilledLarge');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--copyFilledLarge');
+        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--copyFilledLarge', '', newVal, 'IconCopyFilledLarge');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-copy-filled-large', IconCopyFilledLarge);
+
+exports.IconCopyFilledLarge = IconCopyFilledLarge;

package/dist/IconCopyLarge.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--copyLarge"><path d="M26.15 4.345 12.894 2.044a2.45 2.45 0 0 0-2.81 1.986l-.21 1.33h1.75l.176-1.033a.682.682 0 0 1 .787-.55l13.265 2.292a.673.673 0 0 1 .552.779L24.11 20.095v6.221a2.38 2.38 0 0 0 .963-1.566l3.053-17.605a2.425 2.425 0 0 0-1.977-2.8Z"></path><path d="M17.584 14.031h-8.75v1.75h8.75v-1.75Z"></path><path d="M17.584 17.811h-8.75v1.75h8.75v-1.75Z"></path><path d="M17.584 21.591h-8.75v1.75h8.75v-1.75Z"></path><path d="M19.929 29.86H6.479a2.432 2.432 0 0 1-2.423-2.433V9.534A2.424 2.424 0 0 1 6.48 7.11h13.449a2.432 2.432 0 0 1 2.432 2.424v17.893a2.442 2.442 0 0 1-2.432 2.433Zm-13.45-21a.674.674 0 0 0-.673.674v17.893a.682.682 0 0 0 .674.683h13.449a.683.683 0 0 0 .682-.683V9.534a.674.674 0 0 0-.682-.674H6.479Z"></path></svg>';
+
+class IconCopyLarge 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--copyLarge', '', null, 'IconCopyLarge');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--copyLarge');
+        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--copyLarge', '', newVal, 'IconCopyLarge');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-copy-large', IconCopyLarge);
+
+exports.IconCopyLarge = IconCopyLarge;

package/dist/IconCreditCard.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--creditCard"><path d="M3.625 9.094H6.25v1.312H3.625V9.094ZM14.781 4.5v7a1.54 1.54 0 0 1-1.531 1.531H2.75A1.54 1.54 0 0 1 1.219 11.5v-7A1.54 1.54 0 0 1 2.75 2.969h10.5A1.54 1.54 0 0 1 14.781 4.5Zm-12.25 0v1.094H13.47V4.5a.219.219 0 0 0-.219-.219H2.75a.219.219 0 0 0-.219.219Zm10.938 7V6.906H2.53V11.5a.219.219 0 0 0 .219.219h10.5a.219.219 0 0 0 .219-.219Z"></path></svg>';
+
+class IconCreditCard 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--creditCard', '', null, 'IconCreditCard');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--creditCard');
+        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--creditCard', '', newVal, 'IconCreditCard');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-credit-card', IconCreditCard);
+
+exports.IconCreditCard = IconCreditCard;

package/dist/IconCreditCardFilled.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--creditCardFilled"><path d="M1.219 6.906V11.5a1.54 1.54 0 0 0 1.531 1.531h10.5a1.54 1.54 0 0 0 1.531-1.531V6.906H1.22Zm5.031 3.5H3.625V9.094H6.25v1.312Z"></path><path d="M14.781 5.594V4.5a1.54 1.54 0 0 0-1.531-1.531H2.75A1.54 1.54 0 0 0 1.219 4.5v1.094H14.78Z"></path></svg>';
+
+class IconCreditCardFilled 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--creditCardFilled', '', null, 'IconCreditCardFilled');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--creditCardFilled');
+        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--creditCardFilled', '', newVal, 'IconCreditCardFilled');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-credit-card-filled', IconCreditCardFilled);
+
+exports.IconCreditCardFilled = IconCreditCardFilled;

package/dist/IconCreditCardFilledLarge.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--creditCardFilledLarge"><path d="M2.875 13.813V23A2.625 2.625 0 0 0 5.5 25.625h21A2.625 2.625 0 0 0 29.125 23v-9.188H2.875Zm9.625 6.562H7.25v-1.75h5.25v1.75Zm10.754.621a1.479 1.479 0 0 1-1.129-.516 1.496 1.496 0 1 1 0-1.96 1.497 1.497 0 1 1 1.129 2.476ZM2.875 11.188V9A2.625 2.625 0 0 1 5.5 6.375h21A2.625 2.625 0 0 1 29.125 9v2.188H2.875Z"></path></svg>';
+
+class IconCreditCardFilledLarge 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--creditCardFilledLarge', '', null, 'IconCreditCardFilledLarge');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--creditCardFilledLarge');
+        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--creditCardFilledLarge', '', newVal, 'IconCreditCardFilledLarge');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-credit-card-filled-large', IconCreditCardFilledLarge);
+
+exports.IconCreditCardFilledLarge = IconCreditCardFilledLarge;

package/dist/IconCreditCardHome.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--creditCardHome"><path d="M4.5 11.5h1.75v.875H4.5V11.5ZM8.814 1.254a2.082 2.082 0 0 0-1.637 0 46.042 46.042 0 0 0-6.125 4.068l.823 1.042A42.989 42.989 0 0 1 7.72 2.452c.178-.043.364-.043.542 0a43 43 0 0 1 5.863 3.912l.814-1.042a45.719 45.719 0 0 0-6.125-4.068ZM13.906 8v5.25a1.54 1.54 0 0 1-1.531 1.531h-8.75a1.54 1.54 0 0 1-1.531-1.531V8a1.54 1.54 0 0 1 1.531-1.531h8.75A1.54 1.54 0 0 1 13.906 8Zm-10.5 0v1.094h9.188V8a.219.219 0 0 0-.219-.219h-8.75A.219.219 0 0 0 3.406 8Zm9.188 5.25v-2.844H3.406v2.844a.219.219 0 0 0 .219.219h8.75a.219.219 0 0 0 .219-.219Z"></path></svg>';
+
+class IconCreditCardHome 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--creditCardHome', '', null, 'IconCreditCardHome');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--creditCardHome');
+        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--creditCardHome', '', newVal, 'IconCreditCardHome');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-credit-card-home', IconCreditCardHome);
+
+exports.IconCreditCardHome = IconCreditCardHome;

package/dist/IconCreditCardHomeFilled.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--creditCardHomeFilled"><path d="m14.939 5.322-.814 1.042a42.997 42.997 0 0 0-5.862-3.92 1.146 1.146 0 0 0-.543 0 42.989 42.989 0 0 0-5.845 3.92l-.814-1.042a46.042 46.042 0 0 1 6.125-4.068 2.082 2.082 0 0 1 1.637 0 45.72 45.72 0 0 1 6.116 4.068ZM2.75 10.406h10.5v2.844a.875.875 0 0 1-.875.875h-8.75a.875.875 0 0 1-.875-.875v-2.844Zm1.75 1.969h1.75V11.5H4.5v.875Zm7.875-5.25h-8.75A.875.875 0 0 0 2.75 8v1.094h10.5V8a.875.875 0 0 0-.875-.875Z"></path></svg>';
+
+class IconCreditCardHomeFilled 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--creditCardHomeFilled', '', null, 'IconCreditCardHomeFilled');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--creditCardHomeFilled');
+        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--creditCardHomeFilled', '', newVal, 'IconCreditCardHomeFilled');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-credit-card-home-filled', IconCreditCardHomeFilled);
+
+exports.IconCreditCardHomeFilled = IconCreditCardHomeFilled;