Vscode-icons: Setting up custom file extension

Created on 28 Sep 2019 · 49Comments · Source: vscode-icons/vscode-icons

On this page, under; _The basic steps for customization are_. It tells one to copy the whole entry of a supported file extension or folder into your workspace or settings file.

Although when doing this, there is errors in either the workspace or settings file; but using this setting works; vsicons.assocations.file although when using this setting how do I supply the path to the SVG files ? Therefore why the instructions for copying an entire supported file or folder extension ?

question / debate

Source

SheepDomination

All 49 comments

https://github.com/vscode-icons/vscode-icons/wiki/Custom

JimiC on 28 Sep 2019

I assume this works;

"vsicons.associations.files": [
            {
                "icon":"myFile",
                "extensions":["py"],
                "format":"svg"
            },

What is "languages" ? which is seen in some of the file extensions ?

SheepDomination on 29 Sep 2019

languages refers to the language id that is used to link the icon with the file extension. It's a feature that vscode has.

JimiC on 29 Sep 2019

Then I don't have to use extensions I could use languages, correct ?

SheepDomination on 29 Sep 2019

👍1

And how about filename globs? If I have aService.ts, b.Service and cService.ts, this configuration does not work:

"vsicons.associations.files": [
  {
    "icon": "ng_service_ts",
    "extensions": [],
    "filename": true, // also tried without this
    "filenamesGlob": ["*Service"],
    "extensionsGlob": ["ts"],
    "format": "svg"
  }
]

zygimantas on 29 Sep 2019

globs are not supported by vscode.

JimiC on 29 Sep 2019

😕1

Thanks @JimiC
In that case documentation should be improved, because filenamesGlob is confusing.

zygimantas on 29 Sep 2019

👍1

In general filenamesGlob and extensionsGlob should be avoided when using the customization feature.

JimiC on 29 Sep 2019

@JimiC Can the path to custom icons be changed from the default ?
Rather then embedding the extensions list into the workspace setting file, is it possible to have an external file and direct that supported file extension file in the vsicons.assocations.files ?

SheepDomination on 30 Sep 2019

https://github.com/vscode-icons/vscode-icons/issues/2252#issuecomment-536205153 (vsicons.customIconFolderPath)

JimiC on 30 Sep 2019

Rather then pollute my settings file with a list of the icon name and extensions and formats. Can I create a file with all this inside of the file and link to it by means of the vsicons.assocations.file setting ?

SheepDomination on 2 Oct 2019

No.

JimiC on 2 Oct 2019

I have my custom path in vsicons.customIconFolderPath and my custom folder vsicons.associations.folders within my vsicons_assocations.folders I have the array setting which includes:

icon
language id
format

And finally I have the SVG icon in the custom path, although after restarting VSCode my custom folder icon does not appear for my workspace in explorer ?

SheepDomination on 6 Oct 2019

You obviously missing something but without physically seeing what's off I can't help any further. Maybe some SS could give us an insight.

JimiC on 28 Nov 2019

In this screen shot you'll see I have the folder setting as well as custom folder setting but the icon is not being displayed for vfl files ?

SheepDomination on 8 Feb 2020

@SheepDomination Any update?

Seeing the SS you do realize that folder associating is for folders and files for files. If you are trying to associate file extensions but declaring them in vsicons.association.folders then you are doing it wrong.

JimiC on 24 Feb 2020

Note that from https://github.com/vscode-icons/vscode-icons/wiki/Custom

Once you have created the folder you can put all your custom icons there. But, again, they have to follow vscode-icons naming conventions:

...
Folders: folder_type_.svg & folder_type__opened.svg
...

were value_of_icon_property is vex_icon as you named it.

JimiC on 24 Feb 2020

@JimiC I assume vsicons.assocations.folders is for a folder of custom icons, meanwhile vsicons.assocations.files is used for a specific icon.

I replaced vsicons.assocations.folders with vsicons.assocations.files and the vfl files now show a simple black square so to speak. I think the problem may be with the svg icon; all the svg icons in the .vscode\extensions\vscode-icons-team.vscode-icons-10.0.0\icons folder fit to size when previewing in for example, internet explorer or edge. Although the svg icon for the vfl file doesn't fit to size, in other words; when previewing, the svg icon is small in the top left hand corner, the rest is just white space ?

If I want a folder for some custom icons, then I must use vsicons.assocations.folders; even if that is only three custom icons, rather then vsicons.assocation.files which would use up more space in either the workspace or settings files when using vsicons.assocation.files ?

SheepDomination on 24 Feb 2020

folders is for customizing folder icons not the files in it.

JimiC on 24 Feb 2020

👍1

I have a custom file path and I created a 28x28 SVG icon but it continues not show ?

SheepDomination on 25 Feb 2020

It's still not clear to me what you are trying to accomplish.
You want to set a file icon or a folder icon?

JimiC on 25 Feb 2020

A file icon.

SheepDomination on 25 Feb 2020

Your setting should be:

"vsicons.customIconFolderPath": "C:\\Custom Program Settings\\vscode_settings\\vsicons-custom-icons"
"vsicons.associations.files": [
  {
    "icon": "vex_icon",
    "extensions": ["vfs"],
    "format": "svg"
  }
]

and in vsicons-custom-icons folder there should be a file_type_vex_icon.svg icon file.
Note that in order for this to work your vscode needs to be in "C:" drive.

JimiC on 25 Feb 2020

For the file icon name is; file_type_<NameofIcon> the rest of the settings are correct within my workspace setting. I'm wondering for the vfl extension if it's the icon size that is causing the problem why for this file type the icon remains empty; although I did everything correct, rather what I read from issue on the github repo with regards to icon size.

All the icons which come with the extension fit the canvas size when previewing them, that is not the case with my custom icon ?

SheepDomination on 25 Feb 2020

SVG icons are vectors. This means they scale accordingly. That's not your issue. Sometimes you need to use F1 > Icons > Apply Icons Customization for the changes to apply.

JimiC on 25 Feb 2020

@JimiC F1 > Icons > Apply Icons Customization is not working either ?

SheepDomination on 25 Feb 2020

Open the Developer Tools and post any error displayed from vscode-icons°

JimiC on 25 Feb 2020

[Extension Host] [vscode-icons] Icons manifest file successfully generated!
file_type_vexicon.svg:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

File not found, yet the path is correct ?

SheepDomination on 25 Feb 2020

There you have it. Correct the path. vscode needs to be on same drive aka C:.

JimiC on 26 Feb 2020

That is where I think there is a problem. The custom path is on the correct drive which is C:. Why is this error occurring ?