Проблема с динамически добавленными яркими значками

Question

Я хотел использовать Яркие иконки в своих проектах. Это работает, пока я не хочу добавить его динамически. Я думаю, что нет никакого обработчика события, чтобы фактически изменить тег на ,

<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>

Есть ли способ активировать функцию в vivid-icons. js после добавления и значка ' '?

Спасибо

Я добавляю фактический javascript здесь, чтобы вы могли видеть:

! 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()
    }))
}]);

Есть ли способ выполнить функцию v ()?

Answer 1

Это может быть ошибка в яркой библиотеке, но вы можете получить яркую с помощью ajax и запускать ее каждый раз, когда добавляете другую иконку.

<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>

или если вы хотите изменить библиотеку самостоятельно, вы можете добавить строку window.vivid, а затем каждый раз, когда добавляете другой значок, просто запускайте vivid () после этого:

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