如何在 C# Blazor WebAssembly 中使用引導圖標？

Question

我正在 Microsoft Visual Studio 2022 中創建 Blazor WebAssembly 網站，但在導航菜單上顯示引導圖標時遇到了一些問題。 我通過 npm 安裝了圖標，並將引導文件夾復制到項目查看器中的 wwwroot 中。

我的導航菜單項代碼如下所示：

<div class="nav-item px-3">
            <NavLink class="nav-link" href="Spotify">
                <span class="bi bi-spotify" aria-hidden="true"></span> Spotify
            </NavLink>
    </div>

span 類的默認值是span class="oi oi-plus"並且運行良好並且顯示了該圖標，但是當我使用上面的新 span 類代碼運行程序時，該圖標不會出現在 next到文本或任何地方。

Answer 1

您只需要從 bootstrap repo復制 bootstrap-icons.svg 。 將其放在wwwroot文件夾中的文件夾中。

例如創建emoji-smile-fill使用。

<svg class="bi" width="24" height="24" fill="currentColor" >
    <use href="{folder-to-resource}/bootstrap-icons.svg#emoji-smile-fill"></use>
</svg>