3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-07 21:32:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(v2): use SVG for external link icon (#4914)

Browse source
This commit is contained in:
Alexey Pyltsyn 2021-06-09 14:05:13 +03:00 • committed by GitHub
parent df19bbd145
commit 526ce44933
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 50 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,6 +18,7 @@ import type {Props} from '@theme/DocSidebar';
import Logo from '@theme/Logo'; import Logo from '@theme/Logo';
import IconArrow from '@theme/IconArrow'; import IconArrow from '@theme/IconArrow';
import IconMenu from '@theme/IconMenu'; import IconMenu from '@theme/IconMenu';
import IconExternalLink from '@theme/IconExternalLink';
import {translate} from '@docusaurus/Translate'; import {translate} from '@docusaurus/Translate';
import styles from './styles.module.css'; import styles from './styles.module.css';
@ -179,7 +180,6 @@ function DocSidebarItemLink({
<Link <Link
className={clsx('menu__link', { className={clsx('menu__link', {
'menu__link--active': isActive, 'menu__link--active': isActive,
[styles.menuLinkExternal]: !isInternalUrl(href),
})} })}
to={href} to={href}
{...(isInternalUrl(href) && { {...(isInternalUrl(href) && {
@ -188,7 +188,14 @@ function DocSidebarItemLink({
onClick: onItemClick, onClick: onItemClick,
})} })}
{...props}> {...props}>
{isInternalUrl(href) ? (
label
) : (
<span>
{label} {label}
<IconExternalLink />
</span>
)}
</Link> </Link>
</li> </li>
); );

14
packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css
View file

@ -122,17 +122,3 @@
:global(.menu__list-item--collapsed) :global(.menu__list) { :global(.menu__list-item--collapsed) :global(.menu__list) {
height: 0 !important; height: 0 !important;
} }
.menuLinkExternal {
align-items: center;
}
.menuLinkExternal:after {
content: '';
height: 1.15rem;
width: 1.15rem;
min-width: 1.15rem;
margin: 0 0 0 3%;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(0,0,0,0.5)' 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'/%3E%3C/svg%3E")
no-repeat;
filter: var(--ifm-menu-link-sublist-icon-filter);
}

29
packages/docusaurus-theme-classic/src/theme/IconExternalLink/index.tsx Normal file
View file

@ -0,0 +1,29 @@
/**
* 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.
*/
import React from 'react';
import styles from './styles.module.css';
const IconExternalLink = (): JSX.Element => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
role="img"
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"
/>
</svg>
);
};
export default IconExternalLink;

12
packages/docusaurus-theme-classic/src/theme/IconExternalLink/styles.module.css 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.
*/
.iconExternalLink {
margin-left: 0.3rem;
position: relative;
top: 1px;
}