From 4184c2aac0645e18808d8d34cf9dd1dcc4ec1326 Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Tue, 1 Dec 2020 14:28:31 +0100
Subject: [PATCH 1/3] fix(v2): refactor icons in theme-classic, fix swizzle
 issue

---
 .../docusaurus-theme-classic/src/index.ts     |  3 ++
 .../src/theme/BlogPostPage/index.tsx          | 16 +-------
 .../src/theme/DocItem/index.tsx               | 16 +-------
 .../src/theme/DocPage/index.tsx               |  6 ++-
 .../src/theme/DocPage/styles.module.css       |  7 ----
 .../src/theme/DocSidebar/index.tsx            | 24 ++++--------
 .../src/theme/DocSidebar/styles.module.css    |  5 ++-
 .../src/theme/IconArrow/index.tsx             | 22 +++++++++++
 .../src/theme/IconEdit/index.tsx              | 32 +++++++++++++++
 .../src/theme/IconMenu/index.tsx              | 39 +++++++++++++++++++
 .../src/theme/Navbar/index.tsx                | 18 +--------
 .../src/theme/icons/arrow.svg                 |  1 -
 .../docusaurus-theme-classic/src/types.d.ts   | 27 +++++++++++++
 13 files changed, 144 insertions(+), 72 deletions(-)
 create mode 100644 packages/docusaurus-theme-classic/src/theme/IconArrow/index.tsx
 create mode 100644 packages/docusaurus-theme-classic/src/theme/IconEdit/index.tsx
 create mode 100644 packages/docusaurus-theme-classic/src/theme/IconMenu/index.tsx
 delete mode 100644 packages/docusaurus-theme-classic/src/theme/icons/arrow.svg

diff --git a/packages/docusaurus-theme-classic/src/index.ts b/packages/docusaurus-theme-classic/src/index.ts
index ad7510a65559..fcbd564972a9 100644
--- a/packages/docusaurus-theme-classic/src/index.ts
+++ b/packages/docusaurus-theme-classic/src/index.ts
@@ -147,6 +147,9 @@ const swizzleAllowedComponents = [
   'Footer',
   'NotFound',
   'SearchBar',
+  'IconArrow',
+  'IconEdit',
+  'IconMenu',
   'hooks/useTheme',
   'prism-include-languages',
 ];
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx
index 3fc557a82515..688334f5a044 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx
@@ -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>
                 )}
diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
index 7df82eb00c72..080b8d4b5639 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
@@ -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>
                     )}
diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
index 187cbee809d3..5ab7bcd93d0e 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
@@ -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>
         )}
diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css
index 109738880870..a5a6755212df 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css
@@ -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;
   }
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
index fa7a51b8301e..f2f0f5a783d8 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
@@ -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({
               &times;
             </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>
   );
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css
index 3d42eeed526a..33a82edb9f57 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css
@@ -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 {
diff --git a/packages/docusaurus-theme-classic/src/theme/IconArrow/index.tsx b/packages/docusaurus-theme-classic/src/theme/IconArrow/index.tsx
new file mode 100644
index 000000000000..058a7ca1854d
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/IconArrow/index.tsx
@@ -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;
diff --git a/packages/docusaurus-theme-classic/src/theme/IconEdit/index.tsx b/packages/docusaurus-theme-classic/src/theme/IconEdit/index.tsx
new file mode 100644
index 000000000000..db220f85dd05
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/IconEdit/index.tsx
@@ -0,0 +1,32 @@
+/**
+ * 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
+      fill="currentColor"
+      height="1.2em"
+      width="1.2em"
+      preserveAspectRatio="xMidYMid meet"
+      role="img"
+      viewBox="0 0 40 40"
+      style={{
+        marginRight: '0.3em',
+        verticalAlign: 'sub',
+      }}
+      {...props}>
+      <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 IconArrow;
diff --git a/packages/docusaurus-theme-classic/src/theme/IconMenu/index.tsx b/packages/docusaurus-theme-classic/src/theme/IconMenu/index.tsx
new file mode 100644
index 000000000000..0fabc7231e79
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/IconMenu/index.tsx
@@ -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';
+import styles from '../DocSidebar/styles.module.css';
+
+const IconMenu = ({
+  width = 30,
+  height = 30,
+  ...restProps
+}: Props): JSX.Element => {
+  return (
+    <svg
+      aria-label="Menu"
+      className={styles.sidebarMenuIcon}
+      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;
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx
index cef3b688d3d9..a8bdef350d6f 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx
@@ -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
diff --git a/packages/docusaurus-theme-classic/src/theme/icons/arrow.svg b/packages/docusaurus-theme-classic/src/theme/icons/arrow.svg
deleted file mode 100644
index b30c53e17b8b..000000000000
--- a/packages/docusaurus-theme-classic/src/theme/icons/arrow.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/packages/docusaurus-theme-classic/src/types.d.ts b/packages/docusaurus-theme-classic/src/types.d.ts
index b2668f711b58..e31330f9b63b 100644
--- a/packages/docusaurus-theme-classic/src/types.d.ts
+++ b/packages/docusaurus-theme-classic/src/types.d.ts
@@ -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;
+}

From 5baa022300af023d3ad3dc2faca8db3cbb62bb2e Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Tue, 1 Dec 2020 17:24:36 +0100
Subject: [PATCH 2/3] apply review suggestion

---
 .../src/theme/IconEdit/index.tsx                | 17 +++++++++--------
 .../src/theme/IconEdit/styles.module.css        | 11 +++++++++++
 2 files changed, 20 insertions(+), 8 deletions(-)
 create mode 100644 packages/docusaurus-theme-classic/src/theme/IconEdit/styles.module.css

diff --git a/packages/docusaurus-theme-classic/src/theme/IconEdit/index.tsx b/packages/docusaurus-theme-classic/src/theme/IconEdit/index.tsx
index db220f85dd05..fa0ac4d472f4 100644
--- a/packages/docusaurus-theme-classic/src/theme/IconEdit/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/IconEdit/index.tsx
@@ -6,9 +6,13 @@
  */
 
 import React from 'react';
-import {Props} from '@theme/IconArrow';
+import clsx from 'clsx';
 
-const IconArrow = (props: Props): JSX.Element => {
+import {Props} from '@theme/IconEdit';
+
+import styles from './styles.module.css';
+
+const IconEdit = ({className, ...restProps}: Props): JSX.Element => {
   return (
     <svg
       fill="currentColor"
@@ -17,11 +21,8 @@ const IconArrow = (props: Props): JSX.Element => {
       preserveAspectRatio="xMidYMid meet"
       role="img"
       viewBox="0 0 40 40"
-      style={{
-        marginRight: '0.3em',
-        verticalAlign: 'sub',
-      }}
-      {...props}>
+      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>
@@ -29,4 +30,4 @@ const IconArrow = (props: Props): JSX.Element => {
   );
 };
 
-export default IconArrow;
+export default IconEdit;
diff --git a/packages/docusaurus-theme-classic/src/theme/IconEdit/styles.module.css b/packages/docusaurus-theme-classic/src/theme/IconEdit/styles.module.css
new file mode 100644
index 000000000000..03ffe1656410
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/IconEdit/styles.module.css
@@ -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;
+}

From 6d7e32f43a29aa7e6144f6f56806bf4b727aee39 Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Tue, 1 Dec 2020 17:30:18 +0100
Subject: [PATCH 3/3] fix IconMenu className

---
 .../docusaurus-theme-classic/src/theme/IconMenu/index.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/IconMenu/index.tsx b/packages/docusaurus-theme-classic/src/theme/IconMenu/index.tsx
index 0fabc7231e79..407325570f66 100644
--- a/packages/docusaurus-theme-classic/src/theme/IconMenu/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/IconMenu/index.tsx
@@ -7,17 +7,17 @@
 
 import React from 'react';
 import {Props} from '@theme/IconMenu';
-import styles from '../DocSidebar/styles.module.css';
 
 const IconMenu = ({
   width = 30,
   height = 30,
+  className,
   ...restProps
 }: Props): JSX.Element => {
   return (
     <svg
       aria-label="Menu"
-      className={styles.sidebarMenuIcon}
+      className={className}
       width={width}
       height={height}
       viewBox="0 0 30 30"