3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-04-29 18:27:56 +02:00
Code Issues Projects Releases Packages Wiki Activity

perf(theme): use SVG sprite for IconExternalLink (#10885)

Browse source
This commit is contained in:
Sébastien Lorber 2025-01-31 17:28:04 +01:00 • committed by GitHub
parent 884f93eea8
commit 7ca3aa5144
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 26 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/docusaurus-theme-classic/src/index.ts
View file

@ -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: `

12
packages/docusaurus-theme-classic/src/inlineSvgSprites.ts Normal file
View file

@ -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>`;

10
packages/docusaurus-theme-classic/src/theme/Icon/ExternalLink/index.tsx
View file

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