@justeattakeaway/pie-icons-webc 0.1.0

package/dist/IconPaymentKlarna.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 24 24" class="c-pieIcon c-pieIcon--klarna"><path fill="#FFB3C7" d="M19.964 7.508H4.051c-1.044 0-1.89.797-1.89 1.782v6.747c0 .984.846 1.782 1.89 1.782h15.913c1.045 0 1.891-.798 1.891-1.782V9.29c0-.985-.846-1.782-1.891-1.782Z"></path><path fill="#0A0B09" fill-rule="evenodd" d="M20.01 13.56a.455.455 0 0 0-.466.443c0 .245.21.444.467.444a.456.456 0 0 0 .466-.444.456.456 0 0 0-.466-.444Zm-1.534-.344c0-.335-.302-.607-.674-.607-.372 0-.673.272-.673.607 0 .336.301.608.673.608.372 0 .674-.272.674-.608Zm.002-1.18h.744v2.36h-.744v-.15a1.35 1.35 0 0 1-.737.216c-.723 0-1.31-.558-1.31-1.246s.587-1.245 1.31-1.245c.274 0 .527.08.737.216v-.151Zm-5.949.307v-.307h-.76v2.36h.762v-1.102c0-.371.424-.571.718-.571h.01v-.687c-.303 0-.58.123-.73.307Zm-1.895.873c0-.335-.302-.607-.674-.607-.372 0-.673.272-.673.607 0 .336.301.608.673.608.372 0 .674-.272.674-.608Zm.002-1.18h.744v2.36h-.744v-.15a1.35 1.35 0 0 1-.737.216c-.723 0-1.31-.558-1.31-1.246s.587-1.245 1.31-1.245c.274 0 .527.08.737.216v-.151Zm4.474-.064c-.296 0-.577.088-.765.33v-.266h-.74v2.36h.749v-1.24c0-.359.253-.535.558-.535.326 0 .514.186.514.53v1.246h.743v-1.502c0-.549-.46-.923-1.059-.923Zm-7.604 2.425h.778v-3.413h-.778v3.413Zm-3.417 0h.823v-3.414H4.09v3.415Zm2.881-3.414a2.65 2.65 0 0 1-.843 1.938l1.14 1.477H6.248L5.01 12.793l.32-.227a1.93 1.93 0 0 0 .833-1.583h.806Z" clip-rule="evenodd"></path></svg>';
+
+class IconPaymentKlarna 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--klarna', '', null, 'IconPaymentKlarna');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--klarna');
+        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--klarna', '', newVal, 'IconPaymentKlarna');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-payment-klarna', IconPaymentKlarna);
+
+exports.IconPaymentKlarna = IconPaymentKlarna;

package/dist/IconPaymentMisterCash.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--misterCash"><path fill="#fff" fill-rule="evenodd" d="M8 4.141h5.53c.735 0 .962.534.962.919v5.889c0 .367-.227.918-.962.918H2.47c-.726 0-.963-.55-.963-.918V5.06c0-.376.237-.919.963-.919H8Z" clip-rule="evenodd"></path><path fill="#2D78BB" d="M13.53 11.929H2.47c-.341 0-.621-.123-.805-.35a1.053 1.053 0 0 1-.228-.639V5.06c0-.236.08-.472.228-.647.131-.158.376-.342.805-.342h11.06c.35 0 .63.123.814.342.14.175.219.41.219.647v5.889c0 .236-.08.463-.22.639-.13.157-.376.35-.813.35v-.01ZM2.47 4.21c-.306 0-.543.097-.7.289a.886.886 0 0 0-.193.56v5.889c0 .201.07.402.193.551.157.193.394.297.7.297h11.06c.7 0 .893-.533.893-.848V5.06c0-.21-.07-.411-.193-.56-.158-.192-.394-.289-.7-.289H2.47Z"></path><path fill="#2D78BB" fill-rule="evenodd" d="M5.401 8.613h2.021l1.13-1.208h2.03L8.856 9.321h-6.37V8.035H5.9l-.508.569.009.009Z" clip-rule="evenodd"></path><path fill="#F8E14B" fill-rule="evenodd" d="M10.572 7.405h-2.03L7.415 8.621h-2.03l1.724-1.916h6.37v1.277h-3.413l.508-.568v-.009Z" clip-rule="evenodd"></path><path fill="#2D78BB" fill-rule="evenodd" d="M12.655 6.233a.6.6 0 0 1-.324.087c-.324 0-.621-.245-.621-.577 0-.333.262-.578.595-.578.122 0 .254.018.35.079v.359c-.07-.062-.175-.088-.298-.088a.25.25 0 0 0-.245.245c0 .131.132.21.245.21.132 0 .21 0 .298-.079v.35-.008Zm.831-.272v.272c-.289.218-.63.035-.63-.22v-.498h-.14v-.332h.14V4.92l.394-.219v.482h.227v.297h-.21v.464c0 .087.14.079.21 0l.01.017Zm-2.879-.411.062-.306c.393-.14.97-.061.97.297v.762h-.367l-.017-.035c-.166.105-.796.157-.709-.333.053-.297.385-.367.586-.367.105 0 .15-.097.018-.105-.123 0-.359 0-.543.096V5.55Zm-6.71 0 .06-.306c.403-.14.972-.061.972.297v.762h-.377v-.035c-.166.105-.813.157-.717-.333.052-.297.376-.367.586-.367.105 0 .149-.097.018-.105-.123 0-.368 0-.534.096l-.009-.009Zm4.558.21c0 .333-.28.569-.613.569-.332 0-.62-.254-.62-.586 0-.333.28-.587.612-.587.34 0 .62.254.62.604Zm2.021.21v.271c-.297.219-.63.035-.63-.218v-.5h-.14v-.332h.14V4.93l.403-.219v.481h.218v.298h-.21v.464c0 .087.15.078.21 0l.01.017Z" clip-rule="evenodd"></path><path fill="#2D78BB" fill-rule="evenodd" d="M3.24 4.623c.367 0 .639.49.297.805.43.262.237.848-.245.857h-.796V4.623h.744Zm3.92 1.6a.58.58 0 0 1-.324.088c-.332 0-.621-.245-.621-.577 0-.333.262-.578.586-.578.123 0 .254.018.35.08v.358a.454.454 0 0 0-.289-.088c-.113 0-.253.097-.253.245 0 .132.14.21.253.21.123 0 .202 0 .29-.078v.35l.008-.01Zm-1.015-.655v.726h-.403v-.621c0-.22-.323-.22-.323 0v.62h-.403v-1.11h.403v.096c.332-.254.708-.018.708.297l.018-.008Zm3.509 0v.726H9.25v-.621c0-.22-.324-.22-.324 0v.62h-.393v-1.11h.393v.096c.342-.254.718-.018.718.297l.009-.008Zm1.496-.123c.131 0 .096.105-.018.105-.21 0-.542.07-.586.368-.087.49.543.446.709.332l.017.035h.368v-.761c0-.359-.569-.438-.971-.298l-.062.307c.175-.088.42-.097.543-.097v.01Z" clip-rule="evenodd"></path><path fill="#2D78BB" fill-rule="evenodd" d="M4.43 5.454c.131 0 .087.105-.018.105-.21 0-.533.07-.586.367-.096.49.551.446.709.333v.035h.385v-.761c0-.36-.569-.438-.971-.298l-.062.306c.167-.087.412-.096.534-.096l.009.009Zm3.404-.298c-.324 0-.613.254-.613.587 0 .332.28.586.621.586.342 0 .613-.236.613-.569a.614.614 0 0 0-.621-.604Zm2.423.805v-.464h.21V5.2h-.218v-.481l-.403.218V5.2h-.14v.332h.14v.5c0 .253.324.428.63.218v-.271c-.061.07-.21.079-.21 0l-.009-.018Z" clip-rule="evenodd"></path><path fill="#2D78BB" fill-rule="evenodd" d="M2.496 4.623v1.662h.796a.46.46 0 0 0 .245-.857c.342-.307.07-.805-.297-.805h-.744Zm4.655 1.25c-.096.07-.175.08-.289.08-.113 0-.253-.08-.253-.21 0-.15.13-.245.253-.245s.21.017.29.087v-.359a.667.667 0 0 0-.35-.078.573.573 0 0 0-.587.577c0 .333.28.578.621.578a.58.58 0 0 0 .324-.088v-.35l-.009.009ZM5.427 5.27v-.096h-.402v1.111h.402v-.621c0-.219.324-.219.324 0v.621h.403V5.56c0-.315-.377-.543-.71-.298l-.017.01Zm3.51 0v-.096h-.395v1.111h.394v-.621c0-.219.324-.219.324 0v.621h.402V5.56c0-.315-.376-.543-.717-.298l-.009.01Zm3.727.604c-.097.07-.175.079-.298.079-.114 0-.245-.08-.245-.21a.25.25 0 0 1 .245-.245c.123 0 .228.017.298.087v-.359a.667.667 0 0 0-.35-.078.576.576 0 0 0-.595.577c0 .333.288.578.62.578a.58.58 0 0 0 .325-.088v-.35.009Zm.62.07V5.48h.21v-.297h-.227V4.7l-.393.22v.262h-.14v.332h.14v.499c0 .254.332.429.63.219V5.96c-.062.07-.21.08-.21 0l-.01-.017ZM8.07 5.743a.224.224 0 0 1-.228.218c-.122 0-.218-.096-.218-.236 0-.14.096-.219.218-.219.123 0 .228.08.228.237Z" clip-rule="evenodd"></path><path fill="#2D78BB" fill-rule="evenodd" d="M2.951 5.62h.175c.219 0 .245.333 0 .333h-.184V5.62h.01Zm1.575.184v.14c0 .149-.297.192-.297.035 0-.14.21-.184.297-.175Zm6.72 0v.14c0 .149-.289.192-.289.035 0-.14.21-.184.29-.175Zm-8.111-.849c.21.096.131.315 0 .315H2.95v-.315s.131-.017.175 0h.009Z" clip-rule="evenodd"></path><path fill="#fff" fill-rule="evenodd" d="M7.842 5.515c-.122 0-.218.079-.218.219s.096.236.218.236a.224.224 0 0 0 .228-.219c0-.157-.105-.236-.228-.236Zm3.107.464c0 .157.288.113.288-.035v-.14c-.078-.018-.288.026-.288.175ZM2.95 4.964v.315h.184c.131 0 .201-.219 0-.315a.557.557 0 0 0-.175 0H2.95ZM4.22 5.979c0 .157.297.113.297-.035v-.14c-.087-.018-.297.026-.297.175ZM2.95 5.96h.184c.236 0 .21-.332 0-.332H2.96v.332H2.95Z" clip-rule="evenodd"></path><path fill="#2D78BB" fill-rule="evenodd" d="M7.44 10.826c0-.385-.158-.639-.551-.639-.368 0-.587.28-.587.596 0 .34.263.595.63.595.324 0 .482-.132.482-.132v-.332a.905.905 0 0 1-.394.114c-.21 0-.324-.062-.324-.21h.744v.008Zm-4.174.061.324-.472v.936h.429V9.724h-.43l-.323.49-.332-.49h-.438v1.627h.438v-.936l.332.473Zm4.638-.183c.043-.097.13-.175.253-.175.062 0 .132.026.184.061v-.35s-.096-.061-.149-.061a.425.425 0 0 0-.288.131v-.114h-.385v1.155h.385v-.647Zm-3.273.577c.131.061.298.079.403.079.41 0 .533-.219.533-.394 0-.21-.21-.323-.402-.35-.026 0-.105-.017-.105-.061 0-.026.017-.061.114-.061.078 0 .218.026.288.061l-.017-.297a1.293 1.293 0 0 0-.368-.062c-.236 0-.437.14-.437.377 0 .175.131.27.332.314.088 0 .167.044.167.088 0 .061-.053.07-.114.07-.053 0-.175.018-.394-.07v.315-.009Z" clip-rule="evenodd"></path><path fill="#2D78BB" fill-rule="evenodd" d="M6.084 10.992v-.472h.218v-.306h-.236v-.49l-.402.218v.28h-.14v.333h.14v.516c0 .254.332.429.638.219v-.28c-.061.061-.218.079-.218 0v-.018Zm-1.532.333v-1.12h-.428v1.12h.428Zm-.21-1.155a.235.235 0 0 0 .237-.236c0-.123-.105-.219-.237-.219a.217.217 0 0 0-.218.219c0 .131.096.236.218.236Zm7.009 1.094c.131.061.297.079.402.079.412 0 .543-.22.543-.394 0-.21-.21-.324-.411-.35-.027 0-.105-.018-.105-.062 0-.026.017-.06.122-.06.079 0 .21.025.289.06l-.018-.297a1.293 1.293 0 0 0-.367-.061c-.236 0-.438.14-.438.376 0 .175.132.271.333.315.088 0 .166.044.166.088 0 .06-.061.07-.114.07-.052 0-.175.017-.393-.07v.315l-.009-.01ZM10.1 10.86c-.131.096-.245.123-.42.123-.271 0-.508-.219-.508-.455 0-.254.132-.49.508-.49.175 0 .315.026.42.131v-.385c-.131-.079-.324-.096-.481-.096-.49 0-.867.35-.867.831s.412.831.893.831a.88.88 0 0 0 .455-.114v-.376Zm.682-.411c.132 0 .097.114-.017.114-.21 0-.552.07-.595.367-.097.499.551.455.717.35l.018.026h.385v-.77c0-.367-.586-.437-.998-.297l-.052.306c.175-.087.428-.096.551-.096h-.009Zm1.969-.166v-.578h-.394v1.628h.394v-.639c0-.219.324-.219.324 0v.639h.402v-.735c0-.333-.385-.56-.735-.306l.009-.01Z" clip-rule="evenodd"></path><path fill="#fff" fill-rule="evenodd" d="M6.688 10.599c.017-.105.105-.14.183-.14.079 0 .175.035.175.14h-.359Zm4.19.227v.14c0 .158-.297.193-.297.035 0-.14.219-.175.298-.175Z" clip-rule="evenodd"></path></svg>';
+
+class IconPaymentMisterCash 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--misterCash', '', null, 'IconPaymentMisterCash');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--misterCash');
+        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--misterCash', '', newVal, 'IconPaymentMisterCash');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-payment-mister-cash', IconPaymentMisterCash);
+
+exports.IconPaymentMisterCash = IconPaymentMisterCash;

package/dist/IconPaymentMobilePay.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--mobilePay"><path fill="#5A78FF" d="m1.753 12.207.458-1.456a.048.048 0 0 1 .043-.037h.23c.02.003.038.017.045.037l.356.919c.007.018.025.02.032 0l.354-.92a.057.057 0 0 1 .045-.036h.23c.02.002.038.017.043.037l.448 1.457c.01.029-.006.05-.033.05H3.73a.04.04 0 0 1-.04-.032l-.292-.947c-.004-.018-.024-.018-.031 0l-.343.94c-.011.027-.027.039-.05.039h-.16c-.025 0-.038-.014-.047-.04l-.354-.938c-.007-.019-.025-.019-.03 0l-.297.946a.04.04 0 0 1-.043.031h-.257c-.027 0-.045-.018-.034-.05Zm2.372-.52c0-.337.257-.598.604-.598.35 0 .605.26.605.599 0 .336-.255.599-.605.599a.59.59 0 0 1-.604-.6Zm.902 0c0-.176-.133-.317-.298-.317-.162 0-.297.14-.297.318 0 .175.135.318.297.318.165 0 .298-.143.298-.318Zm.848.477c-.023-.018-.043-.01-.043.02v.03a.043.043 0 0 1-.04.043h-.213a.044.044 0 0 1-.042-.043v-1.456c0-.024.02-.043.042-.044h.224c.023.001.04.02.04.044v.415c0 .03.02.038.052.016a.493.493 0 0 1 .295-.1c.31 0 .546.263.546.599 0 .336-.241.599-.555.599a.46.46 0 0 1-.306-.123Zm.554-.476c0-.177-.133-.318-.3-.318-.162 0-.295.139-.295.318 0 .177.131.315.296.315.166 0 .3-.14.3-.315Zm.494-.867c0-.095.077-.172.171-.172a.172.172 0 0 1 0 .345.175.175 0 0 1-.17-.173Zm.016 1.393v-1.053c0-.023.018-.042.04-.043h.224c.023.001.042.02.043.043v1.053c-.001.024-.02.043-.043.043h-.224a.043.043 0 0 1-.04-.043Zm.558-.342v-1.114c0-.023.017-.043.04-.044h.223c.024.001.043.02.043.044v1.12c0 .073.032.12.11.12a.043.043 0 0 1 .044.044v.186a.042.042 0 0 1-.043.04c-.298 0-.417-.097-.417-.396Zm.541-.18c0-.345.253-.603.59-.603.337 0 .583.263.583.608 0 .04-.012.075-.052.075h-.776c-.02 0-.027.011-.025.03.016.129.129.224.275.224a.275.275 0 0 0 .215-.098.09.09 0 0 1 .072-.036h.207c.036 0 .052.025.039.061-.075.193-.287.334-.542.334a.57.57 0 0 1-.586-.595Zm.823-.104c.016 0 .023-.007.02-.025a.262.262 0 0 0-.514-.007c-.004.016-.002.032.018.032h.476Zm.537.626v-1.456c0-.023.017-.043.04-.044h.71c.325 0 .546.191.546.511 0 .313-.25.517-.561.517h-.377a.037.037 0 0 0-.03.012.038.038 0 0 0-.01.032v.428c-.001.024-.02.043-.043.044h-.235a.043.043 0 0 1-.04-.044Zm.735-.735c.155 0 .241-.134.241-.252 0-.125-.084-.242-.241-.242h-.38c-.026 0-.037.013-.037.04v.413c0 .028.01.041.038.041h.379Zm.667.209c0-.345.257-.6.559-.6.128 0 .219.05.3.117.02.018.043.015.043-.012v-.034a.04.04 0 0 1 .04-.04h.212c.023 0 .042.019.043.043v.75c0 .057.02.082.059.084a.04.04 0 0 1 .038.037v.197a.038.038 0 0 1-.038.039c-.15 0-.237-.043-.287-.13-.013-.022-.03-.027-.052-.004a.496.496 0 0 1-.363.152c-.302 0-.554-.256-.554-.6Zm.902 0c0-.18-.131-.318-.296-.318-.167 0-.297.14-.297.318 0 .175.13.318.297.318.165 0 .296-.141.296-.318Zm.5.969v-.184a.042.042 0 0 1 .043-.04c.149 0 .293-.08.325-.219a.127.127 0 0 0-.01-.09l-.414-.944c-.014-.037.009-.062.036-.062h.223c.023 0 .036.018.045.041l.26.604c.017.047.047.045.067-.002l.248-.606c.01-.023.02-.037.043-.037h.214a.04.04 0 0 1 .034.017.04.04 0 0 1 .004.038l-.426 1.019c-.155.37-.32.508-.649.508a.045.045 0 0 1-.043-.043Zm1.382-1.226v-.235c0-.003 0-.005-.002-.007a.009.009 0 0 0-.007-.003h-.081c-.007 0-.011-.002-.011-.01v-.046c0-.003 0-.006.003-.009a.011.011 0 0 1 .008-.003h.261a.01.01 0 0 1 .009.003.01.01 0 0 1 .003.009v.045c0 .01-.005.011-.012.011h-.083c-.005 0-.007.005-.007.01v.236a.014.014 0 0 1-.003.01.013.013 0 0 1-.01.003h-.057a.013.013 0 0 1-.01-.014Zm.18-.004.095-.3a.012.012 0 0 1 .014-.009h.05c.005 0 .01.004.013.01l.065.174c.005.007.007.007.011 0l.068-.175a.013.013 0 0 1 .014-.009h.05c.005 0 .011.003.013.01l.092.299c.002.011 0 .018-.011.018h-.063c-.007 0-.01-.004-.011-.009l-.055-.175a.005.005 0 0 0-.004-.003.005.005 0 0 0-.005.003l-.06.173c-.005.007-.01.011-.016.011h-.036a.015.015 0 0 1-.016-.011l-.063-.17a.005.005 0 0 0-.005-.004.005.005 0 0 0-.004.004l-.052.172c-.005.007-.007.01-.014.01h-.058c-.011 0-.016-.008-.011-.02ZM7.163 9.203a.505.505 0 0 1-.467-.313L4.956 4.66a.508.508 0 0 1 .272-.663l1.824-.76a.501.501 0 0 1 .658.275l1.74 4.229a.508.508 0 0 1-.272.662l-1.823.76a.5.5 0 0 1-.192.039Zm.082-5.73a.23.23 0 0 0-.09.018l-1.823.76a.233.233 0 0 0-.126.305l1.741 4.23c.05.119.185.175.304.126l1.823-.76a.233.233 0 0 0 .126-.306L7.46 3.617a.233.233 0 0 0-.215-.144Z"></path><path fill="url(#prefix__paint0_linear_3973_4581)" d="m7.826 3.792-.251.104.688 1.675.25-.105-.687-1.674Z" style="mix-blend-mode:multiply"></path><path fill="url(#prefix__paint1_linear_3973_4581)" d="m9.084 7.565.25-.105-.778-1.895-.251.105.779 1.895Z" style="mix-blend-mode:multiply"></path><path fill="#5A78FF" d="M8.768 6.309c-.522.217-.957.517-1.242.879L6.79 5.402a3.104 3.104 0 0 1 1.242-.88c.521-.217 1.048-.322 1.496-.261l.735 1.786a3.085 3.085 0 0 0-1.496.262Z"></path><path fill="url(#prefix__paint2_linear_3973_4581)" d="M8.768 6.309c-.522.217-.957.517-1.242.879L6.79 5.402a3.104 3.104 0 0 1 1.242-.88c.521-.217 1.048-.322 1.496-.261l.735 1.786a3.085 3.085 0 0 0-1.496.262Z" style="mix-blend-mode:multiply"></path><path fill="url(#prefix__paint3_linear_3973_4581)" d="M8.768 6.309c-.522.217-.957.517-1.242.879L6.79 5.402a3.104 3.104 0 0 1 1.242-.88c.521-.217 1.048-.322 1.496-.261l.735 1.786a3.085 3.085 0 0 0-1.496.262Z" style="mix-blend-mode:multiply"></path><path fill="#5A78FF" d="M9.007 6.853c-.564 0-1.08.11-1.481.334V5.381a3.088 3.088 0 0 1 1.481-.334c.565 0 1.092.106 1.482.334v1.806a3.086 3.086 0 0 0-1.482-.334Z"></path><defs><linearGradient id="prefix__paint0_linear_3973_4581" x1="7.843" x2="8.107" y1="10.42" y2="3.138" gradientUnits="userSpaceOnUse"><stop stop-color="#504678"></stop><stop offset=".302" stop-color="#504678" stop-opacity=".616"></stop><stop offset=".608" stop-color="#504678" stop-opacity=".283"></stop><stop offset=".852" stop-color="#504678" stop-opacity=".076"></stop><stop offset="1" stop-color="#504678" stop-opacity="0"></stop></linearGradient><linearGradient id="prefix__paint1_linear_3973_4581" x1="7.843" x2="8.107" y1="10.42" y2="3.138" gradientUnits="userSpaceOnUse"><stop stop-color="#504678"></stop><stop offset=".302" stop-color="#504678" stop-opacity=".616"></stop><stop offset=".608" stop-color="#504678" stop-opacity=".283"></stop><stop offset=".852" stop-color="#504678" stop-opacity=".076"></stop><stop offset="1" stop-color="#504678" stop-opacity="0"></stop></linearGradient><linearGradient id="prefix__paint2_linear_3973_4581" x1="3.463" x2="8.084" y1="9.502" y2="6.01" gradientUnits="userSpaceOnUse"><stop stop-color="#504678"></stop><stop offset=".179" stop-color="#504678" stop-opacity=".872"></stop><stop offset=".526" stop-color="#504678" stop-opacity=".536"></stop><stop offset="1" stop-color="#504678" stop-opacity="0"></stop></linearGradient><linearGradient id="prefix__paint3_linear_3973_4581" x1="7.715" x2="7.536" y1="6.522" y2="4.931" gradientUnits="userSpaceOnUse"><stop stop-color="#504678"></stop><stop offset=".643" stop-color="#504678" stop-opacity=".332"></stop><stop offset="1" stop-color="#504678" stop-opacity="0"></stop></linearGradient></defs></svg>';
+
+class IconPaymentMobilePay 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--mobilePay', '', null, 'IconPaymentMobilePay');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--mobilePay');
+        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--mobilePay', '', newVal, 'IconPaymentMobilePay');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-payment-mobile-pay', IconPaymentMobilePay);
+
+exports.IconPaymentMobilePay = IconPaymentMobilePay;

package/dist/IconPaymentPaypal.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--paypal"><path fill="#253B80" fill-rule="evenodd" d="m5.838 13.312.204-1.299-.454-.012H3.415l1.507-9.573a.135.135 0 0 1 .042-.075.11.11 0 0 1 .079-.029h3.662c1.215 0 2.056.254 2.493.753.204.233.337.479.4.75.066.283.066.62 0 1.032v.295l.2.117c.174.091.312.195.416.316.175.2.291.454.337.758.05.312.033.678-.05 1.098a3.949 3.949 0 0 1-.45 1.245 2.574 2.574 0 0 1-.711.782c-.27.192-.595.341-.962.433a4.816 4.816 0 0 1-1.198.137h-.288a.875.875 0 0 0-.557.204.873.873 0 0 0-.292.52l-.02.117-.362 2.285-.017.083c-.004.025-.013.038-.021.05-.008.008-.025.013-.037.013h-1.76.012Z" clip-rule="evenodd"></path><path fill="#179BD7" fill-rule="evenodd" d="m12.002 4.917-.038.216C11.482 7.614 9.83 8.471 7.72 8.471H6.645a.523.523 0 0 0-.516.441l-.55 3.492-.153.99a.275.275 0 0 0 .27.317h1.907a.46.46 0 0 0 .453-.387l.021-.096.358-2.276.025-.125a.457.457 0 0 1 .454-.387H9.2c1.848 0 3.292-.75 3.716-2.922.175-.907.084-1.665-.383-2.197a1.798 1.798 0 0 0-.52-.404" clip-rule="evenodd"></path><path fill="#222D65" fill-rule="evenodd" d="M11.494 4.717c-.075-.02-.15-.041-.229-.058a4.117 4.117 0 0 0-.241-.046 6.114 6.114 0 0 0-.95-.07h-2.87a.468.468 0 0 0-.2.045.453.453 0 0 0-.254.342L6.138 8.8l-.017.113a.523.523 0 0 1 .516-.442h1.074c2.11 0 3.762-.857 4.245-3.338l.038-.216a2.256 2.256 0 0 0-.396-.166.825.825 0 0 0-.108-.034" clip-rule="evenodd"></path><path fill="#253B80" fill-rule="evenodd" d="M6.754 5.105a.453.453 0 0 1 .254-.341.468.468 0 0 1 .2-.046h2.871c.341 0 .658.02.949.07.083.013.162.03.241.046.08.017.154.038.23.059.037.012.074.02.107.033.142.046.275.104.396.166.146-.915 0-1.54-.495-2.106-.546-.62-1.532-.886-2.793-.886H5.047a.52.52 0 0 0-.516.441l-1.527 9.672a.313.313 0 0 0 .312.363h2.26L6.754 5.1v.004Z" clip-rule="evenodd"></path></svg>';
+
+class IconPaymentPaypal 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--paypal', '', null, 'IconPaymentPaypal');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--paypal');
+        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--paypal', '', newVal, 'IconPaymentPaypal');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-payment-paypal', IconPaymentPaypal);
+
+exports.IconPaymentPaypal = IconPaymentPaypal;

package/dist/IconPaymentPayu.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--payu"><path fill="#9FC603" d="M1.866 6.88s.018-.017.026-.035a.45.45 0 0 1 .447-.359c.428-.017.866-.043 1.295.018.498.079.743.341.813.849.027.2.027.402-.017.603-.096.455-.403.718-.893.762-.358.035-.717.008-1.085.017-.078 0-.105.018-.105.105v.893c0 .096.018.21-.096.253a.362.362 0 0 1-.385-.078V6.88Zm.49.788v.55c0 .053.009.08.07.08.35 0 .691.008 1.041-.018.324-.026.49-.201.508-.525v-.262c-.018-.35-.193-.534-.543-.543-.288-.009-.577 0-.866 0-.149 0-.201.053-.201.21v.516l-.009-.008Z"></path><path fill="#9FC603" d="M13.346 4.946c.079.149.035.307.027.464 0 .044-.053.053-.088.053h-.315c-.044 0-.088 0-.088-.053 0-.157-.043-.315.027-.464h.446-.009Z"></path><path fill="#9EC602" d="M12.856 7.256v1.217c0 .192.009.385-.035.568-.096.447-.376.735-.796.884a2.495 2.495 0 0 1-1.558.018c-.56-.167-.866-.578-.875-1.182-.017-.647 0-1.295 0-1.951 0-.219.08-.297.29-.324.157-.017.323-.017.49.009.14.026.192.079.218.219.009.052.009.105.009.157v1.777c0 .35.131.48.472.525a2 2 0 0 0 .324 0c.298-.035.446-.184.446-.482V6.854c0-.271.079-.35.35-.368h.149v.49c0 .28.009.289.28.289h.21l.026-.009Z"></path><path fill="#9FC603" d="M8.14 10.039h-.079c-.324.052-.542-.07-.656-.376-.096-.245-.149-.508-.219-.762-.122-.437-.236-.866-.359-1.303-.008-.044-.026-.088-.026-.132 0-.052.018-.087.061-.113a.304.304 0 0 1 .43.175c.122.437.244.883.358 1.32.052.202.105.403.166.605.044.14.105.175.236.183.167 0 .237-.052.29-.262l.34-1.418.105-.428c.044-.175.28-.263.438-.167.07.044.061.114.044.184-.07.298-.149.595-.219.893l-.42 1.67a1.585 1.585 0 0 1-.219.517c-.21.324-.525.464-.901.438-.053 0-.079-.027-.105-.062-.018-.035-.026-.07-.035-.105-.044-.175-.018-.21.157-.245.377-.061.543-.219.63-.595l-.017-.017Z"></path><path fill="#9FC603" d="M6.626 8.656c0 .263.026.525-.026.779-.053.245-.193.42-.429.499a1.763 1.763 0 0 1-1.216.026c-.35-.114-.525-.402-.516-.779.017-.385.192-.621.568-.717.158-.044.315-.061.473-.061h.586c.079 0 .105-.027.096-.105V8.06c-.008-.183-.096-.297-.27-.35-.246-.078-.5-.052-.745-.026-.087 0-.175.026-.262.044-.105.017-.158-.026-.175-.131-.018-.22.017-.272.236-.307.368-.061.735-.078 1.094.027.376.105.569.34.586.735v.603Zm-.464.394v-.061c0-.201 0-.201-.2-.201-.246 0-.5-.018-.736.035-.21.052-.306.175-.306.393 0 .21.105.333.306.385.158.044.324.035.481.018.35-.044.455-.166.455-.516V9.05Z"></path><path fill="#9FC603" d="M12.357 6.469v-.096c0-.097.053-.15.15-.15h.717c.105 0 .149.062.157.167v.7c0 .114-.061.166-.175.166h-.35V6.75c0-.158-.079-.236-.236-.263-.087-.017-.175-.008-.262-.017Z"></path><path fill="#9FC603" d="M14.134 5.856v.254c0 .079-.035.123-.114.123h-.516c-.079 0-.123-.044-.123-.132v-.507c0-.088.044-.131.131-.131h.5c.078 0 .122.035.122.122v.271Z"></path></svg>';
+
+class IconPaymentPayu 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--payu', '', null, 'IconPaymentPayu');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--payu');
+        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--payu', '', newVal, 'IconPaymentPayu');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-payment-payu', IconPaymentPayu);
+
+exports.IconPaymentPayu = IconPaymentPayu;

package/dist/IconPaymentPostFinance.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--postFinance"><path fill="#FC0" fill-rule="evenodd" d="M2 14h12V2H2v12Z" clip-rule="evenodd"></path><path fill="red" fill-rule="evenodd" d="M11.23 6.8c.13-.688.291-1.348.416-2.017-.037-.005-.055-.014-.074-.014H9.006c-.083 0-.106.037-.125.116L8.355 7.34c-.004.032-.023.102-.023.102h.683c.014-.056.286-1.311.411-1.902.028-.134.032-.134.17-.134.36 0 1.168.005 1.224.01l-.434 2.03h2.036c0 .037-.162.785-.227 1.136-.018.106-.069.129-.166.129h-1.768c-.138 0-.138 0-.166.138l-.346 1.616c-.032.156-.032.156-.19.156H8.389c-.213 0-.217 0-.263.208-.033.139-.06.282-.093.434.065 0 1.445.01 2.096.01.138 0 .138 0 .17-.134.084-.379.333-1.551.383-1.773h1.865c.194 0 .166.014.208-.17.157-.725.489-2.304.498-2.387h-2.03l.009-.009Z" clip-rule="evenodd"></path><path fill="#fff" fill-rule="evenodd" d="m2.803 9.666-.341 1.592h4.68l.373-1.592H2.803Z" clip-rule="evenodd"></path><path fill="#000" fill-rule="evenodd" d="M5.812 7.377c-.143-.346-.433-.522-.789-.559-.318-.032-.641-.023-.964-.027h-.296c-.208.964-.554 2.538-.757 3.498h.776c.032-.134.166-.886.193-1.015.019-.083.051-.116.134-.116.162 0 .328 0 .49-.009.489-.032.867-.258 1.112-.683.194-.346.254-.715.101-1.09ZM4.525 8.512c-.125.01-.25 0-.388 0l.203-.978c.014-.065.042-.106.12-.102.11.01.222 0 .332.01.199.018.319.143.333.341.032.41-.194.688-.605.725l.005.004Z" clip-rule="evenodd"></path><path fill="#000" fill-rule="evenodd" d="M6.482 6.805h-.074l-.01.046c-.106.475-.216.997-.313 1.472-.111.522-.3 1.435-.406 1.966h.775c.078-.355.185-.867.258-1.218l.028-.106c.032 0 .679.004.937 0l.01-.056c.045-.184.078-.35.124-.558h-.928c.046-.222.097-.637.139-.84l.013-.079h.984s.009-.023.013-.05c.047-.18.088-.374.13-.554v-.033H6.49l-.01.01Z" clip-rule="evenodd"></path></svg>';
+
+class IconPaymentPostFinance 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--postFinance', '', null, 'IconPaymentPostFinance');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--postFinance');
+        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--postFinance', '', newVal, 'IconPaymentPostFinance');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-payment-post-finance', IconPaymentPostFinance);
+
+exports.IconPaymentPostFinance = IconPaymentPostFinance;

package/dist/IconPaymentSodexo.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--sodexo"><path fill="#fff" d="M14.5 4h-13v8h13V4Z"></path><path fill="#2F3B96" d="m7.724 7.336-.127.603c-.05.248-.201.405-.504.405-.352 0-.445-.214-.36-.512.11-.43.463-.562.99-.496Zm.554-.869-.379.034-.117.587c-.143-.008-.185-.008-.352-.008-.52 0-.983.214-1.1.72-.11.454.15.811.73.811.59 0 .85-.305.942-.728l.276-1.416Zm-4.032.893c-.546-.05-1.015 0-1.025.174-.008.274.899.042.882.538-.026.744-1.293.571-1.604.48l.059-.224c.538.083 1.108.091 1.126-.198.016-.314-.899-.034-.882-.538.016-.373.588-.58 1.52-.446l-.076.214Zm1.471.506a.634.634 0 0 1-.62.504c-.311 0-.446-.175-.37-.504a.644.644 0 0 1 .63-.512c.284-.01.436.196.36.512Zm-.319-.77c-.546 0-.975.306-1.083.77-.11.464.185.77.723.77s.975-.314 1.084-.77c.108-.456-.187-.77-.724-.77Zm6.257 1.53h-.47A8.604 8.604 0 0 1 9.95 7.112h.345c.386.514 1.36 1.514 1.36 1.514Zm.495-3.01.218-.446.059.454.445-.157-.309.389.336.256-.453.042-.016.462-.254-.347-.36.331.134-.462-.428-.058.41-.232-.167-.405.385.173Zm.917 2.25a.644.644 0 0 1-.63.512c-.311 0-.454-.183-.37-.512a.664.664 0 0 1 .64-.522c.292 0 .443.206.36.522Zm-.32-.778c-.554 0-.992.314-1.1.778-.11.462.185.785.739.785s.991-.313 1.1-.785c.109-.472-.185-.778-.74-.778Z"></path><path fill="#EC2024" d="M9.597 8.493c.891-.488 1.663-1.232 2.209-1.877-.395 1.208-1.344 1.869-2.209 1.877Z"></path><path fill="#2F3B96" d="M9.245 7.32c.167 0 .26.058.26.174 0 .306-.613.29-.883.232.101-.25.345-.416.623-.406Zm.63.157c0-.224-.185-.389-.588-.389-.663 0-1.1.422-1.1.95 0 .34.286.621.814.621.21 0 .42-.057.605-.174-.462.05-1.026 0-1.026-.48v-.058c.623.133 1.295-.024 1.295-.47Z"></path><path fill="#E9444E" d="M4.34 9.34v.718c0 .046.01.078.028.096.018.017.049.027.091.027h.265v.185h-.36c-.089 0-.155-.024-.2-.073a.287.287 0 0 1-.069-.205v-.747h.245Z"></path><path fill="#E9444E" d="M4.84 9.618h.238v.467c0 .041.008.07.026.085a.092.092 0 0 0 .059.022c.029 0 .055-.01.078-.029.023-.019.044-.038.063-.057l.034-.034v-.458h.24v.75h-.24v-.132l-.04.043a.445.445 0 0 1-.095.072.269.269 0 0 1-.133.029.25.25 0 0 1-.166-.056c-.043-.037-.065-.102-.065-.198v-.504Z"></path><path fill="#E9444E" d="M5.767 9.618h.24v.134l.041-.043a.399.399 0 0 1 .093-.072.276.276 0 0 1 .135-.029c.066 0 .122.018.166.054.043.037.065.101.065.192v.514h-.24v-.467c0-.042-.007-.07-.025-.085a.092.092 0 0 0-.059-.022c-.029 0-.055.01-.078.028a.448.448 0 0 0-.063.06l-.034.032v.457h-.24v-.753Z"></path><path fill="#E9444E" d="M6.656 9.936c0-.112.04-.194.116-.248a.45.45 0 0 1 .27-.08c.048 0 .098.005.15.014a.48.48 0 0 1 .134.044v.23h-.192v-.09a.236.236 0 0 0-.046-.01c-.016-.002-.03-.004-.045-.004a.151.151 0 0 0-.104.035c-.028.024-.042.061-.042.109v.1c0 .055.014.095.042.12.028.026.068.04.122.04a.669.669 0 0 0 .123-.012c.043-.008.08-.016.116-.026h.011v.173a.963.963 0 0 1-.271.048.48.48 0 0 1-.273-.072c-.072-.048-.108-.13-.108-.243v-.128h-.003Z"></path><path fill="#E9444E" d="M7.472 9.34h.239v.412l.042-.043a.399.399 0 0 1 .093-.072.276.276 0 0 1 .134-.029.25.25 0 0 1 .166.056c.044.037.065.102.065.198v.506h-.239v-.467c0-.042-.008-.07-.026-.085a.092.092 0 0 0-.058-.022c-.03 0-.055.01-.078.028a.448.448 0 0 0-.064.06l-.034.032v.457h-.24v-1.03Z"></path><path fill="#E9444E" d="M8.769 9.34h.414c.122 0 .215.03.275.089.06.057.09.147.09.269 0 .12-.034.214-.1.281-.067.067-.163.101-.286.101h-.15v.288H8.77V9.341Zm.242.554h.114c.071 0 .118-.017.143-.05a.25.25 0 0 0 .035-.148c0-.062-.013-.107-.039-.133-.026-.025-.071-.038-.135-.038h-.118v.37Z"></path><path fill="#E9444E" d="M9.64 10.003a.34.34 0 0 1 .131-.28.457.457 0 0 1 .296-.104h.33v.749h-.239v-.118l-.058.044a.494.494 0 0 1-.101.061.319.319 0 0 1-.13.024.235.235 0 0 1-.163-.06c-.044-.04-.066-.106-.066-.197v-.119Zm.516.079v-.288h-.066a.212.212 0 0 0-.151.056.19.19 0 0 0-.06.147v.088c0 .043.008.072.025.086a.094.094 0 0 0 .062.023c.03 0 .057-.01.086-.03l.07-.054.034-.028Z"></path><path fill="#E9444E" d="M10.555 10.173h.01c.038.008.082.014.13.019.046.005.087.008.121.008.03 0 .062-.003.098-.011.035-.008.052-.024.052-.05 0-.017-.012-.032-.033-.041a.326.326 0 0 0-.063-.021l-.117-.026a.31.31 0 0 1-.146-.07c-.036-.034-.054-.08-.054-.143a.18.18 0 0 1 .117-.179.645.645 0 0 1 .257-.051 1.144 1.144 0 0 1 .243.027v.173h-.011c-.034-.005-.07-.011-.109-.014a.957.957 0 0 0-.12-.007.31.31 0 0 0-.086.011c-.028.008-.042.024-.042.048 0 .018.01.03.029.039.02.006.039.013.058.017l.101.024c.059.012.11.034.156.066.045.032.068.083.068.154 0 .096-.042.16-.127.19a.755.755 0 0 1-.27.046 1.048 1.048 0 0 1-.262-.022v-.187Z"></path><path fill="#E9444E" d="M11.32 10.173h.011c.038.008.082.014.129.019.047.005.087.008.121.008.03 0 .062-.003.098-.011.036-.008.052-.024.052-.05 0-.017-.011-.032-.033-.041a.324.324 0 0 0-.063-.021l-.117-.026a.31.31 0 0 1-.146-.07c-.036-.034-.054-.08-.054-.143a.18.18 0 0 1 .117-.179.644.644 0 0 1 .257-.051 1.143 1.143 0 0 1 .244.027v.173h-.012c-.034-.005-.07-.011-.108-.014a.957.957 0 0 0-.12-.007.311.311 0 0 0-.087.011c-.027.008-.042.024-.042.048 0 .018.01.03.03.039.019.006.038.013.058.017l.1.024c.059.012.11.034.156.066s.069.083.069.154c0 .096-.043.16-.127.19a.755.755 0 0 1-.271.046 1.05 1.05 0 0 1-.262-.022v-.187Z"></path></svg>';
+
+class IconPaymentSodexo 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--sodexo', '', null, 'IconPaymentSodexo');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--sodexo');
+        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--sodexo', '', newVal, 'IconPaymentSodexo');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-payment-sodexo', IconPaymentSodexo);
+
+exports.IconPaymentSodexo = IconPaymentSodexo;

package/dist/IconPaymentSofort.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--sofort"><path fill="#EF809F" d="M13.889 12.375H2.11a.676.676 0 0 1-.674-.682V4.308c0-.377.307-.683.683-.683h11.76c.376 0 .682.306.682.683v7.385a.682.682 0 0 1-.673.682Z"></path><path fill="#fff" d="M5.375 11.447c.298 0 .525-.2.525-.49 0-.27-.193-.385-.429-.455-.149-.043-.245-.078-.245-.183 0-.088.061-.158.167-.158.087 0 .148.053.2.132l.246-.158a.47.47 0 0 0-.438-.254c-.297 0-.49.21-.49.464 0 .201.123.35.412.438.157.043.262.078.262.2 0 .123-.088.193-.21.193-.131 0-.236-.087-.298-.166l-.2.201a.617.617 0 0 0 .498.245m1.199 0a.566.566 0 0 1-.569-.56c0-.306.254-.56.569-.56.315 0 .569.254.569.56 0 .306-.254.56-.57.56Zm0-.28a.275.275 0 0 0 .271-.28.275.275 0 0 0-.271-.28.275.275 0 0 0-.271.28c0 .158.122.28.27.28Zm1.304-.997v-.28h-.044c-.359 0-.543.245-.543.525v1.006h.298v-.438c0-.148.113-.253.28-.253v-.28a.383.383 0 0 0-.28.105v-.114c0-.184.122-.271.288-.262m.648 1.277a.566.566 0 0 1-.569-.56c0-.306.254-.56.569-.56.315 0 .569.254.569.56 0 .306-.254.56-.569.56Zm0-.28a.27.27 0 0 0 .271-.28.275.275 0 0 0-.271-.28.275.275 0 0 0-.271.28c0 .158.122.28.271.28Zm1.024-.683v-.122H9.26v1.059h.297v-.482c0-.175.105-.27.28-.27v-.316c-.13 0-.227.044-.288.14m.761.394v-.262a.37.37 0 0 0 .28.104v-.28c-.158 0-.28-.113-.28-.253v-.167h-.298v.875c0 .28.175.525.543.525h.044v-.28c-.167 0-.289-.078-.289-.262Zm.639.56a.204.204 0 0 0 .201-.201.198.198 0 0 0-.201-.201.198.198 0 0 0-.201.2c0 .114.087.202.2.202Z"></path><path fill="#fff" d="M7.527 7.694a.227.227 0 0 1 0 .332l-.017.018a.227.227 0 0 1-.332 0l-.526-.517c-.148-.148-.166-.323-.07-.42L6.6 7.09a.215.215 0 0 1 .289-.018c.043.035.096.027.131-.017s.026-.096-.017-.131a.404.404 0 0 0-.543.035l-.018.017c-.166.175-.14.473.08.683l.524.525a.436.436 0 0 0 .604 0l.018-.018a.434.434 0 0 0 0-.595.095.095 0 0 0-.132 0 .095.095 0 0 0 0 .131m-.315-2.817.219 1.768c0 .052.052.087.105.078.053 0 .088-.052.079-.105L7.405 4.85c-.035-.157.052-.324.175-.35.07-.018.14 0 .201.035a.253.253 0 0 1 .114.166l.376 1.602c.009.052.061.078.114.07.053-.01.079-.062.07-.114l-.376-1.593a.502.502 0 0 0-.193-.288.428.428 0 0 0-.341-.062c-.228.053-.385.315-.324.56"></path><path fill="#fff" d="m9.19 6.95.429-2.118a.45.45 0 0 0-.315-.524.468.468 0 0 0-.569.332l-.473 1.61c-.017.053.018.105.062.114.043.008.105-.018.114-.061l.472-1.61a.287.287 0 0 1 .341-.202c.123.035.202.167.175.307l-.428 2.117c-.01.053.026.105.07.114.052 0 .104-.026.113-.079M8.114 8.989c-.674 0-1.234-.49-1.234-1.199a.097.097 0 0 0-.096-.096.097.097 0 0 0-.096.096c0 .814.656 1.382 1.426 1.382a.097.097 0 0 0 .096-.096.097.097 0 0 0-.096-.096M7.78 7.326a.236.236 0 0 1-.096.131h-.017c-.106.088-.254.062-.333-.052l-.411-.612c-.114-.176-.097-.35.008-.43l.018-.017c.14-.079.254-.017.376.158l.342.516s.087.053.13.026c.045-.026.053-.087.027-.131l-.341-.516c-.175-.245-.385-.359-.639-.21l-.026.017c-.202.14-.228.438-.061.683l.41.612a.423.423 0 0 0 .587.114l.018-.018a.421.421 0 0 0 .166-.236.088.088 0 0 0-.07-.114c-.053-.017-.096.018-.114.07"></path><path fill="#fff" d="M8.411 7.65c-.192.114-.315.315-.332.63 0 .053.035.096.087.096.053 0 .096-.035.096-.087.018-.28.123-.438.298-.499a.673.673 0 0 1 .289-.035h.026c.123.026.158-.157.035-.184l-.726-.166c-.341-.096-.394-.219-.333-.429.027-.087.079-.14.167-.157a.586.586 0 0 1 .175 0h.034l1.103.253h.018s.034.027.052.044c.07.079.114.228.096.473-.07.857-.472 1.391-1.417 1.382a.097.097 0 0 0-.097.097c0 .052.044.096.097.096 1.067 0 1.531-.613 1.61-1.558.026-.297-.027-.498-.14-.612a.31.31 0 0 0-.184-.105l-1.094-.254s-.026 0-.052-.009a.62.62 0 0 0-.254 0 .384.384 0 0 0-.306.289c-.088.306 0 .542.464.665l.262.061.026.009Z"></path></svg>';
+
+class IconPaymentSofort 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--sofort', '', null, 'IconPaymentSofort');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--sofort');
+        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--sofort', '', newVal, 'IconPaymentSofort');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-payment-sofort', IconPaymentSofort);
+
+exports.IconPaymentSofort = IconPaymentSofort;

package/dist/IconPaymentTwint.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--twint"><rect width="12" height="12" x="2" y="2" fill="#000"></rect><path fill="#fff" d="M12.75 10.077h-1.713v.412h.615v1.76h.485v-1.76h.613v-.412Zm-7.784 0H3.25v.412h.615v1.76h.485v-1.76h.616v-.412Zm4.96-.068c-.54 0-.84.346-.84.848v1.393h.48v-1.404c0-.218.128-.386.365-.386s.363.2.363.386v1.404h.48v-1.393c.002-.502-.308-.848-.848-.848Zm-1.81.068v2.173h.48v-2.173h-.48Zm-1.627.86.015.098.452 1.215h.195l.613-2.173h-.472L7 11.219l-.018.123-.024-.123-.391-1.142H6.41l-.39 1.142-.024.123-.016-.123-.292-1.142h-.474l.612 2.173h.196l.451-1.215.016-.097Z"></path><path fill="#fff" d="M10.355 7.616a.238.238 0 0 1-.109.186L8.152 9.02a.24.24 0 0 1-.217 0L5.84 7.802a.237.237 0 0 1-.108-.186V5.18c0-.069.048-.152.108-.186l2.095-1.218a.24.24 0 0 1 .217 0l2.095 1.218c.06.034.108.117.108.186v2.436Z"></path><path fill="url(#prefix__paint0_radial_3973_4725)" d="m9.136 6.404-.548.807-.28-.431.323-.485a.638.638 0 0 0 .04-.65.67.67 0 0 0-1.219 0 .627.627 0 0 0 .037.641s.18.264.329.488l.242.354.366.563c.003.002.06.091.162.091.097 0 .157-.089.166-.097L9.61 6.41h-.474v-.006Zm-1.076.02s-.142-.218-.237-.37a.272.272 0 0 1 .237-.409c.226 0 .337.245.237.408-.091.153-.237.37-.237.37Z"></path><path fill="url(#prefix__paint1_radial_3973_4725)" d="m7.535 7.185-.537-.758s-.142-.219-.236-.37a.272.272 0 0 1 .316-.397l.189-.348A.68.68 0 0 0 7 5.255a.674.674 0 0 0-.61.39.627.627 0 0 0 .037.641l.939 1.399c.008.011.068.1.168.1s.157-.086.166-.097l.282-.434-.242-.359-.206.29Z"></path><defs><radialGradient id="prefix__paint0_radial_3973_4725" cx="0" cy="0" r="1" gradientTransform="matrix(10.7623 0 0 9.6294 5.383 4.495)" gradientUnits="userSpaceOnUse"><stop stop-color="#FC0"></stop><stop offset=".092" stop-color="#FFC800"></stop><stop offset=".174" stop-color="#FFBD00"></stop><stop offset=".253" stop-color="#FFAB00"></stop><stop offset=".33" stop-color="#FF9100"></stop><stop offset=".405" stop-color="#FF7000"></stop><stop offset=".479" stop-color="#FF4700"></stop><stop offset=".55" stop-color="#FF1800"></stop><stop offset=".582" stop-color="red"></stop><stop offset="1" stop-color="red"></stop></radialGradient><radialGradient id="prefix__paint1_radial_3973_4725" cx="0" cy="0" r="1" gradientTransform="matrix(2.31436 0 0 3.52162 6.36 5.622)" gradientUnits="userSpaceOnUse"><stop stop-color="#00B4E6"></stop><stop offset=".201" stop-color="#00B0E3"></stop><stop offset=".39" stop-color="#01A5DB"></stop><stop offset=".574" stop-color="#0292CD"></stop><stop offset=".755" stop-color="#0377BA"></stop><stop offset=".932" stop-color="#0455A1"></stop><stop offset="1" stop-color="#054696"></stop></radialGradient></defs></svg>';
+
+class IconPaymentTwint 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--twint', '', null, 'IconPaymentTwint');
+        svg.setAttribute('width', svgSize.width);
+        svg.setAttribute('height', svgSize.height);
+        this.setAttribute('class', 'c-pieIcon c-pieIcon--twint');
+        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--twint', '', newVal, 'IconPaymentTwint');
+
+            svg.setAttribute('width', svgSize.width);
+            svg.setAttribute('height', svgSize.height);
+            this.root.append(svg);
+        }
+    }
+}
+
+customElements.define('icon-payment-twint', IconPaymentTwint);
+
+exports.IconPaymentTwint = IconPaymentTwint;