Question

我需要在Ag-Grid（反应）侧栏上为自定义面板指定自定义图标。我的工具面板如下所示：

toolPanels: [
    {
        id: "actions",
        labelDefault: "Actions",
        labelKey: "actions",
        iconKey: "entityActions",                  
        toolPanel: "blotterActionsPanel",
        toolPanelParams: {glEventHub: this.props.glEventHub}
    },
    {
        id: "columns",
        labelDefault: "Columns",
        labelKey: "columns",
        iconKey: "columns",
        toolPanel: "agColumnsToolPanel"
    },
    {
        id: "filters",
        labelDefault: "Filters",
        labelKey: "filters",
        iconKey: "filter",
        toolPanel: "agFiltersToolPanel"
    }
]

对于“操作”工具面板，我具有iconKey'entityActions'，所以我的图标如下所示：

icons: {
    entityActions: '<i class="fa fa-running" style="font-size: 12pt; color: darkgrey"/>',
}

这适用于超棒的字体图标...但是我不想使用FA图标。我需要使用BlueprintJS中的图标，它们是SVG图标。 BlueprintJS提供了一个最容易使用的标签...但是我已经尝试过各种方法：

icons: {
    entityActions: "<Icon icon='add'/>"
}

这不起作用...我也可以从BlueprintJS获取原始SVG路径，所以我尝试了：

entityActions: '<span><svg fill="black" height="16" width="16"  viewBox={"0 0 16 16"}><path d=' + IconSvgPaths16.add[0] + '/></svg></span>',

，而且我尝试对路径进行硬编码...在所有这些情况下，我只是在希望图标出现的地方出现空白。 Ag-Grid文档（https://www.ag-grid.com/javascript-grid-icons/）：

图标可以是以下任意一个：字符串：字符串将被视为html。用于仅返回文本或HTML标签。函数：一个返回String或DOM节点或元素的函数。

所以，我尝试了一个函数...我找不到如何执行此操作的示例，但是经过几个小时的搜索，我遇到了一些示例，这些示例显示了如何使用document.createElement创建元素。：

entityActions: params => {
    let icon = document.createElement('svg');
    let path = document.createElement('path');
    icon.setAttribute('fill', "black");
    icon.setAttribute("height", "16");
    icon.setAttribute("width", "16");
    icon.setAttribute("viewBox", "0 0 16 16");
    path.setAttribute("d", IconSvgPaths16.add[0]);                    
    icon.appendChild(path);
    return icon;
}

还是没有运气...如何在Ag-Grid中使用BlueprintJS图标？该图标实际上是可由用户自定义的，因此，如果我可以使用一个函数并传递要使用的图标名称，并让其返回适当的图标，那将是很好的选择。

谢谢，特洛伊。

Answer 1

为什么不将BlueprintJS图标转换为base64字符串，而在将base64字符串用作div的{{1}}中使用它呢？

因此您的background-image对于添加图标将如下所示：

entityActions

Here's这种工作的StackBlitz。

在Ag-Grid边栏上设置自定义SVG图标

1 个答案: