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

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

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

これを可能にするため、すべての製品アイコンはIDで識別されます。アイコン識別子は、ラベル ($(pencil)) のUIコンポーネント、ThemeIconとしてのAPI、およびアイコンが必要な場合の貢献で使用されます。

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

ラベル内のアイコン

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