CODEWITHSUNDEEP
javascripttypescriptvisual-studio-codevscode-extensions
majid beg
majid beg

Reputation: 196

How to set the custom icons & logos in the status bar (setStatusBarMessage) of vscode extension?

I am developing a vs-code extension in which i want set the icons in the status bar but i am facing issue.

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() {}

Upvotes: 1

Views: 2781

Answers (2)

Quan Tran
Quan Tran

Reputation: 186

Yes, you can add an icon to Status Bar. First, you need to convert your icon svg to the font (you can use tool like iconmo) then add it in package.json. The API here: (https://code.visualstudio.com/api/references/contribution-points#contributes.icons)

Example:

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

Then in your status bar:

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

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

You can ref to some extensions like Graphql: https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql/package.json

Upvotes: 5

Gama11
Gama11

Reputation: 34138

You can find a list of available icons here (custom icons are not supported):

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

They are used via $(icon-name) syntax, for instance $(alert) which will produce .

Upvotes: 2

Related Questions