How do I use custom folder associations?

[theorib]

Hi there, I was wondering how I can use custom folder associations with these icons. They are gorgeous btw and I really love their size!

I did quite a lot of searching and tried different few things without success, for example adding to my settings.json:

    "workbench.iconTheme": "vscode-great-icons",
    "files.associations": {
        "lib": "_fd_app",
    },

Any guidance would be greatly appreciated.

[EmmanuelBeziat]

Hello @theorib

I don't have much info on this either, I can't find any resource talking about an equivalent for files.associations but with folders. files.association only works with file extensions, so it won't do the trick…

I think you could open a ticket at microsoft/vscode repo, so they consider adding something like folders.association for settings.json. But that might take a bit of time…

You can suggest me new folders to add icons for if needed, I'll see if I can add it into the icon set :)

[theorib]

Hi @EmmanuelBeziat thanks a lot for the very swift response. I'm mostly developing React and Next.js projects. There are quite a few folders that are very common when developing on those environments. I guess a lot of people would be quite happy if they had relevant custom icons.

Most Next.js projects have the following folders that currently do not have custom icons:

• actions: where Next.js server actions live
• api or _api: where api related files live
• assets or _assets: where a lot of static assets like images live
• components (or _components): where most React components will live
• data or _data: where data related files live
• hooks or _hooks: where react hooks live
• layout or _layout: component files for layout
• lib or _lib or libs or _libs: where a lot of utility functions, helper files and business logic reside
• pages: where routing files live
• providers or _providers: where react context providers live
• services or _services: where external services related files live
• src: where all project files live
• store or stores: where state management stores live
• styles where css styles live
• types or _types: where TypeScript types live
• ui or _ui: inside components for component files related to the ui
• utils or _utils: where a lot of utility functions live

I would be super happy to look up and suggest different icons if you would be up for it.

I'm attaching a few screenshots of a couple of icon libraries when looking at the same folders.

Let me know what you think and I'd be happy to contribute.

VSCode Icons:

Icons by Mhammed Talhaouy:

[theorib]

I can also try my way around and open this as a PR as I appreciate that's quite a bit of work. I may need a tiny bit of guidance from you on how to make it work locally from my forked repo but I may be able to find that out for myself :)

[EmmanuelBeziat]

I think I already have a few folder icons that might work if I just extension their range to match these names. I'll try to add some missing too, I'll let you know :)

[theorib]

I think I already have a few folder icons that might work if I just extension their range to match these names. I'll try to add some missing too, I'll let you know :)

Sounds brilliant! Thanks a lot!

[EmmanuelBeziat]

Hi @theorib check out the last version, I've added a few. I'm keeping this issue opened to add some more.

[theorib]

Hey @EmmanuelBeziat thanks for the update! I like the direction you took and some of the new icons! Specially like the styles, src and utils icons and I don't mind the idea of repeating icons with a different colour folder such as utils and services unless there's a better unique icon for each of them. I suppose using the same icon for data as in db makes sense and I've seen it before :) Thanks and look forward to seeing more of these!