はじめに
サイドバーに表示されるアイコンの種類を増やす方法についてネット上を調べてもやり方が出てこなかったので調べてみました。
問題
Blazorのデフォルトプロジェクトを起動すると表示されるサイドバーのアイコンが初期状態だと３つしか用意されていないため同じ形式で追加をしたい。
【追加後】
解決策
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をコピー」欄の情報をコピーするイメージで大丈夫です。
これでサイドバーの既存アイコンと同じ形式のアイコンを追加することができます。
下記のようにPathタグが複数あるようなアイコンについて上記の手順だとうまくいかないです。一工夫でうまくいく気がしますが、Boostrapには似たようなアイコンもたくさんあり代用も簡単であるため本記事では対象外とします。
おわり
Blazorのサイドバーで使用できるアイコンの種類を増やす方法を解説いたしました。
試してみたところ意外と簡単にできました。
ぜひ皆さんもやってみてください。
参考