javascript - Hur man ställer in anpassade ikoner och logotyper i statusfältet (setStatusBarMessage) för en vscode-tillägg?

Jag utvecklar ett VS Code-tillägg där jag vill sätta ikonerna i statusfältet men jag stöter på 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() {}

Svar #1

Ja, du kan lägga till en ikon i statusfältet. Först behöver du konvertera din ikon svg till teckensnitt (du kan använda ett verktyg som iconmo) och sedan lägga till den i package.json. API:et finns här: (https://code.visualstudio.com/api/references/contribution-points#contributes.icons)

Exempel :

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

Då i din statusfält:

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

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

Du kan hänvisa till några tillägg som Graphql: https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql/package.json

Svar #2

Du kan hitta en lista över tillgängliga ikoner här (anpassade ikoner stöds inte):

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

De används via $ (icon-name)-syntax, till exempel $ (alert) som kommer att producera

.