How do I show my SVG icons in fancytree? I am doing something like following:
$("#tree").fancytree({
activeVisible: true,
checkbox: true,
selectMode: 3,
source: {
url: "/category/GetCategories",
},
lazyLoad: function (event, data) {
data.result = {
url: "/category/SubCategories/" + data.node.key
}
},
loadChildren: function (event, data) {
if (data.node.isSelected()) {
data.node.visit(function (subNode) {
// Load all lazy/unloaded child nodes
// (which will trigger `loadChildren` recursively)
// subNode.setExpanded();
if (subNode.isUndefined() && subNode.isExpanded()) {
subNode.load();
}
});
}
},
postProcess: function (event, data) {
data.result = data.response.map((v) => { return { title: v.name, selected: v.isShared, key: v.id, lazy: v.hasChildren, folder: true, icon: { html: v.icon } }; });
}
})
In v.icon
I am getting an svg icon.
If I define postProcess
as following
postProcess: function (event, data) {
data.result = data.response.map((v) => { return { title: v.name, selected: v.isShared, key: v.id, lazy: v.hasChildren, folder: true, icon: v.icon }; });
}
it will set the value of src
of the img
as the svg element. How can I show the svg icons instead of the img
tag?
solved it by setting postProcess
callback as following:
postProcess: function (event, data) {
data.result = data.response.map((v) => {
return {
...
icon: { text: v.icon } || true,
...
}
});
},