javascript - Cum să setezi pictogramele și logourile personalizate în bara de stare (setStatusBarMessage) a unei extensii vscode?

Dezvolt o extensie VS Code în care vreau să setezi pictogramele în bara de stare, dar mă confrunt cu o problemă.

import * as vscode from 'vscode';
...
export function activate(context: vscode.ExtensionContext) {
    ...

    let disposable = vscode.commands.registerCommand('extension.helloWorld', () => { 
            ....
            //on the place of icon i want the icon to get display in the status bar
                  vscode.window.setStatusBarMessage(
                    "icon "+" icon "+  
                    data1 +
                    " icon " +
                    data2 +
                    " icon" +
                    data3
                  );
                  ...
                  ...
});
...
}

export function deactivate() {}

Răspuns #1

Da, poți adăuga o pictogramă în Bara de stare. Mai întâi, trebuie să convertești pictograma ta svg în font (poți folosi un instrument precum iconmo), apoi să o adaugi în package.json. API-ul este aici: (https://code.visualstudio.com/api/references/contribution-points#contributes.icons)

Exemplu :

"contributes": {
    "icons": {
      "skedulo-logo": {
        "description": "Skedulo icon",
        "default": {
          "fontPath": "media/skedulo.woff",
          "fontCharacter": "\\e900"
        }
      }
    }
  }
}

Apoi în bara ta de stare:

this.statusBar = vscode.window.createStatusBarItem(
      vscode.StatusBarAlignment.Left,
      100
    );

this.statusBar.text = `$(skedulo-logo)`;

Poți face referire la unele extensii precum Graphql: https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql/package.json

Răspunsul #2

Poți găsi o listă cu pictogramele disponibile aici (pictogramele personalizate nu sunt acceptate):

https://code.visualstudio.com/api/references/icons-in-labels

Ele sunt utilizate prin sintaxa $ (icon-name), de exemplu $ (alert) care va produce

.