create SvgIcon component

frontend/src/components/basics/SearchField.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-
+import SvgIcon, { Icon } from "./SvgIcon"
 /**
  * Custom search field component including a clear search functionality
  */
@@ -37,40 +37,18 @@ export default function SearchField({onSearchStringChanged} : SearchFieldProps){
             Clears search string on click
           */}
         <button 
-            className="absolute right-0 inset-y-0 flex items-center"
+            className="absolute right-0 inset-y-0 flex items-center -ml-1 mr-3"
             onClick = { () => changeSearchString("") }
         >
-            <svg
+            <SvgIcon
-            xmlns="http://www.w3.org/2000/svg"
+                icon = {Icon.X}
-            className="-ml-1 mr-3 h-6 w-6 text-gray-400 hover:text-gray-500"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            >
-            <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M6 18L18 6M6 6l12 12"
             />
-            </svg>
         </button>
         {/* Left icon: Looking glass */}
-        <div className="absolute left-0 inset-y-0 flex items-center">
+        <div className="absolute left-0 inset-y-0 flex items-center ml-3">
-            <svg
+            <SvgIcon
-            xmlns="http://www.w3.org/2000/svg"
+               icon = {Icon.LookingGlass}
-            className="ml-3 h-6 w-6 text-gray-400 hover:text-gray-500"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            >
-            <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
             />
-            </svg>
         </div>
     </div>
     )

frontend/src/components/basics/SvgIcon.tsx

@@ -0,0 +1,38 @@
+/**
+ * SVG Icon component
+ */
+
+/**
+ * Enum-like const object+type definition to define icons. 
+ * The string corresponds to the path definition of the icon
+ */
+export const Icon = {
+  LookingGlass: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z",
+  X: "M6 18L18 6M6 6l12 12"
+} as const;
+
+export type Icon = typeof Icon[keyof typeof Icon];
+
+type SvgIconProps = {
+    pathDefinition : string
+    icon : Icon
+}
+
+export default function SvgIcon({icon} : SvgIconProps){
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-6 w-6 text-gray-400 hover:text-gray-500"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            >
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d={icon}
+            />
+        </svg>
+    )
+}