Produkt-Symbol-Referenz

Visual Studio Code enthält eine Reihe von integrierten Symbolen, die in Ansichten und im Editor verwendet werden, aber auch in Hovern, der Statusleiste und von Erweiterungen verwendet werden können. Diese Symbole sind Produkt-Symbole im Gegensatz zu Datei-Symbolen, die neben Dateinamen in der Benutzeroberfläche verwendet werden.

Die mit VS Code ausgelieferten Produkt-Symbole sind in der Codicon-Schriftart enthalten und bilden das Standard-Produkt-Icon-Theme. Erweiterungen können neue Produkt-Icon-Themes bereitstellen, um diese Symbole neu zu definieren und VS Code ein neues Aussehen zu verleihen.

Damit dies möglich ist, werden alle Produkt-Symbole durch eine ID identifiziert. Die Icon-ID ist das, was in UI-Komponenten in Labels ($(pencil)), in der API als ThemeIcon und in Beiträgen verwendet wird, wenn Icons benötigt werden.

Die Zuordnung einer Icon-ID zu einem tatsächlichen Icon-Schriftbild erfolgt im Produkt-Icon-Theme.

Icons in Labels

Icons können in Markdown-Labels in Hovern, im Text von StatusBarItem und im Label-API von QuickPickItem verwendet werden. Die Syntax zum Hinzufügen eines Icons in Markdown ist $(iconIdentifier)

$(alert);

Sie können auch Text einbetten und mehrere Icons verwenden

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

Um einen literalen ${...}-Text in einem Label zu platzieren, maskieren Sie das $ mit einem Backslash

\$(eye)

Animation

Sie können eine Dreh-Animation auf die folgenden Icons anwenden, indem Sie ~spin an den Icon-Namen anhängen

• sync
• loading
• gear

$(sync~spin)

Icon-Beitragspunkt

Der Icon-Beitragspunkt ermöglicht es Erweiterungen, zusätzliche Icons per ID zu definieren, zusammen mit einem Standard-Icon. Die Icon-ID kann dann von der Erweiterung (oder von jeder anderen Erweiterung, die von der Erweiterung abhängt) in Labels ($(iconId)) oder an allen Stellen verwendet werden, an denen ein ThemeIcon verwendet werden kann (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"
            }
        }
    }
}

Produkt-Icon-Themes können das Icon neu definieren (wenn sie die Icon-ID kennen).

Icon-Liste

Unten finden Sie eine Liste der integrierten Produkt-Icons nach Kennung.

Die ID des Icons identifiziert die Stelle, an der das Icon verwendet wird. Die Standard-Codicon-ID beschreibt, welches Icon aus der Codicon-Bibliothek standardmäßig verwendet wird, und die Vorschau zeigt, wie dieses Icon aussieht.

Produkt-Icon-Themes können jedes Icon einzeln sowie alle Icons aus der Codicon-Bibliothek ersetzen.