fix: update the external link icon

This commit is contained in:
Hossein Mehrabi
2023-07-10 23:39:13 +03:30
parent 4e2f4135ab
commit 3eab172a0b
4 changed files with 31 additions and 9 deletions
@@ -1,6 +1,6 @@
import { useColorMode } from '@docusaurus/theme-common'
import { clsx } from 'clsx'
import React from 'react'
import React, { CSSProperties } from 'react'
import styles from './style.module.scss'
@@ -14,7 +14,11 @@ import DiscordSvg from '../../static/icons/discord.svg'
import DiscourseSvg from '../../static/icons/discourse.svg'
import DotSvg from '../../static/icons/dot.svg'
import DropdownSvg from '../../static/icons/dropdown.svg'
import EditSvg from '../../static/icons/edit.svg'
import ExternalLinkSvg from '../../static/icons/external-link.svg'
import FolderSvg from '../../static/icons/folder.svg'
import FullscreenExitSvg from '../../static/icons/fullscreen-exit.svg'
import FullscreenSvg from '../../static/icons/fullscreen.svg'
import GithubSvg from '../../static/icons/github.svg'
import GScholarSvg from '../../static/icons/gscholar.svg'
import HistorySvg from '../../static/icons/history.svg'
@@ -23,9 +27,6 @@ import SearchSvg from '../../static/icons/search.svg'
import StatusSvg from '../../static/icons/status.svg'
import TelegramSvg from '../../static/icons/telegram.svg'
import TwitterSvg from '../../static/icons/twitter.svg'
import EditSvg from '../../static/icons/edit.svg'
import FullscreenSvg from '../../static/icons/fullscreen.svg'
import FullscreenExitSvg from '../../static/icons/fullscreen-exit.svg'
type TIconProps = {
size?: 's' | 'm' | 'l'
@@ -192,3 +193,9 @@ export const IconFullscreenExit = (props: TIconProps): JSX.Element => (
<FullscreenExitSvg />
</Icon>
)
export const IconExternalLink = (props: TIconProps): JSX.Element => (
<Icon {...props}>
<ExternalLinkSvg />
</Icon>
)
@@ -0,0 +1,3 @@
<svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.5 6L5.5 1M5.5 1C5.5 1 2.45262 1 0.5 1M5.5 1V6" stroke="white"/>
</svg>

After

Width:  |  Height:  |  Size: 175 B

@@ -1,9 +1,10 @@
import React from 'react'
import Link from '@docusaurus/Link'
import useBaseUrl from '@docusaurus/useBaseUrl'
import { Typography } from '@acid-info/lsd-react'
import isInternalUrl from '@docusaurus/isInternalUrl'
import Link from '@docusaurus/Link'
import { isRegexpStringMatch } from '@docusaurus/theme-common'
import { PickIcon, Typography } from '@acid-info/lsd-react'
import useBaseUrl from '@docusaurus/useBaseUrl'
import React from 'react'
import { IconExternalLink } from '../../../components/Icon/Icon'
import styles from './styles.module.css'
export default function NavbarNavLink({
@@ -35,7 +36,9 @@ export default function NavbarNavLink({
className={styles.linkContent}
>
{label}
{isExternalLink && <PickIcon color="primary" />}
{isExternalLink && (
<IconExternalLink className={styles.externalLinkIcon} />
)}
</Typography>
),
}
@@ -10,3 +10,12 @@
text-underline-offset: 0.3rem;
text-decoration-color: rgba(var(--lsd-text-primary), 0.6);
}
.externalLinkIcon {
width: 8px;
}
.externalLinkIcon svg {
width: 100%;
height: auto;
}