如何将 aurelia slickgrid rowdetail \"+\" 图标更改为另一个？答案

【问题标题】：How to change aurelia slickgrid rowdetail "+" icon to another?如何将 aurelia slickgrid rowdetail \"+\" 图标更改为另一个？
【发布时间】：2022-12-06 06:16:23
【问题描述】：

我正在使用 aurelia-slickgrid 库和“行详情视图" 选项，其中我们有以下图标：

是否可以覆盖某处或其他任何地方的 gridOptions 以使用另一个图标？目前我正在使用这样的 rowdetail 选项：
    gridOptions = {
    ....
     rowDetailView: {
    ....
    //is there something that can change the default icon?
     }

}

【问题讨论】：

标签： aurelia slickgrid aurelia-slickgrid

【解决方案1】：

您可以通过更改与SASS variables 相关联的任何图标来更改图标。您还可以使用 CSS 变量，请参阅底部。

默认变量具有以下 Font-Awesome 4 图标（十六进制值可以从 Font-Awesome 网站找到），如果您使用字体，那么您将始终具有关联的十六进制值：

$slick-detail-view-icon-collapse: "056";
$slick-detail-view-icon-expand:   "055";

当您使用字体时，您将始终拥有一个十六进制值（如上所示），您可以使用任何其他字体（不仅仅是 Font-Awesome），但如果您这样做，请不要忘记也更改相关的 SASS 变量（下面是 Font-Awesome 4)

$slick-icon-font-family: "FontAwesome";

您还可以使用 SVG，这就是我创建 Salesforce 和 Material 主题的方式（从 Material Design Icons 复制 SVG 路径），例如

$slick-detail-view-icon-collapse: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="darkgray" viewBox="0 0 24 24"><path d="M17,13H7V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>');
$slick-detail-view-icon-expand:   url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="darkgray" viewBox="0 0 24 24"><path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>');

您还可以使用 CSS 变量，通过将 $ 前缀替换为 --，它们也可以通过相同的名称获得

:root {
    --slick-detail-view-icon-collapse: "056";
    --slick-detail-view-icon-expand: "055";
}

实际上我写了所有这个答案，但事实上它在我创建的关于同一主题的多个 Wiki 中也有很好的解释，Styling - Wiki 和 SVG Icons - Wiki，因此您也可以查看它们。

【讨论】：