SOLID React article, code snippet 3: Button sub component

solid_react-003-IconButton.tsx

import { Button, ButtonProps } from './Button';

interface IconButtonProps extends Omit<ButtonProps, 'icon'> {
  iconStart?: React.ReactNode;
  iconEnd?: React.ReactNode;
}

export const IconButton: React.FunctionComponent<IconButtonProps> = ({
  children,
  iconStart,
  iconEnd,
  ...props
}) => {
  return (
    <Button {...props}>
      <span className="IconButtonContent">
        {!!iconStart && (
          <span className="IconButtonContentNode">{iconStart}</span>
        )}
        <span className="IconButtonContentNode">{children}</span>
        {!!iconEnd && <span className="IconButtonContentNode">{iconEnd}</span>}
      </span>
    </Button>
  );
};