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

packages/docusaurus-theme-classic/src/index.ts

@@ -147,6 +147,9 @@ const swizzleAllowedComponents = [
   'Footer',
   'NotFound',
   'SearchBar',
+  'IconArrow',
+  'IconEdit',
+  'IconMenu',
   'hooks/useTheme',
   'prism-include-languages',
 ];

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
+                    <IconEdit />
-                      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>
                     Edit this page
                   </a>
                 )}

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
+                        <IconEdit />
-                          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>
                         Edit this page
                       </a>
                     )}

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>
         )}

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;
   }

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({
               ×
             </span>
           ) : (
-            <svg
+            <IconMenu
-              aria-label="Menu"
               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>
   );

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 {

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;

packages/docusaurus-theme-classic/src/theme/IconEdit/index.tsx

@@ -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;

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;
+}

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';
+
+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;

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
+              <IconMenu />
-                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>
             </div>
           )}
           <Logo

packages/docusaurus-theme-classic/src/theme/icons/arrow.svg

@@ -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>

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;
+}