Clarify how to override icons for file associations

• I’m sure this issue is not a duplicate.
• I want to create an icon request

Either the documentation doesn’t make it very clear how to do this, there’s something wrong with how I’m trying to do this or this is a limitation that should be documented:

I use React in lots of projects, so I’ve added "files.associations": {"*.js": "javascriptreact"} to make my life easier. This is intentional. Sadly this results in React icons in my non-React code, which is less than helpful.

I would prefer seeing the JS icon everyhwere by default, so I’ve tried the following:

{
  "icon": "reactjs",
  "disabled": true
}

This worked, but not as expected: all JS files now showed up with the default icon. So I tried an override:

{
  "icon": "js",
  "extensions": ["js"],
  "languages": ["javascriptreact"],
  "format": "svg",
  "extends": "js",
  "overrides": "reactjs"
}

This doesn’t seem to do anything. I then proceeded to remove combinations of random lines from that and to juggle around “reactjs”, “js”, “javascript” and “javascriptreact” in various permutations but no combination produced any results: upon restart, VSCode still gleefully render blue React icons in every folder tree.

The ideal solution I want to achieve is to have “js” files never show up with the React icon but to keep the file association for *.js to be “javascriptreact” (because that’s a clean superset of “javascript”) and also have *.jsx files correctly show up with the react icon.

[robertohuertasm]

@pluma, just put this into your User Settings:

 "files.associations": {
    "*.jsx": "javascriptreact"
    , "*.js": "javascriptreact"
  }
  ,"vsicons.associations.files": [
    { "icon": "js", "extensions": ["js"], "format": "svg" }
  ]

That should do it. You will get *.js and *.jsx associated with react but keep the JS logo for the *.js files.

PS: Remember to execute -> F1: Icons: Apply Icons Customization

[robertohuertasm]

@pluma, file associations and their precendence are, indeed, a vscode api thing but the ability to customize the icons and dynamically change the file associations and even these override/extend rules are specific of vscode-icons.

Secondly, I’m not sure if I got your question right but here I go. The icon manifest generated in order to be consumed by vscode has only a one-to-one relationship between the icon and the file association type (be it name, file or language, so you can have 1 for file names, 1 for language id and 1 for file extensions). In case some dev entered more than one relationship for a specific icon and file association type (same type I mean, i.e. npm icon associated to .js and to .jsx in 2 separated entries), the last one would rule.

What we do is to abstract all this so we can write this similar to CSS (following your analogy). By using our feature you can write more than 1 relationship, no matter what type or how many times. In the end, we’re going to squash all the rules you give us and merge them with the ones that we ship by default.

So yes, you could add another definition with the same icon and another file extension, for instance.

By following my previous example, in our case, you could use 2 separated entries for .js and .jsx and associate both to to the npm icon. It won’t matter if you do it in one only definition or in two.

For clarity’s sake:

"vsicons.associations.files": [
    { "icon": "npm", "extensions": ["js"], "format": "svg" },
    { "icon": "npm", "extensions": ["jsx"], "format": "svg" }
  ]

// is exactly the same as 

"vsicons.associations.files": [
    { "icon": "npm", "extensions": ["js", "jsx"], "format": "svg" }
 ]