feat(theme): allow custom icons in DocCard component#11596
Conversation
✅ [V2]Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
slorber
left a comment
There was a problem hiding this comment.
I'm not super fan of the design, and using the doc card list through JSX/props is not common.
Until we design a proper feature to provide a custom icon through both sidebars.js and JSX/props, for both docs/categories, I'd rather not merge anything that would make it harder to add later. (see request in #7844)
Since you can already achieve what you need by swizzling components, I'd rather not merge this PR.
Feel free to keep working on this PR, or close it. If you want to keep working on it, we need to think globally of how to customize that icon for all users. It would be better to open a RFC or something to discuss the overall design of the feature.
| const defaultIcon = isInternalUrl(item.href) ? '📄' : '🔗'; | ||
|
|
||
| const customIcon = | ||
| typeof item.icon === 'string' && item.icon.length <= 2 ? item.icon : null; |
There was a problem hiding this comment.
Why item.icon.length <= 2 ?
Is this an unreliable heuristic to check if the icon is an emoji?
| @@ -199,6 +199,7 @@ export type PropSidebarItemCategory = Expand< | |||
| export type PropSidebarItemLink = SidebarItemLink & { | |||
There was a problem hiding this comment.
So, we can customize the icon of docs/links, but not categories?
| export type PropSidebarItemLink = SidebarItemLink & { | ||
| docId?: string; | ||
| unlisted?: boolean; | ||
| icon?: string; |
There was a problem hiding this comment.
This type describes above all the props that Docusaurus passes to the components, after transforming sidebar items to component props.
If you add it here just to enable a new component prop, this is quite odd because we still can't add an icon attribute to the actual sidebar item (how these cards are usually created), and can only pass it through JSX usage (less common).
We actually want to allow users to provide custom icons through sidebar files, and need to design that feature properly: #7844
|
|
||
| import items from './doc-cards-items.js'; | ||
|
|
||
| <DocCardList items={items} /> |
There was a problem hiding this comment.
this works for you, but is not really the most idiomatic usage of sidebar items
|
Thanks I think it would be better to open a RFC and once we agree on what should be done, open a new PR. For now I'm closing this one |
Pre-flight checklist
Motivation
I had a project were I wanted to use the DocCard component from the theme with custom icons. I was able to swizzle it but considered that this addition might be of broader interest. The component accepts a property item.icon of type "string". It does currently not support image files but is also not broken by them.
Test Plan
I added a dogfooding doc under
/tests/docs/doc-cardswith different cases:Test links
Deploy preview: https://deploy-preview-11596--docusaurus-2.netlify.app/
Related issues/PRs