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

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