Button in react, with icon component

react-btn-w-icon.jsx

import React, { ReactNode } from 'react';

type ButtonVariants = 'orange' | 'light';

interface ButtonProps {
  children: ReactNode;
  variant?: ButtonVariants;
  icon?: ReactNode;
  clickFn?: () => any;
}

export const Button = ({
  children,
  variant = 'orange',
  icon,
  clickFn,
}: ButtonProps) => {
  return (
    <button
      data-variant={variant}
      onClick={clickFn}>
      {icon && (
        <div>{icon}</div>
      )}
      <span>{children}</span>
    </button>
  );
};

// Could be a stateful component!
export const PhoneIcon = () => {
  return (
    <div
      style={{
        paddingTop: '100%',
      }}>
      <svg
        xmlns='http://www.w3.org/2000/svg'
        viewBox='0 0 14 14'>
        <path
          fill='#0E0D10'
          d='M9.33393036,9.94970551 L10.5394662,8.74368327 C10.8712045,8.41593074 11.3648915,8.31462076 11.7988207,8.48524993 L13.2680675,9.07210897 C13.7069536,9.25032817 13.9956679,9.67507941 14,10.1489145 L14,12.8409285 C13.9974752,13.1594561 13.8650558,13.4631423 13.6333992,13.6816786 C13.4017425,13.9002149 13.0909361,14.0146515 12.7729367,13.9984944 C2.4774451,13.3577951 0.400048473,4.63567002 0.00717294391,1.29757275 C-0.0297156879,0.966007658 0.0768403201,0.634481833 0.299982102,0.386560794 C0.523123884,0.138639754 0.841564165,-0.00202533507 1.17503582,0 L3.77447254,0 C4.2490273,0.00142728952 4.67508413,0.291262819 4.85084385,0.73224983 L5.43746621,2.20208943 C5.61378862,2.63474659 5.51416176,3.13096128 5.18451895,3.46195195 L3.97898309,4.66797419 C3.97898309,4.66797419 4.67324258,9.3682305 9.33393036,9.94970551 Z'
        />
      </svg>
    </div>
  );
};

// Button using the component and passing the icon component as a prop
export const Component = () => {
  function handleButtonClick(): void {
    console.log('clicked!');
  }

  return (
    <Button
      clickFn={() => handleButtonClick()}
      variant='orange'
      icon={<PhoneIcon />}>
      Button Text
    </Button>
  );
};