@material-ui/icons#SvgIconComponent TypeScript Examples

The following examples show how to use @material-ui/icons#SvgIconComponent. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: useChangeMenuIcon.tsx    From max-todos with MIT License 5 votes vote down vote up 
export default function useChangeMenuIcon(): SvgIconComponent {
  const Icon: SvgIconComponent = () =>
    useMediaQuery("(max-width: 768px)") ? <MoreVert /> : <MoreHoriz />;
  return Icon;
}
Example #2
Source File: MoreMenu.tsx    From max-todos with MIT License 4 votes vote down vote up 
MoreMenu = () => {
  const [anchorEl, setAnchorEl] = useState<
    (EventTarget & HTMLButtonElement) | null
  >(null);
  const [deleteOpen, setDeleteOpen] = useState(false);
  const open = Boolean(anchorEl);
  const MenuIcon = useChangeMenuIcon();
  const { todos, deleteAll } = useContext(MainContext)!;

  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
    setAnchorEl(e.currentTarget);
  const handleClose = () => setAnchorEl(null);

  interface Option {
    name: string;
    iconColor:
      | "error"
      | "action"
      | "inherit"
      | "disabled"
      | "primary"
      | "secondary"
      | undefined;
    textColor:
      | "error"
      | "inherit"
      | "primary"
      | "secondary"
      | "initial"
      | "textPrimary"
      | "textSecondary"
      | undefined;
    disabled: boolean;
    icon: SvgIconComponent;
    method: () => void;
  }

  const options: Option[] = [
    {
      name: "Delete All",
      iconColor: "error",
      textColor: "error",
      disabled: todos.length === 0,
      icon: DeleteSweepIcon,
      method: () => {
        handleClose();
        setDeleteOpen(true);
      },
    },
  ];

  return (
    <div>
      <IconButton
        aria-label="more"
        aria-controls="long-menu"
        aria-haspopup="true"
        onClick={handleClick}
        color="inherit"
      >
        <MenuIcon />
      </IconButton>
      <Menu
        id="long-menu"
        anchorEl={anchorEl}
        keepMounted
        open={open}
        onClose={handleClose}
        PaperProps={{
          style: {
            width: "20ch",
          },
        }}
      >
        {options.map((option) => (
          <MenuItem
            key={option.name}
            disabled={option.disabled}
            onClick={option.method}
          >
            <option.icon color={option.iconColor} /> &nbsp;
            <Typography color={option.textColor}>{option.name}</Typography>
          </MenuItem>
        ))}
      </Menu>
      <DeleteAllConfirm
        yes={() => {
          setDeleteOpen(false);
          setTimeout(() => deleteAll(), 200);
        }}
        open={deleteOpen}
        close={() => setDeleteOpen(false)}
      />
    </div>
  );
}