https://website-cms-prod.fly.dev/modules/App/assets/vendor/kiss/components/svg/svg.js

1let svgCache = {};
2
3customElements.define('kiss-svg', class extends HTMLElement {
4
5    static get observedAttributes() {
6        return ['src'];
7    }
8
9    connectedCallback() {
10        this.update();
11    }
12
13    attributeChangedCallback(attrName, oldVal, newVal) {
14        if (attrName == 'src') this.update();
15    }
16
17    update() {
18
19        let url = this.getAttribute('src');
20        let width = this.getAttribute('width');
21        let height = this.getAttribute('height');
22
23        if (!url || !url.trim()) {
24            this.innerHTML = '';
25            return;
26        }
27
28        if (width && height) {
29            this.innerHTML = `<canvas width="${width}" height="${height}"></canvas>`;
30        }
31
32        const mutate = (content) => {
33
34            let attrs = {
35                width: this.getAttribute('width') || '',
36                height: this.getAttribute('height') || ''
37            };
38
39            let svgStart = content.indexOf('<svg');
40
41            if (svgStart === -1) {
42                this.innerHTML = '';
43                return;
44            }
45
46            this.innerHTML = content.substring(svgStart);
47
48            let svg = this.children[0];
49
50            Object.keys(attrs).forEach(attr => attrs[attr] && svg.setAttribute(attr, attrs[attr]));
51        }
52
53        if (!svgCache[url]) {
54            svgCache[url] = fetch(url).then(response => response.text());
55        }
56
57        svgCache[url].then(content => {
58            mutate(content.trim());
59        }).catch(() => {
60            this.innerHTML = '';
61        });
62    }
63
64});