Produkt-Symbol-Schema

Visual Studio Code enthält eine Reihe von integrierten Symbolen, die in Ansichten und im Editor verwendet werden, aber auch in Tooltips, der Statusleiste und sogar von Erweiterungen referenziert werden können. Beispiele sind die Symbole in Filteraktionsschaltflächen und Ansichtssymbolen, in der Statusleiste, Haltepunkten und den Faltungssymbolen in Bäumen und im Editor.

Ein Product Icon Theme ermöglicht es einer Erweiterung, diese Symbole neu zu definieren, um VS Code ein benutzerdefiniertes Aussehen zu verleihen. Nicht von Product Icon Themes abgedeckt sind die Dateisymbole (abgedeckt durch File Icon Themes) und von Erweiterungen beigesteuerte Symbole.

VS Code verlangt, dass die Symbole als Glyphen in einer Icon-Schriftart definiert werden und (derzeit) beschränkt es Produkt-Icons auf eine einzige Farbe. Die für ein Symbol verwendete Farbe ist spezifisch für den Ort, an dem es angezeigt wird, und wird durch das aktive Farbschema definiert.

Hinzufügen eines neuen Product Icon Themes

Um Ihr eigenes Product Icon Theme zu definieren, erstellen Sie zunächst eine VS Code-Erweiterung und fügen Sie den productIconThemes-Beitragspunkt zum package.json der Erweiterung hinzu.

{
  "contributes": {
    "productIconThemes": [
      {
        "id": "aliensAreBack",
        "label": "Aliens Are Back",
        "path": "./producticons/aliens-product-icon-theme.json"
      }
    ]
  }
}

Die id ist die Kennung für das Product Icon Theme. Sie wird in den Einstellungen verwendet, machen Sie sie also eindeutig, aber auch lesbar. label wird im Dropdown-Menü des Product Icon Theme Pickers angezeigt. Der path verweist auf eine Datei in der Erweiterung, die die Symbolsammlung definiert. Wenn Ihr Dateiname dem Schema *product-icon-theme.json folgt, erhalten Sie Unterstützung bei der Vervollständigung und Tooltips beim Bearbeiten der Product Icon Theme-Datei in VS Code.

Product Icon Definition Datei

Die Product Icon Definition Datei ist eine JSON-Datei, die eine oder mehrere Icon-Schriftarten und eine Reihe von Icon-Definitionen definiert.

Schriftartdefinitionen

Der Abschnitt fonts ermöglicht es Ihnen, eine beliebige Anzahl von Glyphenschriftarten zu deklarieren, die Sie verwenden möchten, aber Sie müssen mindestens eine Schriftartdefinition definieren.

Diese Schriftarten können später in den Icon-Definitionen referenziert werden. Die zuerst deklarierte Schriftart wird als Standard verwendet, wenn eine Icon-Definition keine Schriftart-ID angibt.

Kopieren Sie die Schriftartdatei in Ihre Erweiterung und stellen Sie den Pfad entsprechend ein.

Es wird empfohlen, WOFF-Schriftarten zu verwenden.

• Setzen Sie 'woff' als Format.
• Die Werte für die weight-Eigenschaft sind hier definiert.
• Die Werte für die style-Eigenschaft sind hier definiert.

{
  "fonts": [
    {
      "id": "alien-font",
      "src": [
        {
          "path": "./alien.woff",
          "format": "woff"
        }
      ],
      "weight": "normal",
      "style": "normal"
    }
  ]
}

Icon-Definitionen

VS Code definiert eine Liste von Icon-IDs, über die die Symbole von den Ansichten referenziert werden. Der Abschnitt iconDefinitions des Product Icons weist diesen IDs neue Symbole zu.

Jede Definition verwendet fontId, um auf eine der im Abschnitt fonts definierten Schriftarten zu verweisen. Wenn fontId weggelassen wird, wird die erste in den Schriftartdefinitionen aufgeführte Schriftart verwendet.

{
  "iconDefinitions": {
    "dialog-close": {
      "fontCharacter": "\\43",
      "fontId": "alien-font"
    }
  }
}

Eine Liste aller Icon-Identifikatoren finden Sie in der Icon-Referenz.

Entwickeln und testen

VS Code verfügt über integrierte Bearbeitungsunterstützung für die Datei package.json sowie für Product Icon Theme-Dateien. Um diese zu erhalten, muss Ihr Theme-Dateiname mit product-icon-theme.json enden. Dies ermöglicht die Code-Vervollständigung für alle Eigenschaften, einschließlich der bekannten Icon-IDs, sowie für Tooltips und Validierung.

Um ein Product Icon Theme auszuprobieren, öffnen Sie den Erweiterungsordner in VS Code und drücken Sie F5. Dies startet die Erweiterung in einem Extension Development Host-Fenster. Das Fenster hat Ihre Erweiterung aktiviert und die Erweiterung wechselt automatisch zum ersten Product Icon Theme.

Außerdem wird die Theme-Datei auf Änderungen überwacht, und Aktualisierungen der Symbole werden automatisch angewendet, sobald die Theme-Datei geändert wird. Während Sie an der Product Icon Definition Datei arbeiten, sehen Sie die Änderungen live nach dem Speichern.

Um zwischen Product Icon Themes zu wechseln, verwenden Sie den Befehl Preferences: Product Icon Theme.

Um herauszufinden, welches Symbol an einer bestimmten Stelle in der VS Code-Benutzeroberfläche verwendet wird, öffnen Sie die Entwicklertools, indem Sie Help > Toggle Developer Tools ausführen und dann

• Klicken Sie auf das Inspektionstool der Entwicklertools oben links.
• Bewegen Sie die Maus über das zu inspizierende Symbol.
• Wenn der Klassenname des Symbols codicon.codicon-remote ist, dann ist die Icon-ID remote.

Beispiel

Das Product Color Theme Sample kann als Spielwiese verwendet werden.