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

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

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

これを可能にするために、すべてのプロダクトアイコンは ID で識別されます。アイコン識別子は、ラベル ($(pencil)) の UI コンポーネント、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 ライブラリのすべてのアイコンだけでなく、各アイコンを個別に置き換えることができます。