Core & UI: Support icons in separators of meta.json

.changeset/many-parents-sit.md

@@ -0,0 +1,6 @@
+---
+'fumadocs-core': patch
+'fumadocs-ui': patch
+---
+
+Support icons in separators of `meta.json`

packages/core/src/server/page-tree.ts

@@ -22,6 +22,7 @@ export interface Item {
 export interface Separator {
   type: 'separator';
   name: ReactNode;
+  icon?: ReactElement;
 }
 
 export interface Folder {

packages/core/src/source/page-tree-builder.ts

@@ -54,7 +54,7 @@ export interface PageTreeBuilder {
 
 const group = /^\((?<name>.+)\)$/;
 const link = /^(?:\[(?<icon>[^\]]+)])?\[(?<name>[^\]]+)]\((?<url>[^)]+)\)$/;
-const separator = /^---(?<name>.*?)---$/;
+const separator = /^---(?:\[(?<icon>[^\]]+)])?(?<name>.+)---$/;
 const rest = '...' as const;
 const restReversed = 'z...a' as const;
 const extractPrefix = '...';
@@ -121,10 +121,11 @@ function resolveFolderItem(
   if (match?.groups) {
     const node: PageTree.Separator = {
       type: 'separator',
+      icon: ctx.options.resolveIcon?.(match.groups.icon),
       name: match.groups.name,
     };
 
-    return [ctx.options.attachSeparator?.(node) ?? node];
+    return [removeUndefined(ctx.options.attachSeparator?.(node) ?? node)];
   }
 
   match = link.exec(item);
@@ -177,8 +178,9 @@ function buildFolderNode(
   ctx: PageTreeBuilderContext,
 ): PageTree.Folder {
   const metaPath = resolvePath(folder.file.path, 'meta');
-  let meta = ctx.storage.read(metaPath, 'meta');
-  meta = findLocalizedFile(metaPath, 'meta', ctx) ?? meta;
+  const meta =
+    findLocalizedFile(metaPath, 'meta', ctx) ??
+    ctx.storage.read(metaPath, 'meta');
   const indexFile = ctx.storage.read(
     resolvePath(folder.file.flattenedPath, 'index'),
     'page',

packages/ui/src/layouts/docs/sidebar.tsx

@@ -229,7 +229,10 @@ export function SidebarSeparator(props: HTMLAttributes<HTMLParagraphElement>) {
   return (
     <p
       {...props}
-      className={cn('mb-2 px-2 text-sm font-medium', props.className)}
+      className={cn(
+        'inline-flex items-center gap-2 mb-2 px-2 text-sm font-medium [&_svg]:size-4 [&_svg]:shrink-0',
+        props.className,
+      )}
       style={{
         paddingInlineStart: getOffset(level),
         ...props.style,
@@ -436,6 +439,7 @@ export function SidebarPageTree(props: {
           if (Separator) return <Separator key={id} item={item} />;
           return (
             <SidebarSeparator key={id} className={cn(i !== 0 && 'mt-8')}>
+              {item.icon}
               {item.name}
             </SidebarSeparator>
           );