Force the file extension icon on a FileTree element

[maelgangloff]

What version of starlight are you using?

0.36.2

What is your idea?

I think it would be interesting to add a way to tell the FileTree component to use a different icon than the one it deduced from the file extension.

Why is this feature necessary?

For example, in some projects, local environment variables are written to a .env.local file, which is copied from .env.

When I explain this in my documentation, the first file has a default icon, while the second has the correct icon ( ⚙️ ) to clearly indicate that it's a configuration file.

This is a specific case, but I think there are probably others.

Do you have examples of this feature in other projects?

No response

Participation

• I am willing to submit a pull request for this feature.

[HiDeoo]

Thanks for the feedback.

This is an interesting case, which I think raise a few questions that should be considered if we decide to move forward with such customization:

• We already have custom definitions in Starlight that map some files/extensions to custom icons. Should we add more custom definitions for environment-specific files rather than providing support for customizing icon? Could this be a common enough use case to justify adding such custom definitions so that everyone can benefit from them out of the box?
• If we were to provide such support, which syntax should we use?
• Should customization be limited to other known extensions like it's done in this PR ? I personally feel like any supported icon in Starlight should be allowed rather than limiting it to a known file extension, specially with support for custom icons being worked on in Starlight. This would mean that unknown extensions could also be mapped to custom icons.
• Should we support mapping icons to an extension but also potentially an entire filename too? For example, mapping myprogram.config.ts to a custom icon without changing .ts files icon?
• If someone is documenting a custom file format, unknown to Starlight, and remapping the icon to another one, it feels like it could get very repetitive to have to specify the same mapping every time you're using that file format in a file tree? Maybe another approach could be to support such customization on the <FileTree> component itself, as a prop maybe. This would mean all files in that file tree would use the custom mapping provided and you could even create a custom file tree component that just renders the default <FileTree> and always applies custom mappings for your entire project?

Really interested in hearing everyone's thoughts on this.