プロダクトアイコンリファレンス

Visual Studio Code には、ビューやエディターで使用される組み込みアイコンのセットが含まれており、これらはホバー、ステータスバー、および拡張機能からも利用可能です。これらのアイコンはプロダクトアイコンと呼ばれ、UI 全体でファイル名の横に表示されるファイルアイコンとは区別されます。

VS Code に同梱されているプロダクトアイコンは Codicon アイコンフォント に含まれており、デフォルトのプロダクトアイコンテーマを構成しています。拡張機能は、新しい プロダクトアイコンテーマ を提供してこれらのアイコンを再定義し、VS Code に新しい外観を与えることができます。

これを可能にするため、すべてのプロダクトアイコンは ID によって識別されます。アイコン識別子は、UI コンポーネントのラベル内（$(pencil)）、API では ThemeIcon として、またアイコンが必要なコントリビューションで使用されます。

アイコン識別子から実際のアイコンフォントグリフへの関連付けは、プロダクトアイコンテーマ内で行われます。

ラベル内のアイコン

アイコンは、ホバーの Markdown ラベル、StatusBarItem のテキスト、および QuickPickItem ラベル API で使用できます。Markdown でアイコンを追加するための構文は $(iconIdentifier) です。

$(alert);

テキストを埋め込んだり、複数のアイコンを使用したりすることも可能です。

$(eye) $(heart) $(mark-github) GitHub

ラベル内にリテラルとして ${...} というテキストを配置するには、$ をバックスラッシュでエスケープしてください。

\$(eye)

アニメーション

以下のアイコンには、アイコン名の末尾に ~spin を追加することで回転アニメーションを適用できます。

• sync
• loading
• gear

$(sync~spin)

アイコン・コントリビューション・ポイント

アイコン・コントリビューション・ポイントを使用すると、拡張機能はデフォルトアイコンと共に ID による追加のアイコンを定義できます。このアイコン ID は、拡張機能（またはその拡張機能に依存する他の拡張機能）によって、ラベル（$(iconId)）の中や、ThemeIcon が使用可能なすべての場所（new ThemeIcon("iconId")）で使用できます。

"contributes": {
  "icons": {
        "distro-ubuntu": {
            "description": "Ubuntu icon",
            "default": {
                "fontPath": "./distroicons.woff",
                "fontCharacter": "\\E001"
            }
        },
        "distro-fedora": {
            "description": "Ubuntu icon",
            "default": {
                "fontPath": "./distroicons.woff",
                "fontCharacter": "\\E002"
            }
        }
    }
}

製品アイコンテーマは、アイコンIDを知っていればアイコンを再定義できます。

アイコン一覧

以下は、識別子ごとの組み込みプロダクトアイコンの一覧です。

アイコンの ID は、そのアイコンが使用される場所を特定します。デフォルトの codicon ID は、codicon ライブラリからどのアイコンがデフォルトで使用されるかを示し、プレビューはそのアイコンの外観を表示します。

プロダクトアイコンテーマ は、各アイコンを個別に置き換えることや、codicon ライブラリ内のすべてのアイコンを置き換えることができます。