48 lines
No EOL
1.2 KiB
TypeScript
48 lines
No EOL
1.2 KiB
TypeScript
import { Icon } from "@mui/material";
|
|
import { makeStyles } from "@mui/styles";
|
|
|
|
const useStyles = makeStyles(() => ({
|
|
icon: {
|
|
display: "flex", // Ensure flexbox for centering
|
|
justifyContent: "center", // Center horizontally
|
|
alignItems: "center", // Center vertically
|
|
margin: "1px",
|
|
overflow: "hidden", // Prevent image overflow
|
|
},
|
|
img: {
|
|
maxHeight: "100%", // Fit within container height
|
|
maxWidth: "100%", // Fit within container width
|
|
width: "auto", // Maintain aspect ratio
|
|
height: "auto", // Maintain aspect ratio
|
|
},
|
|
}));
|
|
|
|
interface Props {
|
|
src?: string;
|
|
alt?: string;
|
|
style?: any;
|
|
iconHeight?: number | string;
|
|
iconWidth?: number | string;
|
|
}
|
|
|
|
export function ImgIcon(props: Props) {
|
|
const { src, alt, style, iconHeight, iconWidth } = props;
|
|
const classes = useStyles();
|
|
|
|
if (!src) return null;
|
|
|
|
return (
|
|
<Icon
|
|
className={classes.icon}
|
|
style={{ height: iconHeight, width: iconWidth }}
|
|
>
|
|
<img
|
|
alt={alt}
|
|
className={classes.img}
|
|
src={src}
|
|
color="transparent"
|
|
style={style}
|
|
/>
|
|
</Icon>
|
|
);
|
|
} |