3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-03 16:59:06 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: use SVG icon for home breadcrumb (#7183)

Browse source 
Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
This commit is contained in:
Dr-Electron 2022-04-20 14:42:57 +02:00 • committed by GitHub
parent 7f98cc6a78
commit 44ebe73e50
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 42 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

8
packages/docusaurus-theme-classic/src/theme-classic.d.ts vendored
View file

@ -1110,6 +1110,14 @@ declare module '@theme/IconEdit' {
export default function IconEdit(props: Props): JSX.Element;
}
declare module '@theme/IconHome' {
import type {ComponentProps} from 'react';
export interface Props extends ComponentProps<'svg'> {}
export default function IconHome(props: Props): JSX.Element;
}
declare module '@theme/IconLightMode' {
import type {ComponentProps} from 'react';

3
packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx
View file

@ -15,6 +15,7 @@ import styles from './styles.module.css';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
import IconHome from '@theme/IconHome';
// TODO move to design system folder
function BreadcrumbsItemLink({
@ -76,7 +77,7 @@ function HomeBreadcrumbItem() {
<Link
className={clsx('breadcrumbs__link', styles.breadcrumbsItemLink)}
href={homeHref}>
🏠
<IconHome className={styles.icon} />
</Link>
</li>
);

6
packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/styles.module.css
View file

@ -9,3 +9,9 @@
--ifm-breadcrumb-size-multiplier: 0.8;
margin-bottom: 0.8rem;
}
.icon {
vertical-align: middle;
height: 1rem;
width: 1rem;
}

26
packages/docusaurus-theme-classic/src/theme/IconHome/index.tsx Normal file
View file

@ -0,0 +1,26 @@
/**
* 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 type {Props} from '@theme/IconHome';
export default function IconDarkMode(props: Props): JSX.Element {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
width="24"
viewBox="0 0 24 24"
{...props}>
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"
fill="currentColor"
/>
</svg>
);
}