Button with onhover and function paramter

Man kann eine Funktion als Parameter dem button übergeben, sodass er diese ausführt, sobald auf ihn geklickt wird

projekt/src/components/Button.jsx

@@ -3,26 +3,37 @@ import "../App.css"
 export default function Button(p) {
 
     let text = p.text;
-    let paddingY = p.paddingY, paddingX = p.paddingX;
     let width = p.width, height = p.height;
-    let color = p.color;
+    let iconHTML = p.icon;
+    let iconWidth = p.iconWidth, iconHeight = p.iconHeight;
+    let onClick = p.onClick;
 
-    if (paddingY == null) paddingY = 10;
-    if (paddingX == null) paddingX = 20;
     if (height == null) height = 50;
     if (width == null) width = 100;
+    if (iconWidth == null) iconWidth = 50;
+    if (iconHeight == null) iconHeight = 50;
+    if (onClick == null) onClick = () => {};
 
+    if (iconHTML != null) {
+        let split = iconHTML.split("fill=");
+        split[1] = "fill=" + split[1];
+        split[0] += " width=" + iconWidth + " height=" + iconHeight + " ";
+        iconHTML = split[0] + split[1]
+    } else {
+        iconHTML = "";
+    }
 
     return (
-        <button className={"default-button round-border font font-middle"}
-                style={{
-                    paddingTop: paddingY,
-                    paddingBottom: paddingY,
-                    paddingLeft: paddingX,
-                    paddingRight: paddingX,
-                    width: width,
-                    height: height,
-                    color: color
-                }}>{text}</button>
+        <>
+            <button className={"round-border button font font-middle"}
+                    style={{
+                        width: width,
+                        height: height,
+                    }}
+                    onClick={onClick}>
+                {text}
+                <div dangerouslySetInnerHTML={{__html: iconHTML}}/>
+            </button>
+        </>
     );
-}
+}