VS Code (microsoft/vscode) implements a "File Icon Theme" API which allows extensions to contribute file icon themes to the VS Code UI (see https://code.visualstudio.com/api/extension-guides/file-icon-theme). This package allows to use that implementation as a standalone "file icon theme engine" for other projects. It is a fork of microsoft/vscode, reduced to all code parts related to the theme engine. The compiled output is ES6 compliant with source maps, declarations, and declaration maps included.
Minor changes to the code were necessary in order to allow standalone usage (e.g., there was a dependency on the
product.json file of microsoft/vscode, this code parts were removed).
See this link for all changes made to the VS Code source code.
Credits go to microsoft/vscode for their awesome work!
yarn add @pkerschbaum/code-oss-file-icon-theme @pkerschbaum/code-oss-file-service
Read file icon theme from disk and create CSS rules and classnames
- Download a VS Code file icon theme (e.g. https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) and put it somewhere in your project.
URIobject pointing to the directory of the file icon theme. This will return the CSS rules for the icon theme.
- Put the CSS rule into the
<head>of your application, and put the class
show-file-iconsin some common ancestor of the HTML elements which should receive the file icons (e.g., on a root
<div>element). The CSS selectors of the theme engine expect that class to be present (this class can be removed/added to "toggle" the presence of file icons).
The icon theme is now "active".
getIconClassesto retrieve classnames which you have to put on the HTML element which should receive the icon.
(optional) Register languages to get more accurate file icons
For any given file/folder, the "File Icon Theme" API will try to detect a language for that file/folder and if a language gets detected, the appropriate language file icon will be used. Out of the box, no language is registered (besides "plaintext" for .txt files, see microsoft/vscode/src/vs/editor/common/modes/modesRegistry.ts#L61-L70]).
code-oss-file-icon-theme includes language configurations shipped with VS Code in ./static/language-extensions. You can call
registerLanguagesOfExtensions with a
URI object pointing to that directory to load these configurations.
- Initialization logic: pkerschbaum/file-explorer/src/platform/electron-preload/file-icon-theme.ts#L17-L42
- Putting the CSS rules into