SOLID React article, code snippet 2: Button component with iconStart and iconEnd

solid_react-002-ButtonV2.tsx

interface ButtonProps
  extends React.PropsWithChildren,
    React.HTMLAttributes<HTMLButtonElement> {
  /**
   * @deprecated Use `iconStart` instead
   */
  icon?: React.ReactNode;
  iconStart?: React.ReactNode;
  iconEnd?: React.ReactNode;
}

export const Button: React.FunctionComponent<ButtonProps> = ({
  children,
  icon,
  iconStart = icon, // Fallback to `icon` if not provided
  iconEnd,
  ...props
}) => {
  return (
    <button {...props} className="Button">
      <span className="ButtonContent">
        {iconStart && <span className="ButtonContentNode">{iconStart}</span>}
        <span className="ButtonContentNode">{children}</span>
        {iconEnd && <span className="ButtonContentNode">{iconEnd}</span>}
      </span>
    </button>
  );
};