From 7ca3aa51449fdf753f71b4da88976c77d646cdcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= <slorber@users.noreply.github.com>
Date: Fri, 31 Jan 2025 17:28:04 +0100
Subject: [PATCH] perf(theme): use SVG sprite for IconExternalLink (#10885)

---
 packages/docusaurus-theme-classic/src/index.ts       |  9 +++++++++
 .../docusaurus-theme-classic/src/inlineSvgSprites.ts | 12 ++++++++++++
 .../src/theme/Icon/ExternalLink/index.tsx            | 10 +++++-----
 3 files changed, 26 insertions(+), 5 deletions(-)
 create mode 100644 packages/docusaurus-theme-classic/src/inlineSvgSprites.ts

diff --git a/packages/docusaurus-theme-classic/src/index.ts b/packages/docusaurus-theme-classic/src/index.ts
index 568fd070c6..ac2ea69a4c 100644
--- a/packages/docusaurus-theme-classic/src/index.ts
+++ b/packages/docusaurus-theme-classic/src/index.ts
@@ -14,6 +14,7 @@ import {
   getAnnouncementBarInlineScript,
   DataAttributeQueryStringInlineJavaScript,
 } from './inlineScripts';
+import {SvgSpriteDefs} from './inlineSvgSprites';
 import type {LoadContext, Plugin} from '@docusaurus/types';
 import type {ThemeConfig} from '@docusaurus/theme-common';
 import type {Plugin as PostCssPlugin} from 'postcss';
@@ -121,6 +122,14 @@ export default function themeClassic(
     injectHtmlTags() {
       return {
         preBodyTags: [
+          {
+            tagName: 'svg',
+            attributes: {
+              xmlns: 'http://www.w3.org/2000/svg',
+              style: 'display: none;',
+            },
+            innerHTML: SvgSpriteDefs,
+          },
           {
             tagName: 'script',
             innerHTML: `
diff --git a/packages/docusaurus-theme-classic/src/inlineSvgSprites.ts b/packages/docusaurus-theme-classic/src/inlineSvgSprites.ts
new file mode 100644
index 0000000000..b729c9bbb5
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/inlineSvgSprites.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// For icons that are heavily repeated in the static html output
+// See also https://github.com/facebook/docusaurus/issues/5865
+export const SvgSpriteDefs = `<defs>
+<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" /></symbol>
+</defs>`;
diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/ExternalLink/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/ExternalLink/index.tsx
index 48f2e256a3..87523b6eec 100644
--- a/packages/docusaurus-theme-classic/src/theme/Icon/ExternalLink/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Icon/ExternalLink/index.tsx
@@ -10,6 +10,10 @@ import type {Props} from '@theme/Icon/ExternalLink';
 
 import styles from './styles.module.css';
 
+// References symbol in docusaurus-theme-classic/src/inlineSvgSprites.ts
+// See why: https://github.com/facebook/docusaurus/issues/5865
+const svgSprite = '#theme-svg-external-link';
+
 export default function IconExternalLink({
   width = 13.5,
   height = 13.5,
@@ -19,12 +23,8 @@ export default function IconExternalLink({
       width={width}
       height={height}
       aria-hidden="true"
-      viewBox="0 0 24 24"
       className={styles.iconExternalLink}>
-      <path
-        fill="currentColor"
-        d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
-      />
+      <use href={svgSprite} />
     </svg>
   );
 }