de do :
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/[email protected]" 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?
Mohammad Javidi :
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/[email protected]', 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
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=293348&siteId=1