CODEWITHSUNDEEP
visual-studio-codevscode-extensions
Mostik
Mostik

Reputation: 101

vscode api: how to get icons from File Icon Theme

I am writing an extension for VSCode. In WebviewPanel I need to display the file extension icon which is from the File Icon Theme. Is there a function to get icons from file icon theme?

Upvotes: 10

Views: 1824

Answers (1)

Bing Ren
Bing Ren

Reputation: 1775

I'm also researching this. I don't have an answer yet, but have some clues so far. Hope this helps:

https://code.visualstudio.com/api/references/vscode-api#ThemeIcon

A reference to a named icon. Currently, File, Folder, and ThemeIcon

ids are supported.

So if you have a file/folder id you can create an instance of ThemeIcon with its constructor

CONSTRUCTORS

new ThemeIcon(id: string, color?: ThemeColor): ThemeIcon

How to get file and folder ids? Looks like it's through file associations defined in file icon themes. See vscode API for file icon theme / file association

So how to get that associations?

I can get the name of the current icon theme from codes below

const config = vscode.workspace.getConfiguration();
console.log(config.workbench.iconTheme); // output "vs-seti"

The seti theme is an internal extension, I can get it by

const ext = vscode.extensions.getExtension("vscode.vscode-theme-seti")
console.log(ext.packageJSON.contributes.iconThemes[0].id) // 'vs-seti'

And I can further get the theme JSON by

const themePath = path.join(ext.extensionPath, ext.packageJSON.contributes.iconThemes[0].path);

Then I can read that JSON file, use it to associate file/directory name to file/directory id, then to get the icon......

Today's report:

The built-in seti file icon extension's JSON is at here

In "fileExtensions" there is no mapping of language file extensions (like .ts). For programming language source codes, needs to first find languageId, then map to icons in "languageIds" section

Tried to find the file extension to language ID mappings in "files.associations" configurations but failed.

Then find out I can loop through all extensions (vscode.extensions.all) and check their package.json to find language contributes. Associated file extensions are defined in language contributes. So now I can map from file extension to language ids.

Then I tried const icon = new vscode.ThemeIcon(langIconId); but the icon is not as expected. Instead of the typescript icon I was expecting it's the error icon... ThemeIcon mentioned all icons can be found here so I guess it's not a ThemeIcon after all...

So the seti theme's JSON document contains a "iconDefinitions" section and it has the fontCharacter and fontColor of the icon. Now I can associate a file extension all the way to icon fontCharacter and fontColor.

However this is the end of it. I cannot set the tree-view to use it.

At the end I think I need to set the TreeItem's resourceUri to let vscode automatically determine the icon. See https://code.visualstudio.com/api/references/vscode-api#TreeItem.resourceUri

Upvotes: 13

Related Questions