Obsidianのサイドバーのファイル名の横にアイコン表示したい

この記事でできること

サイドバーのファイル名・フォルダ名の横にそれぞれのアイコンを表示できます。かわいいね。
指定するurlなどを変えればお好きなアイコンに変えられます。

背景

以下の記事を大いにパクリ参考にしています。
参考：27 Awesome CSS Snippets For Customizing Obsidian

ただ本記事の方法ではアイコンをフォルダ展開・格納に応じて変わるようにしています。
またアイコンのデザインにこだわれるように、urlで指定できるようにしました。

やりかた

まずVaultName/.obsidian/snippets内に適当な名前のcssファイルを作成してください（folder-file-icons.cssとか。snippetsフォルダがないなら作ってください）。できたらそのcssファイルをメモアプリなどで開いて、以下のcssをコピペ・saveして閉じてください。
HEX値からfilter値を導出したい場合は以下のサービスを利用してください：CSS Color Filter Generator

folder-file-icons.css

:root {
    /* アイコン関連の定数 */
    --icon-spacing: " ";
    --icon-file-url: url(https://icongr.am/fontawesome/file.svg?size=12);
    --icon-folder-url: url(https://icongr.am/fontawesome/folder.svg?size=12);
    --icon-folder-open-url: url(https://icongr.am/fontawesome/folder-open.svg?size=12);
}

/* ダークテーマのアイコンフィルター（#c0caf5） */
.theme-dark {
    --icon-filter: brightness(0) saturate(100%) invert(81%) sepia(2%) saturate(6294%) hue-rotate(196deg) brightness(102%) contrast(92%);
}

/* ライトテーマのアイコンフィルター（#343c59） */
.theme-light {
    --icon-filter: brightness(0) saturate(100%) invert(20%) sepia(42%) saturate(503%) hue-rotate(190deg) brightness(97%) contrast(91%);
}

/* 共通のアイコンスタイル */
.theme-dark,
.theme-light {
    /* ファイルアイコンのスタイル */
    .nav-file .nav-file-title-content::before,
    .nav-folder-children .nav-file-title-content:first-child::before {
        content: var(--icon-file-url) var(--icon-spacing);
        filter: var(--icon-filter);
    }

    /* 折りたたまれたフォルダアイコンのスタイル */
    .nav-folder.is-collapsed .nav-folder-title-content::before,
    .nav-folder-children.is-collapsed .nav-folder-title-content::before {
        content: var(--icon-folder-url) var(--icon-spacing);
        filter: var(--icon-filter);
    }

    /* 開いたフォルダアイコンのスタイル */
    .nav-folder .nav-folder-title-content::before,
    .nav-folder-children .nav-folder-title-content::before {
        content: var(--icon-folder-open-url) var(--icon-spacing);
        filter: var(--icon-filter);
    }
}

次にObsidianを開き、設定（ctrl + ,）→外観の一番下CSSスニペットに先ほど作ったcssファイルが表示されていれば、それをONにしてください。ないならフォルダアイコンを押して参照してください。

上手く反映されていれば、ファイル名・フォルダ名の横にアイコンが表示されているはずです。

まとめ

素敵なObsidianライフを🖖。