From 8b44da35abd87de9be851e15b864515ed39ea3a5 Mon Sep 17 00:00:00 2001
From: Mathias Schopmans <mathias.schopmans@aoe.com>
Date: Mon, 12 Feb 2024 16:16:27 +0100
Subject: [PATCH] chore: add icon components via svgr/cli

---
 .gitignore                                    |  5 +++--
 package-lock.json                             |  1 +
 package.json                                  |  4 +++-
 .../Navigation/Navigation.module.css          |  7 +++++++
 src/components/Navigation/Navigation.tsx      | 20 ++++++++++++++++---
 src/icons/back.svg                            |  4 +---
 src/icons/blip_changed.svg                    |  1 +
 src/icons/blip_default.svg                    |  1 +
 src/icons/blip_new.svg                        |  1 +
 src/icons/close.svg                           |  1 +
 src/icons/filter.svg                          |  1 +
 src/icons/overview.svg                        |  1 +
 src/icons/pie.svg                             |  1 +
 src/icons/question.svg                        |  1 +
 src/icons/search.svg                          |  1 +
 15 files changed, 41 insertions(+), 9 deletions(-)
 create mode 100644 src/icons/blip_changed.svg
 create mode 100644 src/icons/blip_default.svg
 create mode 100644 src/icons/blip_new.svg
 create mode 100644 src/icons/close.svg
 create mode 100644 src/icons/filter.svg
 create mode 100644 src/icons/overview.svg
 create mode 100644 src/icons/pie.svg
 create mode 100644 src/icons/question.svg
 create mode 100644 src/icons/search.svg

diff --git a/.gitignore b/.gitignore
index fd3dbb5..b6eac3f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,8 +13,8 @@
 /.next/
 /out/
 
-# production
-/build
+# generated
+/src/components/Icons/
 
 # misc
 .DS_Store
@@ -34,3 +34,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
diff --git a/package-lock.json b/package-lock.json
index b020976..c86ce0d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
     "": {
       "name": "aoe-next-techradar",
       "version": "0.1.0",
+      "hasInstallScript": true,
       "dependencies": {
         "clsx": "^2.1.0",
         "next": "14.1.0",
diff --git a/package.json b/package.json
index c4b9be1..35da2ad 100644
--- a/package.json
+++ b/package.json
@@ -4,11 +4,13 @@
   "private": true,
   "scripts": {
     "dev": "next dev --turbo",
+    "build:icons": "npx @svgr/cli --typescript --no-prettier --out-dir src/components/Icons -- src/icons",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
     "fix": "prettier . --write",
-    "prepare": "husky"
+    "prepare": "husky",
+    "postinstall": "npm run build:icons"
   },
   "dependencies": {
     "clsx": "^2.1.0",
diff --git a/src/components/Navigation/Navigation.module.css b/src/components/Navigation/Navigation.module.css
index 2633c7d..639c8e6 100644
--- a/src/components/Navigation/Navigation.module.css
+++ b/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;
+}
diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
index a36c664..cf6774f 100644
--- a/src/components/Navigation/Navigation.tsx
+++ b/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>
   );
diff --git a/src/icons/back.svg b/src/icons/back.svg
index 9cf8150..92edf16 100644
--- a/src/icons/back.svg
+++ b/src/icons/back.svg
@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
-  style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"
-  viewBox="0 0 30 21"><path d="M4.012 11.427h24.704a1.134 1.134 0 0 0 0-2.267H3.729l7.224-7.225A1.133 1.133 0 1 0 9.35.332L.332 9.35a1.134 1.134 0 0 0-.106 1.481c.099.182.245.335.423.439l8.701 8.701a1.133 1.133 0 1 0 1.603-1.603l-6.941-6.941Z" style="fill:#fff"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421" viewBox="0 0 30 21"><path d="M4.012 11.427h24.704a1.134 1.134 0 0 0 0-2.267H3.729l7.224-7.225A1.133 1.133 0 1 0 9.35.332L.332 9.35a1.134 1.134 0 0 0-.106 1.481c.099.182.245.335.423.439l8.701 8.701a1.133 1.133 0 1 0 1.603-1.603l-6.941-6.941Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/src/icons/blip_changed.svg b/src/icons/blip_changed.svg
new file mode 100644
index 0000000..94cacfd
--- /dev/null
+++ b/src/icons/blip_changed.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect width="12" height="12" x="2" y="2" fill="#FFF" rx="3" transform="rotate(-45 8 8)"/></svg>
\ No newline at end of file
diff --git a/src/icons/blip_default.svg b/src/icons/blip_default.svg
new file mode 100644
index 0000000..049a4e3
--- /dev/null
+++ b/src/icons/blip_default.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" fill="#FFF"/></svg>
\ No newline at end of file
diff --git a/src/icons/blip_new.svg b/src/icons/blip_new.svg
new file mode 100644
index 0000000..acc3c70
--- /dev/null
+++ b/src/icons/blip_new.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><path fill="#FFF" d="m.247 10.212 5.02-8.697a2 2 0 0 1 3.465 0l5.021 8.697a2 2 0 0 1-1.732 3H1.98a2 2 0 0 1-1.732-3z"/></svg>
\ No newline at end of file
diff --git a/src/icons/close.svg b/src/icons/close.svg
new file mode 100644
index 0000000..a0947af
--- /dev/null
+++ b/src/icons/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421" viewBox="0 0 22 22"><path d="m18.703 1.405-7.675 7.732-7.674-7.732c-.54-.54-1.405-.54-1.892 0-.54.541-.54 1.406 0 1.892l7.675 7.731-7.732 7.675c-.54.54-.54 1.405 0 1.892.541.54 1.406.54 1.892 0l7.731-7.675 7.675 7.675c.54.54 1.405.54 1.892 0 .487-.541.54-1.405 0-1.892l-7.675-7.675 7.675-7.674c.54-.54.54-1.405 0-1.892-.484-.54-1.352-.54-1.892-.057Z" style="fill:#029df7"/></svg>
\ No newline at end of file
diff --git a/src/icons/filter.svg b/src/icons/filter.svg
new file mode 100644
index 0000000..e3caec5
--- /dev/null
+++ b/src/icons/filter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 1000 1000"><path fill="#029DF7" d="M981.4 50.7c-15.5-29.2-39.5-43-72.2-43H87.4c-43 0-72.2 25.8-77.4 67.1 0 3.4 1.7 10.3 3.4 12C121.8 210.6 230.1 331 340.1 453c5.2 5.2 6.9 10.3 6.9 18.9v338.7c0 49.9 24.1 87.7 68.8 110 30.9 15.5 63.6 25.8 94.6 39.5 25.8 10.3 49.9 20.6 75.6 29.2 25.8 8.6 49.9-3.4 58.5-25.8 3.4-8.6 5.2-20.6 5.2-30.9V473.5c0-6.9 1.7-12 6.9-17.2 39.5-44.7 80.8-89.4 120.4-134.1 68.8-77.4 139.3-154.7 208-232.1 1.7-1.7 5.2-6.9 5.2-10.3-3.6-10.2-3.6-20.5-8.8-29.1zM878.2 95.4C792.3 190 708 284.6 622.1 379.1c-1.7 1.7-22.4 22.4-48.1 46.4v476.2c-3.4-1.7-6.9-1.7-8.6-3.4-36.1-13.8-72.2-29.2-108.3-43-22.4-8.6-32.7-25.8-32.7-49.9V425.5c-24.1-24.1-44.7-43-46.4-44.7-89.4-96.3-175.4-194.3-263.1-290.6-1.7-1.7-3.4-3.4-5.2-6.9h778.8c-5.1 5.3-6.8 8.7-10.3 12.1z"/></svg>
\ No newline at end of file
diff --git a/src/icons/overview.svg b/src/icons/overview.svg
new file mode 100644
index 0000000..4112a51
--- /dev/null
+++ b/src/icons/overview.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="21"><path fill="#029DF7" fill-rule="evenodd" d="M2.667 0C1.215 0 0 1.215 0 2.667v15.11A2.232 2.232 0 0 0 2.222 20h13.111c.35 0 .667-.317.667-.667V4.667c-.002-.391-.286-.67-.667-.667C14.693 4 14 3.308 14 2.667s.692-1.334 1.333-1.334c.352.005.667-.314.667-.666 0-.352-.315-.672-.667-.667H2.667Zm0 1.333h10.368c-.233.395-.368.851-.368 1.334 0 .482.135.938.368 1.333H2.667c-.642 0-1.334-.692-1.334-1.333s.692-1.334 1.334-1.334ZM1.333 4.965c.394.233.852.368 1.334.368h12v13.334H2.222a.873.873 0 0 1-.889-.89V4.966Zm2.445 2.813a.667.667 0 0 0 0 1.333h8.444a.667.667 0 0 0 0-1.333H3.778Zm0 3.555a.667.667 0 0 0 0 1.334h8.444a.667.667 0 0 0 0-1.334H3.778Zm0 3.556a.667.667 0 0 0 0 1.333h8.444a.667.667 0 0 0 0-1.333H3.778Z"/></svg>
\ No newline at end of file
diff --git a/src/icons/pie.svg b/src/icons/pie.svg
new file mode 100644
index 0000000..42a0124
--- /dev/null
+++ b/src/icons/pie.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22"><path fill="#029DF7" fill-rule="evenodd" d="M9.332 0h-.644v2.607C3.843 2.941 0 6.977 0 11.907c0 5.145 4.186 9.331 9.332 9.331 4.927 0 8.965-3.843 9.297-8.688h2.607v-.644C21.236 5.341 15.896 0 9.332 0Zm0 19.95c-4.437 0-8.045-3.608-8.045-8.045 0-4.219 3.263-7.69 7.4-8.019v8.663h8.663c-.33 4.135-3.798 7.4-8.018 7.4Zm9.33-8.688H9.976V1.306c5.343.321 9.633 4.613 9.954 9.956h-1.268Z"/></svg>
\ No newline at end of file
diff --git a/src/icons/question.svg b/src/icons/question.svg
new file mode 100644
index 0000000..eb8eb09
--- /dev/null
+++ b/src/icons/question.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23"><g fill="none" fill-rule="evenodd"><path stroke="#029DF7" stroke-width="1.5" d="M11.762 1.525A10.223 10.223 0 0 0 1.525 11.762 10.223 10.223 0 0 0 11.762 22 10.223 10.223 0 0 0 22 11.762 10.223 10.223 0 0 0 11.762 1.525Z"/><path fill="#029DF7" d="M11.762 17.45a1.224 1.224 0 0 1-1.228-1.229c0-.682.546-1.229 1.228-1.229.683 0 1.23.547 1.23 1.23 0 .682-.547 1.228-1.23 1.228Zm2.775-6.916a5.038 5.038 0 0 1-.455.524c-.113.113-.25.227-.41.41a3.808 3.808 0 0 0-.432.432 3.516 3.516 0 0 0-.296.319 1.485 1.485 0 0 0-.273.978v.706h-1.775v-.956a2.018 2.018 0 0 1 .16-.955c.182-.296.385-.568.66-.818l1.137-1.138c.25-.272.363-.614.363-.979a1.34 1.34 0 0 0-.386-.955 1.394 1.394 0 0 0-.979-.386 1.373 1.373 0 0 0-1 .364c-.273.25-.433.614-.456.979H8.484a3.222 3.222 0 0 1 1.092-2.184 3.492 3.492 0 0 1 2.344-.796 3.317 3.317 0 0 1 2.275.75c.591.5.887 1.23.887 2.14-.02.563-.203 1.132-.545 1.565Z"/></g></svg>
\ No newline at end of file
diff --git a/src/icons/search.svg b/src/icons/search.svg
new file mode 100644
index 0000000..e515fcf
--- /dev/null
+++ b/src/icons/search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path fill="#029DF7" fill-rule="evenodd" d="m19.602 17.679-4.014-4.013c2.445-3.368 2.151-8.107-.886-11.143A8.585 8.585 0 0 0 8.612 0a8.585 8.585 0 0 0-6.09 2.523 8.613 8.613 0 0 0 0 12.181 8.587 8.587 0 0 0 6.09 2.523c1.776 0 3.55-.546 5.053-1.638l4.013 4.013c.265.265.613.398.962.398a1.36 1.36 0 0 0 .962-2.322ZM3.869 13.357a6.717 6.717 0 0 1 0-9.489 6.665 6.665 0 0 1 4.744-1.965c1.792 0 3.477.698 4.744 1.965a6.717 6.717 0 0 1 0 9.489 6.667 6.667 0 0 1-4.744 1.965 6.664 6.664 0 0 1-4.744-1.965Z"/></svg>
\ No newline at end of file