chore: add icon components via svgr/cli

src/components/Navigation/Navigation.module.css

@@ -4,3 +4,10 @@
   gap: 16px;
   font-size: 14px;
 }
+
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+  width: 22px;
+  margin: 0 10px 0 0;
+}

src/components/Navigation/Navigation.tsx

@@ -2,6 +2,10 @@ import Link from "next/link";
 
 import styles from "./Navigation.module.css";
 
+import IconFilter from "@/components/Icons/Filter";
+import IconOverview from "@/components/Icons/Overview";
+import IconQuestion from "@/components/Icons/Question";
+import IconSearch from "@/components/Icons/Search";
 import { getAppName } from "@/lib/config";
 
 export function Navigation() {
@@ -10,14 +14,24 @@ export function Navigation() {
       <ul className={styles.list}>
         <li className={styles.item}>
           <Link href="/help-and-about-tech-radar">
+            <IconQuestion className={styles.icon} />
             How to use {getAppName()}?
           </Link>
         </li>
-        <li className={styles.item}>Filter</li>
         <li className={styles.item}>
-          <Link href="/overview">Technologies Overview</Link>
+          <IconFilter className={styles.icon} />
+          Filter
+        </li>
+        <li className={styles.item}>
+          <Link href="/overview">
+            <IconOverview className={styles.icon} />
+            Technologies Overview
+          </Link>
+        </li>
+        <li className={styles.item}>
+          <IconSearch className={styles.icon} />
+          Search
         </li>
-        <li className={styles.item}>Search</li>
       </ul>
     </nav>
   );