はじめに
サイドバーに表示されるアイコンの種類を増やす方法についてネット上を調べてもやり方が出てこなかったので調べてみました。
問題
Blazorのデフォルトプロジェクトを起動すると表示されるサイドバーのアイコンが初期状態だと3つしか用意されていないため同じ形式で追加をしたい。
解決策
NavMenu.razor.css
にデフォルトで記載されている内容をもとに以下のように修正する。
修正前
.bi-list-nested-nav-menu {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}
修正後
.bi-list-task-nested-nav-menu {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-check' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}
具体的に修正する点はいかになります
-
class
にBoostrapのホームページ記載のクラスを記載 -
d
にBoostrapのホームベース記載のd
の値を記載 - CSSの名前を適当なものに変更
基本的なイメージとしてはBoostrapのホームページの「HTMLをコピー」欄の情報をコピーするイメージで大丈夫です。
これでサイドバーの既存アイコンと同じ形式のアイコンを追加することができます。
おわり
Blazorのサイドバーで使用できるアイコンの種類を増やす方法を解説いたしました。
試してみたところ意外と簡単にできました。
ぜひ皆さんもやってみてください。
参考