feat: support for image in button

examples/web/react/app.tsx

@@ -28,6 +28,12 @@ export const App = () => {
     return (
         <>
             <Button text={getText()} onClick={onClick} />
+            <Button
+                text={getText()}
+                image={require("../res/pause.svg")}
+                imageAlt="tobias"
+                onClick={onClick}
+            />
             <Info pairs={pairs()} />
         </>
     );

examples/web/react/components/button/button.css

@@ -66,8 +66,7 @@
 
 .button.simple > img {
     margin-right: 6px;
-    margin-top: 2px;
-    vertical-align: top;
+    vertical-align: middle;
     width: 13px;
 }
 
@@ -83,6 +82,11 @@
     width: 38px;
 }
 
+.button.simple > span {
+    vertical-align: middle;
+    display: inline-block;
+}
+
 .button.simple.no-text > img {
     margin-right: 0px;
     margin-top: 0px;

examples/web/react/components/button/button.tsx

@@ -4,6 +4,8 @@ import "./button.css";
 
 type ButtonProps = {
     text: string;
+    image?: string;
+    imageAlt?: string;
     size?: string;
     style?: string[];
     onClick?: () => void;
@@ -11,17 +13,26 @@ type ButtonProps = {
 
 export const Button: FC<ButtonProps> = ({
     text,
+    image,
+    imageAlt,
     size = "small",
     style = ["simple", "border"],
     onClick
 }) => {
     const classes = () => ["button", size, ...style].join(" ");
     const _onClick = () => (onClick ? onClick() : undefined);
-    return (
+    const buttonSimple = () => (
         <span className={classes()} onClick={_onClick}>
             {text}
         </span>
     );
+    const buttonImage = () => (
+        <span className={classes()} onClick={_onClick}>
+            <img src={image} alt={imageAlt} />
+            <span>{text}</span>
+        </span>
+    );
+    return image ? buttonImage() : buttonSimple();
 };
 
 export default Button;