feat(board): allow to set icon color of widgets (#2228)

Co-authored-by: Andre Silva <asilva01@acuitysso.com>

packages/ui/src/components/masked-or-normal-image.tsx

@@ -0,0 +1,55 @@
+import { Image } from "@mantine/core";
+import type { MantineColor } from "@mantine/core";
+import combineClasses from "clsx";
+import type { Property } from "csstype";
+
+import { MaskedImage } from "./masked-image";
+
+interface MaskedOrNormalImageProps {
+  imageUrl: string;
+  hasColor?: boolean;
+  color?: MantineColor;
+  alt?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  fit?: Property.ObjectFit;
+  maskSize?: Property.MaskSize;
+  maskRepeat?: Property.MaskRepeat;
+  maskPosition?: Property.MaskPosition;
+}
+
+export const MaskedOrNormalImage = ({
+  imageUrl,
+  hasColor = true,
+  color = "iconColor",
+  alt,
+  style,
+  className,
+  fit = "contain",
+  maskSize = "contain",
+  maskRepeat = "no-repeat",
+  maskPosition = "center",
+}: MaskedOrNormalImageProps) => {
+  return hasColor ? (
+    <MaskedImage
+      imageUrl={imageUrl}
+      color={color}
+      alt={alt}
+      className={combineClasses("masked-image", className)}
+      maskSize={maskSize}
+      maskRepeat={maskRepeat}
+      maskPosition={maskPosition}
+      style={{
+        ...style,
+      }}
+    />
+  ) : (
+    <Image
+      className={combineClasses("normal-image", className)}
+      src={imageUrl}
+      alt={alt}
+      fit={fit}
+      style={{ ...style }}
+    />
+  );
+};