rpg-cards/generator-next/components/card-icon.html

<template id="card-icon">
    <style>
        #icon-container {
            height: 100%;
            background-color: inherit;
        }

        svg {
            height: 100%;
        }

        svg path {
            fill: rgb(255, 255, 255);
        }
    </style>

    <div id="icon-container">

    </div>

</template>

<script>
    (function(window, document) {
        var elemName = 'card-icon';
        var mainDoc = document;
        var importDoc = document.currentScript.ownerDocument;

        var svgCache = {};

        function loadSvgCached(src) {
            if (src === undefined || src === null || src === "") {
                return Promise.resolve(null);
            } else if (svgCache[src]) {
                return svgCache[src];
            } else {
                var promise = loadSvg(src);
                svgCache[src] = promise;
                return promise;
            }
        }
        function loadSvg(src) {
            // console.log("Loading " + src);
            return new Promise(function(resolve, reject) {

                var httpRequest = new XMLHttpRequest();

                httpRequest.onreadystatechange = function () {
                    if (httpRequest.readyState === 4) {

                        if (httpRequest.status === 404 || httpRequest.responseXML === null) {
                            reject(Error("Error loading SVG from " + src));
                        }

                        if (httpRequest.status === 200) {
                            if (httpRequest.responseXML instanceof Document) {
                                var svg = httpRequest.responseXML.children[0];
                                cleanSvg(svg);
                                resolve(svg);
                            }
                        }
                    }
                }

                httpRequest.open('GET', src);
                if (httpRequest.overrideMimeType) httpRequest.overrideMimeType('text/xml');
                httpRequest.send();
            });
        }
        function cleanSvg(svg) {
            // Remove all whitespace
            for (var i = 0; i < svg.childNodes.length; ++i) {
                var child = svg.childNodes[i];
                if (child.nodeName == "#text") {
                    svg.removeChild(child);
                }
            }

            // Keep only the last path
            while (svg.childNodes.length > 1) {
                svg.removeChild(svg.firstChild);
            }

            // Remove the fill of the remaining paths
            var path = svg.firstChild;
            if (path) {
                path.style.fill = "";
            }

            return svg;
        }


        var proto = Object.create(HTMLDivElement.prototype);
        proto.setSvg = function (svg) {
            var root = this.shadowRoot;
            var container = root.getElementById("icon-container");

            // Remove the previous SVG
            while (container.firstChild) {
                container.removeChild(container.firstChild);
            }

            // Replace it with the new one
            if (svg !== null) {
                container.appendChild(svg.cloneNode(true));
            }
        }
        Object.defineProperty(proto, "src", {
            get: function() { 
                return "";
            },
            set: function (value) {
                // console.log("Property src=" + value);
                this.setAttribute('src', value);

                var element = this;
                loadSvgCached(value).then(function (svg) {
                    element.setSvg(svg);
                }, function (error) {
                    // console.log(error);
                });
            }
        });
        proto.createdCallback = function () {
            var template = importDoc.getElementById(elemName);
            var clone = mainDoc.importNode(template.content, true);
            var root = this.createShadowRoot();
            root.appendChild(clone);

            this.src = this.getAttribute('src') || "";
        }
        proto.attributeChangedCallback = function (name, oldValue, newValue) {
            switch (name) {
                case "src": this.src = newValue; break;
            }
        }

        mainDoc.registerElement(elemName, { prototype: proto });

    })(window, document);
</script>