动态添加的生动图标的问题

Question

I wanted to use Vivid icons in my projects. It works until I want to add it dynamically. I guess that there is no event handler to actually change <i/> tag to <svg/>.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="https://cdn.jsdelivr.net/npm/vivid-icons@1.0.10" type="text/javascript"></script> <p>Here is a bag</p> <i data-vi="bag"></i> <p>Now add a box</p> <button id="add" type="button">Add a box</button> <script> $("#add").click(function(){ $("body").append("<p>added, but where it is?</p>"); $("body").append('<i data-vi="bag"></i>'); }); </script>

Is there a way to trigger the function in vivid-icons.js after adding and icon '<i data-vi="bag"></i>'?

Thanks

I am adding actual javascript here used so you can see:

! function(a) {
    var t = {};

    function c(h) {
        if (t[h]) return t[h].exports;
        var l = t[h] = {
            i: h,
            l: !1,
            exports: {}
        };
        return a[h].call(l.exports, l, l.exports, c), l.l = !0, l.exports
    }
    c.m = a, c.c = t, c.d = function(a, t, h) {
        c.o(a, t) || Object.defineProperty(a, t, {
            enumerable: !0,
            get: h
        })
    }, c.r = function(a) {
        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(a, Symbol.toStringTag, {
            value: "Module"
        }), Object.defineProperty(a, "__esModule", {
            value: !0
        })
    }, c.t = function(a, t) {
        if (1 & t && (a = c(a)), 8 & t) return a;
        if (4 & t && "object" == typeof a && a && a.__esModule) return a;
        var h = Object.create(null);
        if (c.r(h), Object.defineProperty(h, "default", {
                enumerable: !0,
                value: a
            }), 2 & t && "string" != typeof a)
            for (var l in a) c.d(h, l, function(t) {
                return a[t]
            }.bind(null, l));
        return h
    }, c.n = function(a) {
        var t = a && a.__esModule ? function() {
            return a.default
        } : function() {
            return a
        };
        return c.d(t, "a", t), t
    }, c.o = function(a, t) {
        return Object.prototype.hasOwnProperty.call(a, t)
    }, c.p = "", c(c.s = 1)
}([function(a) {
    a.exports = JSON.parse('dvg goes here')
}, function(a, t, c) {
    "use strict";
    c.r(t);
    let h = "48",
        l = "#FF6E6E",
        p = "#0C0058",
        i = "#FFFFFF",
        s = function(a, t) {
            for (let c in t) a.setAttribute(c, t[c])
        };
    let r, e = c(0),
        v = function() {
            r = document.querySelectorAll("[data-vi]"), r.forEach((function(a, t) {
                let c = a,
                    r = c.dataset.vi;
                e[r]; - 1 !== r.indexOf("-") && (r = r.replace(/-([a-z])/g, (function(a) {
                    return a[1].toUpperCase()
                })));
                var v = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                v.innerHTML = e[r];
                let Z = v.querySelectorAll(".vi-primary"),
                    H = v.querySelectorAll(".vi-accent"),
                    V = v.querySelectorAll(".vi-prop");
                if (null != Z && null != Z && (void 0 !== l || "" !== l))
                    for (let a = 0; a < Z.length; a++) Z[a].style.fill = l;
                if (null != H && null != H && (void 0 !== p || "" !== p))
                    for (let a = 0; a < H.length; a++) H[a].style.fill = p;
                if (null != V && null != V && (void 0 !== i || "" !== i))
                    for (let a = 0; a < V.length; a++) V[a].style.fill = i;
                if (s(v, void 0 !== h && "" !== h ? {
                        width: h,
                        height: h,
                        viewBox: "0 0 48 48"
                    } : {
                        width: "48",
                        height: "48",
                        viewBox: "0 0 48 48"
                    }), null != v) {
                    if (void 0 !== c.dataset.viSize && null !== c.dataset.viSize && s(v, {
                            width: c.dataset.viSize,
                            height: c.dataset.viSize
                        }), void 0 !== c.dataset.viPrimary && null !== c.dataset.viPrimary) {
                        let a = v.querySelectorAll(".vi-primary");
                        for (let t = 0; t < a.length; t++) a[t].style.fill = c.dataset.viPrimary
                    }
                    if (void 0 !== c.dataset.viAccent && null !== c.dataset.viAccent) {
                        let a = v.querySelectorAll(".vi-accent");
                        for (let t = 0; t < a.length; t++) a[t].style.fill = c.dataset.viAccent
                    }
                    if (void 0 !== c.dataset.viProp && null !== c.dataset.viProp) {
                        let a = v.querySelectorAll(".vi-prop");
                        for (let t = 0; t < a.length; t++) a[t].style.fill = c.dataset.viProp
                    }
                    c.parentNode.replaceChild(v, c)
                } else {
                    let a = '%c Vivid Error: No icon found for data-vi="' + r + '"';
                    console.log(a, "color: #ff4646; font-weight: bold")
                }
            }))
        };
    "loading" !== document.readyState ? v() : document.addEventListener("DOMContentLoaded", (function() {
        v()
    }))
}]);

Is there a way to execute v() function?

Answer 1

This can be a bug in vivid library, but you can fetch vivid with ajax and run it every time that you add another Icon.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <p>Here is a bag</p> <i data-vi="bag"></i> <p>Now add a box</p> <button id="add" type="button">Add a box</button> <script> var vivid if (!vivid) { $.get('https://cdn.jsdelivr.net/npm/vivid-icons@1.0.10', function (script) { vivid = function () { eval(script) } vivid() }) } $("#add").click(function(){ $("body").append("<p>added, but where it is?</p>"); $("body").append('<i data-vi="bag"></i>'); vivid() }); </script>

or if you want to change library by yourself, you can add window.vivid line then every time that you add another icon just run vivid() after that:

"loading" !== document.readyState ? v() : document.addEventListener("DOMContentLoaded", (function() {
    v()
}))
window.vidid = v