replace search icon for guides

website/src/components/quickstartTOC/index.js

@@ -6,6 +6,7 @@ import clsx from "clsx";
 import style from "./styles.module.css";
 import { useLocation, useHistory } from "@docusaurus/router";
 import queryString from "query-string";
+import getSvgIcon from "../../utils/get-svg-icon";
 
 function QuickstartTOC() {
   const history = useHistory();
@@ -199,28 +200,30 @@ function QuickstartTOC() {
 
     if (tocListStyles.display === "none") {
       tocList.style.display = "block";
-      tocMenuBtn.querySelector("i").style.transform = "rotate(0deg)";
+      tocMenuBtn.querySelector("svg").style.transform = "rotate(0deg)";
     } else {
       tocList.style.display = "none";
-      tocMenuBtn.querySelector("i").style.transform = "rotate(-90deg)";
+      tocMenuBtn.querySelector("svg").style.transform = "rotate(-90deg)";
     }
   };
 
   return (
     <>
-    <a onClick={handleTocMenuClick} className={style.toc_menu_btn}>Menu <i className="fa-solid fa-caret-down"></i></a>
-    <ul className={style.tocList}>
-      {tocData.map((step) => (
-        <li
-          key={step.id}
-          data-step={step.stepNumber}
-          className={clsx(style.tocItem)}
-          onClick={handleTocClick}
-        >
-          <span>{step.stepNumber}</span> {step.title}
-        </li>
-      ))}
-    </ul>
+      <a onClick={handleTocMenuClick} className={style.toc_menu_btn}>
+        Menu {getSvgIcon("fa-caret-down")}
+      </a>
+      <ul className={style.tocList}>
+        {tocData.map((step) => (
+          <li
+            key={step.id}
+            data-step={step.stepNumber}
+            className={clsx(style.tocItem)}
+            onClick={handleTocClick}
+          >
+            <span>{step.stepNumber}</span> {step.title}
+          </li>
+        ))}
+      </ul>
     </>
   );
 }

website/src/components/quickstartTOC/styles.module.css

@@ -160,11 +160,21 @@ html[data-theme="dark"] .stepWrapper[data-step="1"] a.nextButton {
     display: none;
 }
 
-.toc_menu_btn i {
+.toc_menu_btn i, .toc_menu_btn svg {
     transform: rotate(-90deg);
     vertical-align: middle;
 }
 
+.toc_menu_btn svg {
+  width: 10px;
+  fill: var(--ifm-link-color);
+}
+
+.toc_menu_btn:hover svg {
+  width: 10px;
+  fill: var(--ifm-link-hover-color);
+}
+
 @media (max-width: 996px) {
     .tocList {
         width: 100%;

website/src/components/searchInput/index.js

@@ -1,5 +1,6 @@
 import React from "react";
 import styles from "./styles.module.css";
+import getSvgIcon from "../../utils/get-svg-icon";
 
 const SearchInput = ({
   value,
@@ -9,7 +10,8 @@ const SearchInput = ({
 }) => {
   return (
     <label htmlFor="search-input" className={styles.inputContainer}>
-      <i className="fa-regular fa-magnifying-glass"></i>
+      {/* <!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --> */}
+      {getSvgIcon("fa-magnifying-glass")}
       <input
         type="text"
         value={value}

website/src/components/searchInput/styles.module.css

@@ -2,8 +2,6 @@
   padding: 0 1rem;
   border-radius: 0.3125rem;
   border: 2px solid var(--navy-200-c-6-ccd-4, #C6CCD4);
-
-
 }
 
 .inputContainer:active, .input:focus {
@@ -28,3 +26,10 @@
   background: #1b1b1d;
   color: #e3e3e3;
 }
+
+.inputContainer > svg {
+  fill: var(--ifm-font-color-base);
+  width: 16px;
+  height: 16px;
+  margin-bottom: -2px;
+}

website/src/utils/get-svg-icon.js

@@ -52,6 +52,18 @@ export default function getSvgIcon(icon) {
           <path d="M7.4 273.4C2.7 268.8 0 262.6 0 256s2.7-12.8 7.4-17.4l176-168c9.6-9.2 24.8-8.8 33.9 .8s8.8 24.8-.8 33.9L83.9 232 424 232c13.3 0 24 10.7 24 24s-10.7 24-24 24L83.9 280 216.6 406.6c9.6 9.2 9.9 24.3 .8 33.9s-24.3 9.9-33.9 .8l-176-168z" />
         </svg>
       );
+    case icon.includes("fa-caret-down"):
+      return (
+        <svg viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg">
+          <path d="m137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8l-256 .1c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z" />
+        </svg>
+      );
+    case icon.includes("fa-magnifying-glass"):
+      return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+          <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z" />
+        </svg>
+      );
     default:
       return "";
   }