glide-design-system/src/lib/components/iconButton/IconButton.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import styles from "./IconButoon.module.css";

function IconButton({ src, style,variant,iconStyle,id,name }) {
  const combinedStyle = {
    width:
      variant === "large"
        ? "55px"
        : variant === "small"
        ? "35px"
        : variant === "medium"
        ? "45px"
        : "45px",
    height:
      variant === "large"
        ? "55px"
        : variant === "small"
        ? "35px"
        : variant === "medium"
        ? "45px"
        : "45px",
        borderRadius: "50%",
        backgroundColor: "#eee",
    ...style,
  };

  const iconStyles = {
    width:
      variant === "large"
        ? "40px"
        : variant === "small"
        ? "20px"
        : variant === "medium"
        ? "30px"
        :"30px",
    height:
      variant === "large"
        ? "40px"
        : variant === "small"
        ? "20px"
        : variant === "medium"
        ? "30px"
        : "30px",
        ...iconStyle
  };
  return (
    <div id={id?id:''} name={name?name:''} className={`${styles.iconButtonContainer}`} style={combinedStyle}>
      <img
        style={iconStyles}
        className={`${styles.iconImg}`}
        alt="iconImage"
        src={src}
        
      />
    </div>
  );
}
export default IconButton;