Icons for links to external site how to?

[dcs3spp]

I see from the docs that icons are supported by modifying the Source API:

import { docs, meta } from "@/.source";
import { createMDXSource } from "fumadocs-mdx";
import { loader } from "fumadocs-core/source";
import { icons } from "lucide-react";
import { createElement } from "react";

export const source = loader({
  baseUrl: "/docs",
  source: createMDXSource(docs, meta),
  icon(icon) {
    console.log(`THE ICON PARAM IS ${icon}`);
    if (!icon) {
      // You may set a default icon
      return;
    }

    if (icon in icons) return createElement(icons[icon as keyof typeof icons]);
  },
});

Is it possible to automate rendering an external link icon for links to external sites, e.g in the markdown content [Google](https://www.google.com) would have an external link icon rendered next to the link?

[fuma-nama]

You can do that by overriding the default <Link> component in page.tsx, like:

return <MDX components={{ ...defaultMdxComponents, a: props => <YourComp /> }} />

[dcs3spp]

Thanks @fuma-nama

I have looked through the source code and modified the existing Link component as listed below to add ExternalLink icon from lucide-react. I was wanting to preserve the existing prefectch behaviour for internal / original links.

import Original, { type LinkProps as BaseProps } from "next/link";
import { type AnchorHTMLAttributes, forwardRef } from "react";
import { ExternalLink } from "lucide-react";

export interface LinkProps
  extends Pick<BaseProps, "prefetch" | "replace">,
    AnchorHTMLAttributes<HTMLAnchorElement> {
  /**
   * If the href is an external URL
   *
   * automatically determined by default
   */
  external?: boolean;
}

/**
 * Wraps `next/link` and safe to use in MDX documents
 */
const Link = forwardRef<HTMLAnchorElement, LinkProps>(
  (
    {
      href = "#",
      external = !(
        href.startsWith("/") ||
        href.startsWith("#") ||
        href.startsWith(".")
      ),
      prefetch,
      replace,
      ...props
    },
    ref
  ) => {
    if (external) {
      console.debug("EXTERNAL LINK ${href}");
      return (
        <a
          ref={ref}
          href={href}
          rel="noreferrer noopener"
          target="_blank"
          {...props}
        >
          <ExternalLink />
          {props.children}
        </a>
      );
    }
    console.debug(
      `STANDARD LINK ref:=${ref} href:=${href} prefetch:=${prefetch} replace:={replace}`
    );

    return (
      <Original
        ref={ref}
        href={href}
        prefetch={prefetch}
        replace={replace}
        {...props}
      />
    );
  }
);

Link.displayName = "Link";

export { Link as default };

and in my page.tsx I have modified MDXComponents to override aelement :

export default async function Page(props: {
  params: Promise<{ slug?: string[] }>;
}) {
  const params = await props.params;
  const page = source.getPage(params.slug);
  if (!page) notFound();

  const MDX = page.data.body;

  return (
    <DocsPage toc={page.data.toc} full={page.data.full}>
      <DocsTitle>{page.data.title}</DocsTitle>
      <DocsDescription>{page.data.description}</DocsDescription>
      <DocsBody>
        <MDX components={{ ...defaultMdxComponents, a: (props) => <Link /> }} />
      </DocsBody>
    </DocsPage>
  );
}

The external property is always # when using content with link [google](https://www.google.com)

Where in the source code is the content link parsed, e.g. [google](https://www.google.com), that forwards href property to the Link component? Is it via a remark / rehype plugin ?

[fuma-nama]

You forgot to pass props

[fuma-nama]

And you probably don't need to copy the source code at all, you can just add the icon in the children like <Link {...props}><Icon />{props.children}</Link>

[dcs3spp]

Thanks yep I forgot to pass props 🫠 to Link element.

I think I know what you mean.....so modify the function to check if the href prop is external link and add Icon if necessary, something like below. That way only external links have an external link icon rendered.

What I did notice is then when I pass props down to <Link {...props}> the external flag is not set to true it is always false with href value of #

      <DocsBody>
        <MDX
          components={{
            ...defaultMdxComponents,
            a: (props) => (
            
              // logic here to check if href is external - if it is then add ExternalLink icon from lucide-react
              // otherwise omit the icon
              <Link {...props}>
                <Icon />
                {props.children}
              </Link>
              
              // otherwise use
              <Link {...props} />
            ),
          }}
        />
      </DocsBody>

[dcs3spp]

Never mind, my error in markdown content!!! Thanks again for your help @fuma-nama will accept your answer 💯 👍