在 fancytree 中使用自定义 svg 图标

Question

如何在 fancytree 中显示我的 SVG 图标？我正在做类似以下的事情：

$("#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 } }; });
        }
})

在 v.icon 我得到一个 svg 图标。如果我定义 postProcess 如下

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 }; });
        }

它将 img 的 src 的值设置为 svg 元素。如何显示 svg 图标而不是 img 标签？

Answer 1

通过如下设置 postProcess 回调解决了这个问题：

postProcess: function (event, data) {
            data.result = data.response.map((v) => {
                return {
                    ...
                    icon: { text: v.icon } || true,
                    ...
                }
            });
        },

在 fancytree 中使用自定义 svg 图标

Use custom svg icon in fancytree

jquery

svg

fancytree