可用的图标: https://icons.getbootstrap.com/
使用方式1: 引用全部图标CSS
<!-- 引用 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- 使用 -->
<i class="bi bi-graph-up-arrow"></i>
<i id='sidebarCollapseicon' class="bi bi-text-indent-right"></i>
<!-- 用脚本替换 -->
<script type="text/javascript">
var element = document.getElementById("sidebarCollapseicon");
element.classList.toggle("bi-text-indent-left");
element.classList.toggle("bi-text-indent-right");
</script>
使用方式2:按需使用
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="graph-up-arrow" viewBox="0 0 16 16">
<path d="M0 0h1v15h15v1H0V0Zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5Z"/>
</symbol>
<symbol id="text-indent-right" viewBox="0 0 16 16">
<path d="M2 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm10.646 2.146a.5.5 0 0 1 .708.708L11.707 8l1.647 1.646a.5.5 0 0 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2zM2 6.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
</symbol>
<symbol id="text-indent-left" viewBox="0 0 16 16">
<path d="M2 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm.646 2.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L4.293 8 2.646 6.354a.5.5 0 0 1 0-.708zM7 6.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm-5 3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
</symbol>
</svg>
<a href="/" class="d-flex align-items-center mb-3 text-decoration-none">
<svg class="bi" width="32" height="32"><use xlink:href="#graph-up-arrow"/></svg>
<span class="fs-4">架构度量</span>
</a>
<button type="button" id="sidebarCollapse" class="btn btn-info">
<svg class="bi" width="16" height="16"><use id='sidebarCollapseicon' xlink:href="#text-indent-right"/></svg>
<span class="visually-hidden">导航</span>
</button>
<script type="text/javascript">
var element = document.getElementById("sidebarCollapseicon");
console.log(element);
curr = element.getAttributeNS('http://www.w3.org/1999/xlink', 'href');
console.log(curr);
if (curr == "#text-indent-right") {
element.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "#text-indent-left");
}else{
element.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "#text-indent-right");
}
</script>
</body>
</html>