製品アイコンリファレンス

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

VS Code に付属する製品アイコンは、Codicon アイコンフォントに含まれており、デフォルトの製品アイコンテーマを形成します。拡張機能は、これらのアイコンを再定義し、VS Code に新しい外観を与えるために、新しい製品アイコンテーマを提供できます。

これを可能にするために、すべての製品アイコンはIDで識別されます。アイコン識別子は、ラベル ($(pencil))、API ではThemeIcon、アイコンが必要な寄与で使用されます。

アイコン識別子と実際のアイコンフォントグリフの関連付けは、製品アイコンテーマで行われます。

ラベルのアイコン

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

$(alert);

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

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

リテラルな ${...} テキストをラベル内に配置するには、$ をバックスラッシュでエスケープします。

\$(eye)

アニメーション

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

• 同期
• ロード中
• 歯車

$(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ライブラリのすべてのアイコンを置き換えることができます。