Ability to pass a custom icon to <Aside>

[shubham-padia]

What version of starlight are you using?

0.25.4

What is your idea?

We have multiple instances where we want to show <Asides> suggesting keyboard shortcuts. Changing the name of the Aside is possible right now, but we also want to display a keyboard icon on that aside.

Why is this feature necessary?

Since the Aside component is relatively small in terms of LOC, it would be possible to just make our own component based on the original implementation and go from there. However, it would be good to have upstream support for it if it meet's the project's criteria.

Do you have examples of this feature in other projects?

https://zulip.com/help/quote-and-reply

Participation

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

[delucis]

I think this is a reasonable request. The one tricky part is how to handle this for our :::note-style syntax. For the regular Astro <Aside> component, adding props is no problem, but we’d want to keep feature parity with the directive syntax too.

[shubham-padia]

According to https://github.com/micromark/micromark-extension-directive#syntax, which is what is used in https://github.com/remarkjs/remark-directive?tab=readme-ov-file, we can specify an attribute in this syntax: ::name[label]{attributes}.

We can define the extra icons as the iconPath objects defined in asides.ts. One option is to define that as part of starlight config object in astro.config.ts, I'm not sure whether that's the best place for it or not. Any suggestion there would be welcome, thanks!

[delucis]

The path I’d recommend is to only support the names of Starlight’s built-in icons for now (we can then add missing icons as needed), but that way the syntax can be something like:

<Aside type="note" icon="astro" title="Astro wants you to know…">
Contents
</Aside>

or

:::note[Astro wants you to know…]{icon="astro"}
Contents
:::

I think it should be possible for the asides.ts plugin to import the icon paths from our Icons.ts file so this is the same as the icons available in other Starlight components?

[delucis]

My only doubt here is that we’ve discussed using https://www.astroicon.dev/ to make customising icons easier, but I’m not sure we’d be able to access that from a remark plugin. So that could complicate things a bit, but we can probably face that problem when/if we come to it in the future.

[shubham-padia]

The proposal of using starlight's built-in icons for now sounds good to me. And we can think about astroicon.dev when it comes to it. I'm thinking of starting work on this in a day or two to see if there are additional comments, please let me know if any!

[delucis]

No more comments from me — feel free to ask any questions you run into as you work on it or to open an early draft PR if you need feedback 🙌

[shubham-padia]

Opened #2261, please have a look when you get some time, thanks!