mirror of
https://github.com/facebook/docusaurus.git
synced 2025-06-01 18:32:52 +02:00
fix(v2): refactor icons in theme-classic, fix swizzle issue (#3854)
* fix(v2): refactor icons in theme-classic, fix swizzle issue * apply review suggestion * fix IconMenu className
This commit is contained in:
Bartosz Kaszubowski
GitHub
parent
915f949c25
commit
397fde0b2f
14 changed files with 156 additions and 72 deletions
|
|
@ -147,6 +147,9 @@ const swizzleAllowedComponents = [
|
|||
'Footer',
|
||||
'NotFound',
|
||||
'SearchBar',
|
||||
'IconArrow',
|
||||
'IconEdit',
|
||||
'IconMenu',
|
||||
'hooks/useTheme',
|
||||
'prism-include-languages',
|
||||
];
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import BlogPostPaginator from '@theme/BlogPostPaginator';
|
|||
import type {Props} from '@theme/BlogPostPage';
|
||||
import BlogSidebar from '@theme/BlogSidebar';
|
||||
import TOC from '@theme/TOC';
|
||||
import IconEdit from '@theme/IconEdit';
|
||||
|
||||
function BlogPostPage(props: Props): JSX.Element {
|
||||
const {content: BlogPostContents, sidebar} = props;
|
||||
|
|
@ -41,20 +42,7 @@ function BlogPostPage(props: Props): JSX.Element {
|
|||
<div>
|
||||
{editUrl && (
|
||||
<a href={editUrl} target="_blank" rel="noreferrer noopener">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1.2em"
|
||||
width="1.2em"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 40 40"
|
||||
style={{
|
||||
marginRight: '0.3em',
|
||||
verticalAlign: 'sub',
|
||||
}}>
|
||||
<g>
|
||||
<path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z" />
|
||||
</g>
|
||||
</svg>
|
||||
<IconEdit />
|
||||
Edit this page
|
||||
</a>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import DocPaginator from '@theme/DocPaginator';
|
|||
import DocVersionSuggestions from '@theme/DocVersionSuggestions';
|
||||
import type {Props} from '@theme/DocItem';
|
||||
import TOC from '@theme/TOC';
|
||||
import IconEdit from '@theme/IconEdit';
|
||||
|
||||
import clsx from 'clsx';
|
||||
import styles from './styles.module.css';
|
||||
|
|
@ -111,20 +112,7 @@ function DocItem(props: Props): JSX.Element {
|
|||
href={editUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1.2em"
|
||||
width="1.2em"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 40 40"
|
||||
style={{
|
||||
marginRight: '0.3em',
|
||||
verticalAlign: 'sub',
|
||||
}}>
|
||||
<g>
|
||||
<path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z" />
|
||||
</g>
|
||||
</svg>
|
||||
<IconEdit />
|
||||
Edit this page
|
||||
</a>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import MDXComponents from '@theme/MDXComponents';
|
|||
import NotFound from '@theme/NotFound';
|
||||
import type {DocumentRoute} from '@theme/DocItem';
|
||||
import type {Props} from '@theme/DocPage';
|
||||
import IconArrow from '@theme/IconArrow';
|
||||
import {matchPath} from '@docusaurus/router';
|
||||
|
||||
import clsx from 'clsx';
|
||||
|
|
@ -97,8 +98,9 @@ function DocPageContent({
|
|||
tabIndex={0}
|
||||
role="button"
|
||||
onKeyDown={toggleSidebar}
|
||||
onClick={toggleSidebar}
|
||||
/>
|
||||
onClick={toggleSidebar}>
|
||||
<IconArrow />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -49,13 +49,6 @@
|
|||
background-color: var(--collapse-button-bg-color-dark);
|
||||
}
|
||||
|
||||
.collapsedDocSidebar:before {
|
||||
content: '';
|
||||
background-image: url('~!file-loader!../icons/arrow.svg');
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.docMainContainer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ import Link from '@docusaurus/Link';
|
|||
import isInternalUrl from '@docusaurus/isInternalUrl';
|
||||
import type {Props} from '@theme/DocSidebar';
|
||||
import Logo from '@theme/Logo';
|
||||
import IconArrow from '@theme/IconArrow';
|
||||
import IconMenu from '@theme/IconMenu';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
|
||||
|
|
@ -243,24 +245,11 @@ function DocSidebar({
|
|||
×
|
||||
</span>
|
||||
) : (
|
||||
<svg
|
||||
aria-label="Menu"
|
||||
<IconMenu
|
||||
className={styles.sidebarMenuIcon}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height={MOBILE_TOGGLE_SIZE}
|
||||
width={MOBILE_TOGGLE_SIZE}
|
||||
viewBox="0 0 32 32"
|
||||
role="img"
|
||||
focusable="false">
|
||||
<title>Menu</title>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeMiterlimit="10"
|
||||
strokeWidth="2"
|
||||
d="M4 7h22M4 15h22M4 23h22"
|
||||
/>
|
||||
</svg>
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
<ul className="menu__list">
|
||||
|
|
@ -287,8 +276,9 @@ function DocSidebar({
|
|||
'button button--secondary button--outline',
|
||||
styles.collapseSidebarButton,
|
||||
)}
|
||||
onClick={onCollapse}
|
||||
/>
|
||||
onClick={onCollapse}>
|
||||
<IconArrow className={styles.collapseSidebarButtonIcon} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -66,13 +66,16 @@
|
|||
|
||||
.collapseSidebarButton {
|
||||
display: block !important;
|
||||
background: url('~!file-loader!../icons/arrow.svg') no-repeat center center;
|
||||
background-color: var(--ifm-button-background-color);
|
||||
height: 40px;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.collapseSidebarButtonIcon {
|
||||
transform: rotate(180deg);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .collapseSidebarButton {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
/**
|
||||
* 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 {Props} from '@theme/IconArrow';
|
||||
|
||||
const IconArrow = (props: Props): JSX.Element => {
|
||||
return (
|
||||
<svg width="20" height="20" role="img" {...props}>
|
||||
<g fill="#7a7a7a">
|
||||
<path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0" />
|
||||
<path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default IconArrow;
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
/**
|
||||
* 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 clsx from 'clsx';
|
||||
|
||||
import {Props} from '@theme/IconEdit';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
|
||||
const IconEdit = ({className, ...restProps}: Props): JSX.Element => {
|
||||
return (
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1.2em"
|
||||
width="1.2em"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
role="img"
|
||||
viewBox="0 0 40 40"
|
||||
className={clsx(styles.iconEdit, className)}
|
||||
{...restProps}>
|
||||
<g>
|
||||
<path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default IconEdit;
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.iconEdit {
|
||||
margin-right: 0.3em;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
/**
|
||||
* 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 {Props} from '@theme/IconMenu';
|
||||
|
||||
const IconMenu = ({
|
||||
width = 30,
|
||||
height = 30,
|
||||
className,
|
||||
...restProps
|
||||
}: Props): JSX.Element => {
|
||||
return (
|
||||
<svg
|
||||
aria-label="Menu"
|
||||
className={className}
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 30 30"
|
||||
role="img"
|
||||
focusable="false"
|
||||
{...restProps}>
|
||||
<title>Menu</title>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeMiterlimit="10"
|
||||
strokeWidth="2"
|
||||
d="M4 7h22M4 15h22M4 23h22"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default IconMenu;
|
||||
|
|
@ -17,6 +17,7 @@ import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
|
|||
import useWindowSize, {windowSizes} from '@theme/hooks/useWindowSize';
|
||||
import NavbarItem from '@theme/NavbarItem';
|
||||
import Logo from '@theme/Logo';
|
||||
import IconMenu from '@theme/IconMenu';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
|
||||
|
|
@ -94,22 +95,7 @@ function Navbar(): JSX.Element {
|
|||
tabIndex={0}
|
||||
onClick={showSidebar}
|
||||
onKeyDown={showSidebar}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="30"
|
||||
height="30"
|
||||
viewBox="0 0 30 30"
|
||||
role="img"
|
||||
focusable="false">
|
||||
<title>Menu</title>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeMiterlimit="10"
|
||||
strokeWidth="2"
|
||||
d="M4 7h22M4 15h22M4 23h22"
|
||||
/>
|
||||
</svg>
|
||||
<IconMenu />
|
||||
</div>
|
||||
)}
|
||||
<Logo
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><g fill='#7a7a7a'><path d='M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0'/><path d='M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0'/></g></svg>
|
||||
|
Before Width: | Height: | Size: 615 B |
27
packages/docusaurus-theme-classic/src/types.d.ts
vendored
27
packages/docusaurus-theme-classic/src/types.d.ts
vendored
|
|
@ -478,3 +478,30 @@ declare module '@theme/Logo' {
|
|||
const Logo: (props: Props) => JSX.Element;
|
||||
export default Logo;
|
||||
}
|
||||
|
||||
declare module '@theme/IconArrow' {
|
||||
import type {ComponentProps} from 'react';
|
||||
|
||||
export type Props = ComponentProps<'svg'>;
|
||||
|
||||
const IconArrow: (props: Props) => JSX.Element;
|
||||
export default IconArrow;
|
||||
}
|
||||
|
||||
declare module '@theme/IconEdit' {
|
||||
import type {ComponentProps} from 'react';
|
||||
|
||||
export type Props = ComponentProps<'svg'>;
|
||||
|
||||
const IconEdit: (props: Props) => JSX.Element;
|
||||
export default IconEdit;
|
||||
}
|
||||
|
||||
declare module '@theme/IconMenu' {
|
||||
import type {ComponentProps} from 'react';
|
||||
|
||||
export type Props = ComponentProps<'svg'>;
|
||||
|
||||
const IconMenu: (props: Props) => JSX.Element;
|
||||
export default IconMenu;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue