15308555518/ docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-12-26 01:33:02 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(theme): improve CardLink logic to support PNG or JPEG icons

This commit is contained in:
Johannes Liermann 2025-12-02 17:27:03 +01:00
parent 1f53416f78
commit 85e693e002
1 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/docusaurus-theme-classic/src/theme/DocCard/index.tsx
View File

@ -115,18 +115,27 @@ function CardCategory({item}: {item: PropSidebarItemCategory}): ReactNode {
function CardLink({item}: {item: PropSidebarItemLink}): ReactNode {
const defaultIcon = isInternalUrl(item.href) ? '📄' : '🔗';
const customIcon =
typeof item.icon === 'string' && item.icon.startsWith('data:image') ? (
<img
src={item.icon}
alt={`${item.label }-icon`}
style={{maxWidth: '24px', maxHeight: '24px'}}
/>
) : (
item.icon
);
let customIcon;
const icon = item.icon ? customIcon : defaultIcon;
// If the icon is a string, it can be an simple string icon or a PNG/JPEG image, render accordingly
if (typeof item.icon === 'string') {
if (
/^data:image\/(?:png|jpe?g)/i.test(item.icon) ||
/\.(?:png|jpe?g)/i.test(item.icon)
) {
customIcon = (
<img
src={item.icon}
alt={`${item.label}-icon`}
style={{maxWidth: '24px', maxHeight: '24px'}}
/>
);
} else {
customIcon = item.icon;
}
}
const icon = customIcon || defaultIcon;
const doc = useDocById(item.docId ?? undefined);
return (