Icon for external link in Markdown

[peterpeterparker]

Hi 👋

Is there a way to display an icon next to external link used in the Markdown files of docs or blogs section?

I documented an [external link](https://hello.com)

which would render to

I documented an <a href="https://hello.com>external link <svg class="iconExternalLink..."/></a>

[slorber]

We don't offer a first-class API for this, but you can swizzle the MDXComponents/A element and provide your own Markdown link implementation to override our default.

import React from 'react';
import Link from '@docusaurus/Link';
import type {Props} from '@theme/MDXComponents/A';

export default function MDXA(props: Props): JSX.Element {
  return <Link {...props} />;
}

It should be easy there to detect an external URL and add an extra icon to the rendered output. If you need inspiration take a look at NavbarNavLink

[peterpeterparker]

It does the job, merci Sébastien.

import React from "react";
import Link from "@docusaurus/Link";
import isInternalUrl from "@docusaurus/isInternalUrl";
import IconExternalLink from "@theme/Icon/ExternalLink";

const MDXA = ({ href, children, ...props }) => (
  <Link {...props} href={href}>
    {children}
    {!isInternalUrl(href) && <IconExternalLink />}
  </Link>
);

export default MDXA;