I've created a language extension (syntax highlighting, etc) and now want to associated a specific icon with the language (or files with the extensions specified in my extension).
I noticed an "icon" property is available in the package.json file, and tried to bind this property to my .svg file. But while syntax highlighting works just fine on a test file, I don't see my custom icon associated with this file.
Where do I add a reference to my .svg file? Do I have to somehow contribute my .svg file to the Seti File Icon Theme?
In vscode v1.64:
Language default icons
Language contributors can define an icon for the language.
"contributes": {
"languages": [
{
"id": "latex",
// ...
"icon": {
"light": "./icons/latex-light.png",
"dark": "./icons/latex-dark.png"
}
}
]
The icon is shown if the current file icon theme only has a generic file icon for the language.
File icon themes like Minimal or None that do not show file icons also
will not use the language icon. Also, if a file icon theme has an icon
for an extension or file name, these will be preferred.
File icon themes can customize the new behavior by defining
showLanguageModeIcons: true|false in the theme file.
showLanguageModeIcons: true shows the default language icons even if
the theme does not specify a file icon
showLanguageModeIcons: false prevents that default language icons are used.
https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_64.md#language-default-icons
File and folder icons are defined in icon sets, the default set being Seti. There is indeed currently no way to re-define those icons in an extension, short of creating your own icon theme. The Seti UI icons are generated from a dependency to the main repo and shipped as a built-in extension.
Therefore, your best bet to get your syntax icon included in VScode is submitting a pull request to the Seti UI repository. At some point, the new icons will be rolled into an icon font by the VScode developers and your icons should appear.
!!
UPDATED: see other comments to proper answer
There is newer version of vscode. So no need for this 'hack' anymore.
!!
Unfortunately you have to specify whole theme icon specification in current version of vscode.
There is PR on github that should allow extend default icons: Support extending icon themes
Before it will be merged and included into new version there is possibility to copy default seti configuration
https://github.com/microsoft/vscode/blob/master/extensions/theme-seti/icons/seti.woff
https://github.com/microsoft/vscode/blob/master/extensions/theme-seti/icons/vs-seti-icon-theme.json
and add your own icon into vs-seti-icon-theme.json config according doc File Icon Theme
Related
I have a VSCode extension that has worked for over a year. This extension displays a TreeView and I make use of the Material Icon Theme package. I simply want to display an icon for Folders and Files - nothing particularly fancy.
My code simply contains this :
this.iconPath = new vscode.ThemeIcon("folder");
This has worked fine for well over the past year. The only change is to regular VSCode installs of new releases as they become available.
However, now the icons that are now being displayed in the tree appear to be the codicon icons for each of folder and file and not the icons from Material Icon Theme.
VSCode itself is using the Material Icons theme - but my Treeview extension is no longer displaying the Material Icons for folders and files.
I added these 2 lines to show that the Material Icon theme is active.
const config = vscode.workspace.getConfiguration();
console.log(config.workbench.iconTheme); // Correctly displays => material-icon-theme
In the past simply specifying
this.iconPath = new vscode.ThemeIcon("folder");
was sufficient to get the the theme icon to be presented.
I have searched recent VSCode documentation to see if something has changed in this area but I find nothing.
Can anybody offer any suggestions as to what may have changed?
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?
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
How can I configure the Material Icon Theme to use default icons for some folders in VS Code?
E.g. I have a folder named trigger and that folder has an unusual icon. I would like to have a default icon for the trigger folder, just as it is for the sibling shoot folder.
I read through the features of the Material Icon Theme inside the VS Code documentation, but was not able to find a way to achieve what I want.
I mean this extension.
Also, I was able to disable all speicific icons styling by using the Material Icons: Change Folder Theme command. But I want to disable only for a specific folder, or at least for a specific folder name (trigger in my case).
Just declare in your settings.json file:
"material-icon-theme.folders.associations": {
"trigger": ""
},
In the settings of the extension there's a option to set the icons of the folders. By default it's set on "specific", you need to set it on "classic".
Screenshot
I use this plugin https://github.com/robertohuertasm/vscode-icons
It changes the icon of the files which is nice. I want to give an icon to a specific folder. Like a different icon to the folder which has all CSS files. I know icon of .css and CSS folder should not be the same so I want to have different icons for file and folder. The same I would like to have for javascript folder.
Not sure it's possible or not, though.
I just installed the vscode-extensions icon from the extension management panel in vscode and it already DOES have different icons for folders called CSS and .css files.
If you want to add your custom icons, there is currently no easy way to do this. Writing about per-rule theme overrides, #aeschli wrote that the team "currently has no plans to do this"
You can, however, fork whichever theme you like and add the custom mappings yourself and/or make a pull request against the original theme. The api describes in detail what to do, but in summary you would associate a folder name with an icon name and that icon name with an actual icon by modifying icons.json:
"iconDefinitions": {
"_my_folder": {
"iconPath": "./images/My_Folder_16x_.svg"
}
},
"folderNames": {
".vscode": "_my_folder",
},
currently in jstree, default icon is folder icon. How to set a new icon as default icon in jstree?
Add the types plugin to the jstree and in types set the default icon in the default property:
"plugins": ["types"]
"types": {
"default: {
"icon": //new default icon here
}
}
You can use the types plugin as the other answer suggests. What I usually do however, to just replace these two files for a quicker solution:
32px.png
40px.png
Of course, the caveat is that this will change ALL icons from the new theme, not just the folder icon. These files are usually located in your same folder as your jstree.min.css file. The new icon is found bundled along with css in your themes folder. jstree actually embeds one of these two pngs (depending on the responsive state) on the displayed tree view.