FileTree icon customization

[yhakbar]

What version of starlight are you using?

0.31.1

What is your idea?

I would love the ability to customize the icons used by the FileTree component, so that I can use alternate icons instead of the defaults.

Why is this feature necessary?

I'm currently performing a rewrite of the Terragrunt site using Starlight.

Terragrunt uses HCL files and orchestrates OpenTofu and Terraform binaries. Right now, when rendering files like main.tf, and terragrunt.hcl in the FileTree component, they are rendered using the Terraform logo and the default file icon respectively. This isn't ideal, as Terragrunt uses OpenTofu by default, and Terraform on an opt-in basis (as OpenTofu is the open source alternative), and it would be nice for Terragrunt configurations to render on the Terragrunt site with the Terragrunt icon in FileTree components, instead of the default icon.

If possible, I'd appreciate the ability to pass a prop to the FileTree component that customized the icons used for globs that match certain file names so that the docs better reflect how Terragrunt works. I don't actually know if this is the right way to solve this kind of problem, I'm a front-end novice. If there was some way to address this with CSS or something that was documented, I could work out a solution there as well.

Do you have examples of this feature in other projects?

No response

Participation

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