How to set different icon for Autogenerated doc list

[Hisoka-X]

Hi team,
I want to have different icons for different documents, possibly including custom icons. How should I configure it?
There is ours autogenerated doc list. https://seatunnel.apache.org/docs/connector-v2/source

[slorber]

Related to #7844

We don't provide that feature out of the box but you can swizzle the DocCard component and adjust the React code to render the icon you want. It receives a sidebar item as a prop.

If your icon is an emoji (or is "serializable" as JSON) you could add it to the sidebar item metadata using customProps.myCustomIcon = '🥂' in sidebars.js or using sidebar_custom_props in front matter for autogenerated sidebars. Then you'll receive that string in the DocCard swizzled component.

1. Eject DocCard to customize it

Run npm run swizzle @docusaurus/theme-classic DocCard -- --eject

2. Change the DocCard code you want to display an emoji provided as sidebar item custom props:

-const icon = isInternalUrl(item.href) ? '📄️' : '🔗';
+const icon = item?.customProps?.myEmoji ?? (isInternalUrl(item.href) ? '📄️' : '🔗');

3. Assign the emoji to the sidebar item

For explicitly defined sidebars:

{
  type: 'doc',
  id: 'doc1',
  customProps: {myEmoji: '🦀'}
},

For autogenerated sidebars, this can be done with front matter:

---
sidebar_custom_props: 
  myEmoji: 🦀
---

Demo: https://stackblitz.com/edit/github-gmzyly?file=src%2Ftheme%2FDocCard%2Findex.js,docs%2Ftutorial-basics%2Fcreate-a-page.md

---

If your icon is not serializable (for example a React component), you can create a map of icons and use the same trick to provide the icon name instead of the icon code. Then your DocCard component can resolve the icon name to the icon component and render that component.

[Hisoka-X]

Thanks @slorber !

[Tudorhc5]

Thanks @slorber !