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
Related
I have searched but can't find anything or don't know how to find this. Is there an existing flutter package that has icons for common file types? If I'm displaying a file list, I'd like to show associated icons for those files such as .txt, .exe, .jpg, and just about anything else you'd find on a desktop computer, if possible.
It may not be possible to get the actual associated icon. For instance, a .jpg could be associated with multiple apps but I'd be fine with just a generic .jpg file icon for this or any other file type. I just don't want to show the same material icon for every file.
Try this,
https://pub.dev/packages/file_icon
Please note that the package is not maintained.
for example .xlp is my file type and name is code.xlp I want to highlight some code.
or some colors ?
Somethings like this
Inno Setup For VS code
In case you don't want to write custom extension, try manual configuration of 'file association' for '.xlp' files.
This will tell VS Code to highlight content of '.xlp' files as language of your choice.
For example, I set it to C# and it looks like this:
Steps for this configuration:
Inside of '.xlp' file press ctrl + P to open navigation field,
Search for >Change Language Mode,
Choose Configure File Association for '.xlp',
From dropdown list choose language you like.
As mentioned inside a comment you must write an extension for VS-Code to have your custom syntax highlighting for those files.
There is a good documentation available at:
https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide
At the mentioned web page you will find also more information about how to write your own extension and how to deploy it etc.
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'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
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",
},