Add icon support to the tabs component

[HiDeoo]

What version of starlight are you using?

0.17.2

What is your idea?

Adding a new icon prop to the <TabItem> component that would optionally accept an icon name from the Starlight icon set and render it next to the tab label.

Why is this feature necessary?

This would allow for more flexibility in the design of tabbed interfaces and make it easier to visually distinguish between tabs.

The idea originally comes from a features from Erika on the starlight-package-managers component (which internally uses the default Starlight tabs and only enhances them with sync between the tabs) to display package manager icons next to the package manager names.

Do you have examples of this feature in other projects?

The Biome website uses that approach for package managers related comnmands in their documentation and I personally think it looks great.

For the specific use case of starlight-package-managers, #1308 already adds icons for npm, yarn, and pnpm. bun could be added as well at some point if this is something of interest.

Participation

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

[delucis]

Sorry for the slow response on this one — yes I don’t see why we shouldn’t support this. And adds an argument for exposing all those extra icons in #1308 😁

The one difference from the above example I guess is that these would be monochrome icons, but I guess that’s OK?

[HiDeoo]

No worries at all. Thanks for checking out the idea.

The one difference from the above example I guess is that these would be monochrome icons, but I guess that’s OK?

Personally, I think that is more than fine. I did not even add the screenshot to show what the user should be able to do exactly, but more like the user should be able to do something similar with the default styles and icons provided by Starlight.

I'll start playing with this when I get some time and submit a PR 👍

[HiDeoo]

Available in Starlight v0.21.0 using the new icon attribute for the <TabItem> component.