0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Blazor】サイドバーに表示するアイコンの種類を増やす方法

Posted at

はじめに

サイドバーに表示されるアイコンの種類を増やす方法についてネット上を調べてもやり方が出てこなかったので調べてみました。

問題

image.png

Blazorのデフォルトプロジェクトを起動すると表示されるサイドバーのアイコンが初期状態だと3つしか用意されていないため同じ形式で追加をしたい。

【追加後】
image.png

解決策

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をコピー」欄の情報をコピーするイメージで大丈夫です。
image.png

これでサイドバーの既存アイコンと同じ形式のアイコンを追加することができます。

下記のようにPathタグが複数あるようなアイコンについて上記の手順だとうまくいかないです。一工夫でうまくいく気がしますが、Boostrapには似たようなアイコンもたくさんあり代用も簡単であるため本記事では対象外とします。
image.png

おわり

Blazorのサイドバーで使用できるアイコンの種類を増やす方法を解説いたしました。
試してみたところ意外と簡単にできました。

ぜひ皆さんもやってみてください。

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?