如何更改引导程序 5 上的默认手风琴 svg 图标答案

【问题标题】：How to change the default accordion svg icon on bootstrap 5如何更改引导程序 5 上的默认手风琴 svg 图标
【发布时间】：2021-12-18 08:52:33
【问题描述】：

我想更改手风琴的默认引导图标

我想使用<i class="bi bi-plus-circle"></i> 和<i class="bi bi-dash-circle"></i> bootstrap icons，而不是默认箭头图标。

折叠时的一个图标和未折叠时的另一个图标。

想要的结果：

当前结果：

据我所知，默认箭头图标来自这里（截断）：

.accordion-button::after {
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);

}

它基本上被设置为背景图像。

当用户切换时，背景图片会旋转 180 度：

.accordion-button:not(.collapsed)::after {
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
    transform: rotate(
-180deg);
}

我首先想到的是将两个 svg 替换为所需的引导图标 svg 并删除旋转。

所以我尝试用引导图标 svg 替换当前的 SVG：

.accordion-button::after {
    order: -1;
    margin-left: 0;
    margin-right:0.5em;
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529' fill-rule='evenodd' d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z' d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3e%3c/svg%3e);
    background-color: white;
}

不幸的是，它没有用。我把svg代码放错了吗？有没有更好的方法来实现这一点？

LIVE JS FIDDLE

（随意编辑代码并尝试任何引导图标的 svg 代码）

【问题讨论】：

svg img url 似乎不正确~！你确定吗？
不，我不确定！我刚刚在这里复制了 svg：icons.getbootstrap.com/icons/plus-circle 并尝试对其进行调整。我是不是做错了什么？

标签： css twitter-bootstrap svg bootstrap-5

【解决方案1】：

我找到了一个解决方案，基本上我们需要对这些引导图标 svg 进行编码，以便将其用作 css 背景图像。

Here is an online solution 我找到了。

现在，使用以下代码：

.accordion-button::after {
    order: -1;
    margin-left: 0;
    margin-right:0.5em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
    background-color: white;
}

有效！

【讨论】：

不错~！它对我有用！

【解决方案2】：

Sass 选项：

您没有提及您是否使用 sass（我可以看到），但如果您使用了，Bootstrap 5 为您可以覆盖的手风琴图标状态提供了 2 个 sass 变量：

$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");

https://getbootstrap.com/docs/5.1/components/accordion/#variables

Bootstrap 5 也有一个 escape_svg 函数（我认为这就是它的名字）来转义 SVG 中的字符。

您需要包含此处所述的变量覆盖：https://getbootstrap.com/docs/5.1/customize/sass/#variable-defaults

可能看起来工作量很大，但是一旦使用 sass 进行设置，通过这种方式在 Bootstrap 中覆盖和扩展内容就变得更容易了。

【讨论】：