Use SVG sprite for IconExternalLink

Author: slorber

packages/docusaurus-theme-classic/src/index.ts

@@ -14,6 +14,7 @@ import {
   getAnnouncementBarInlineScript,
   DataAttributeQueryStringInlineJavaScript,
 } from './inlineScripts';
+import {SvgSpriteSymbols} 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: SvgSpriteSymbols,
+          },
           {
             tagName: 'script',
             innerHTML: `

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 SvgSpriteSymbols = `
+<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>
+`;

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>
   );
 }