refactor: use only one close icon (#5487)

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

@@ -9,7 +9,7 @@ import React from 'react';
 import clsx from 'clsx';
 import {useThemeConfig, useAnnouncementBar} from '@docusaurus/theme-common';
 import {translate} from '@docusaurus/Translate';
-import IconCloseThick from '@theme/IconCloseThick';
+import IconClose from '@theme/IconClose';
 
 import styles from './styles.module.css';
 
@@ -49,7 +49,7 @@ function AnnouncementBar(): JSX.Element | null {
             message: 'Close',
             description: 'The ARIA label for close button of announcement bar',
           })}>
-          <IconCloseThick width={14} height={14} />
+          <IconClose width={14} height={14} strokeWidth={3.1} />
         </button>
       ) : null}
     </div>

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

@@ -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/IconClose';
+
+export default function IconClose({
+  width = 21,
+  height = 21,
+  color = 'currentColor',
+  strokeWidth = 1.2,
+  className,
+  ...restProps
+}: Props): JSX.Element {
+  return (
+    <svg viewBox="0 0 15 15" width={width} height={height} {...restProps}>
+      <g stroke={color} strokeWidth={strokeWidth}>
+        <path d="M.75.75l13.5 13.5M14.25.75L.75 14.25" />
+      </g>
+    </svg>
+  );
+}

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

@@ -1,28 +0,0 @@
-/**
- * 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/IconCloseThick';
-
-export default function IconCloseThick({
-  width = 20,
-  height = 20,
-  className,
-  ...restProps
-}: Props): JSX.Element {
-  return (
-    <svg
-      className={className}
-      viewBox="0 0 24 24"
-      width={width}
-      height={height}
-      fill="currentColor"
-      {...restProps}>
-      <path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z" />
-    </svg>
-  );
-}

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

@@ -1,28 +0,0 @@
-/**
- * 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/IconCloseThin';
-
-export default function IconCloseThin({
-  width = 20,
-  height = 20,
-  className,
-  ...restProps
-}: Props): JSX.Element {
-  return (
-    <svg
-      className={className}
-      viewBox="0 0 413.348 413.348"
-      width={width}
-      height={height}
-      fill="currentColor"
-      {...restProps}>
-      <path d="m413.348 24.354-24.354-24.354-182.32 182.32-182.32-182.32-24.354 24.354 182.32 182.32-182.32 182.32 24.354 24.354 182.32-182.32 182.32 182.32 24.354-24.354-182.32-182.32z" />
-    </svg>
-  );
-}

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

@@ -24,7 +24,7 @@ import {useActivePlugin} from '@theme/hooks/useDocs';
 import NavbarItem, {Props as NavbarItemConfig} from '@theme/NavbarItem';
 import Logo from '@theme/Logo';
 import IconMenu from '@theme/IconMenu';
-import IconCloseThin from '@theme/IconCloseThin';
+import IconClose from '@theme/IconClose';
 
 import styles from './styles.module.css';
 
@@ -180,9 +180,8 @@ function NavbarMobileSidebar({
           type="button"
           className="clean-btn navbar-sidebar__close"
           onClick={toggleSidebar}>
-          <IconCloseThin
-            width={20}
-            height={20}
+          <IconClose
+            color="var(--ifm-color-emphasis-600)"
             className={styles.navbarSidebarCloseSvg}
           />
         </button>

packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css

@@ -25,7 +25,3 @@ Hide toggle in small viewports
 .navbarSidebarToggle {
   margin-right: 1rem;
 }
-
-.navbarSidebarCloseSvg {
-  fill: var(--ifm-color-emphasis-600);
-}

packages/docusaurus-theme-classic/src/types.d.ts

@@ -708,18 +708,11 @@ declare module '@theme/IconMenu' {
   export default IconMenu;
 }
 
-declare module '@theme/IconCloseThick' {
+declare module '@theme/IconClose' {
   import type {ComponentProps} from 'react';
 
   export type Props = ComponentProps<'svg'>;
-  export default function IconCloseThick(props: Props): JSX.Element;
-}
-
-declare module '@theme/IconCloseThin' {
-  import type {ComponentProps} from 'react';
-
-  export type Props = ComponentProps<'svg'>;
-  export default function IconCloseThin(props: Props): JSX.Element;
+  export default function IconClose(props: Props): JSX.Element;
 }
 
 declare module '@theme/IconLanguage' {