Starship で使う Nerd Fonts のアイコンフォントを調べる方法
はじめに
この記事では、Starship などの Powerline 系プロンプトをカスタマイズするときに使う Nerd Fonts のアイコンフォントを調べる方法について解説します。
例として、Starship を使ってプロンプト表示をカスタマイズしたものが次の図になります。いろいろなアイコンフォントがあったので試しに表示してみたものです。
Nerd Fonts を使ったプロンプト
なお、色付きの絵文字は Nerd Fonts 以外のフォントでも対応しているものです。色がついていないものは Nerd Fonts がインストールされた環境でないと正しく表示されません。
ちなみに、この画像では、次の「白源」フォントを使っています。
ここで、Nerd Fonts に含まれるアイコンフォントについて、自分が使いたいものがあるか調べたいときがあります。そのときに、どうすれば良いか解説します。
プリセット
プロンプトをカスタマイズする際は、ベースとする表示をどうするか決めます。
Powerline 系プロンプトでは、あらかじめ利用できるテーマやプリセットが用意されています。Starship の場合は、プリセットが用意されていて、次の URL に説明があります。
筆者は Nerd Fonts をインストールしていない環境では「No Nerd Fonts プリセット」を使っています。Nerd Fonts をインストールしてある環境では「Tokyo Night プリセット」をカスタマイズして使っています。
Starship の場合、Linux 環境では ${HOME}/.config/starship.toml
に設定ファイルを置きます。
Nerd Fonts のアイコン
Nerd Fonts のアイコンには、Nerd Fonts のサイトに説明があるように、いくつかのフォントを集約したものが含まれています。いくつか例を上げると、次のようになります。
完全なリストは https://www.nerdfonts.com/ の「All the icons!」にあります。
キーワードからアイコンを調べる場合は、このサイトの「CHEAT SHEET」をクリックして表示される画面を使います。
キーワード検索した結果から、アイコンのコピーができます。表示されているアイコンにマウスを合わせると「Copy」のメニューが出るので、そこから「Icon」をクリックします。
それから、starship.toml
へ貼り付けます。このとき、エディタのフォントも Nerd Fonts を使うようになっていないと文字化けします。筆者は、コンソールのフォントを Nerd Fonts にしてあり、vi
や nano
など、コンソールで使えるエディタで編集しています。
なお、キーワード検索をしてみるとわかりますが、同じようなアイコンでも別のプレフィックスがついた形で提供されているようです。これについては、きちんと確認したわけではありませんが、もともとのアイコンフォントを提供しているものに応じてプレフィックスをつけているのかもしれません。
そのため、キーワード検索時に、それらを指定すると、ある程度の絞り込みができます。
nf-dev-
nf-fa-
nf-linux-
nf-md-
nf-seti-
集約されているアイコンフォントのサイトで確認できるものもあります。たとえば、「Font Logos (Formerly Font Linux)」は次の URL にサイトがあります。
このサイトに、Font Logos が提供するアイコンフォントと対応する文字コードの一覧があります。
こういった情報から、使いたいアイコンフォントを調べることができます。
参考ファイル
参考までに、最初の図のプロンプトで使っている starship.toml
を紹介しておきます。
カスタマイズした部分を抜粋したものは次のようになります。なお、Web ブラウザで Nerd Fonts を使って表示する環境だと、「🐧 🧙 🐉」の後ろが「Nerd Fonts を使ったプロンプト」内の表示と同じになるはずです。そうでない環境だと、「🐧 🧙 🐉」の後ろは正しく表示されません。
format = """
[░▒▓](#a3aed2)\
[ 🐧 🧙 🐉 ](bg:#a3aed2 fg:#090c0c)\
[](bg:#769ff0 fg:#a3aed2)\
$username\
[@host001:](fg:#e3e5e5 bg:#769ff0)\
$directory\
[](fg:#769ff0 bg:#394260)\
# 略
[username]
show_always = true
style_user = "fg:#e3e5e5 bg:#769ff0"
style_root = "bg:#9A348E"
format = '[ $user]($style)'
disabled = false
[directory]
style = "fg:#e3e5e5 bg:#769ff0"
format = "[$path ]($style)"
truncation_length = 10
truncation_symbol = "…/"
truncate_to_repo = false
# 略
ホスト名は $hostname
で参照できるようなのですが、表示されるフォーマットのカスタマイズが面倒そうだったので、固定値で @host001:
としてあります。
また、ユーザー情報の表示、ディレクトリーパスの表示についてカスタマイズをしてあります。基本的にパスは全部表示されていた方が作業時にミスしにくかったり、コピーして使いやすかったりするので、そうしてあります。
実際の starship.toml
全体は、次のようになります。
$ ssh mars cat .config/starship.toml
format = """
[░▒▓](#a3aed2)\
[ 🐧 🧙 🐉 ](bg:#a3aed2 fg:#090c0c)\
[](bg:#769ff0 fg:#a3aed2)\
$username\
[@host001:](fg:#e3e5e5 bg:#769ff0)\
$directory\
[](fg:#769ff0 bg:#394260)\
$git_branch\
$git_status\
[](fg:#394260 bg:#212736)\
$nodejs\
$rust\
$golang\
$php\
[](fg:#212736 bg:#1d2230)\
$time\
[ ](fg:#1d2230)\
\n$character"""
[username]
show_always = true
style_user = "fg:#e3e5e5 bg:#769ff0"
style_root = "bg:#9A348E"
format = '[ $user]($style)'
disabled = false
[directory]
style = "fg:#e3e5e5 bg:#769ff0"
format = "[$path ]($style)"
truncation_length = 10
truncation_symbol = "…/"
truncate_to_repo = false
[directory.substitutions]
"Documents" = " "
"Downloads" = " "
"Music" = " "
"Pictures" = " "
[git_branch]
symbol = ""
style = "bg:#394260"
format = '[[ $symbol $branch ](fg:#769ff0 bg:#394260)]($style)'
[git_status]
style = "bg:#394260"
format = '[[($all_status$ahead_behind )](fg:#769ff0 bg:#394260)]($style)'
[nodejs]
symbol = ""
style = "bg:#212736"
format = '[[ $symbol ($version) ](fg:#769ff0 bg:#212736)]($style)'
[rust]
symbol = ""
style = "bg:#212736"
format = '[[ $symbol ($version) ](fg:#769ff0 bg:#212736)]($style)'
[golang]
symbol = ""
style = "bg:#212736"
format = '[[ $symbol ($version) ](fg:#769ff0 bg:#212736)]($style)'
[php]
symbol = ""
style = "bg:#212736"
format = '[[ $symbol ($version) ](fg:#769ff0 bg:#212736)]($style)'
[time]
disabled = false
time_format = "%R" # Hour:Minute Format
style = "bg:#1d2230"
format = '[[ $time ](fg:#a0a9cb bg:#1d2230)]($style)'
Discussion