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

Co-authored-by: Joshua Chen <[email protected]>

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

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

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

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

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

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

packages/docusaurus-theme-classic/src/theme/IconHome/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/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>
+  );
+}