Button with Icon component

Question

I have a <Button /> component and an <Icon/> component.

I try to implement a button with an icon.

The Button.jsx story:

import React from "react";
import { storiesOf } from "@storybook/react";
import Button from "../components/Button";
import Icon from "../components/Icon/Index";
import { iconTypes } from "../components/Icon/Index";

storiesOf("Button/Primary", module)
    .add("With icon", () => (
        <Button><Icon type={iconTypes.arrowRight}/></Button>
    ))

That works fine but I would like the api for a Button with an icon to be-

<Button icon={icons.arrow}>Click Me</Button>

How can I achieve that?

The Icon.jsx story:

import React from "react";
import { storiesOf } from "@storybook/react";
import Icon from "../components/Icon/Index";
import { iconTypes } from "../components/Icon/Index";    

storiesOf("Icon", module)
    .add("Arrow Right", () => (
        <Icon type={iconTypes.arrowRight}>
        </Icon>
    ))
    .add("Arrow Left", () => (
        <Icon type={iconTypes.arrowLeft}>
        </Icon>
    ));

The <Button /> component:

import React from 'react';
import { css, cx } from 'emotion';

import colors from '../styles/colors';

export default function Button({
  children,
  ...props
}) {
    const mergedStyles = cx(
  // css
  );
  // other css stuff
  return (
    <button {...props} disabled={disabled} className={mergedStyles}>
      {children}
    </button>
  );

And <Icon /> component:

import React from "react";
import { css } from 'emotion';

import ArrowRight from "./arrow-right2.svg";
import ArrowLeft from "./arrow-left2.svg";

export const iconTypes = {
    arrowRight: 'ARROW_RIGHT',
    arrowLeft: 'ARROW_LEFT',
}

const iconSrc = {
    ARROW_RIGHT: ArrowRight,
    ARROW_LEFT: ArrowLeft,
}


const circleStyles = css({
    width: 24,
    height: 24,
    borderRadius: "50%",
    backgroundColor: "#f7f7f9",
    display: "flex",
    justifyContent: "center"
});


export default function Icon({ type }) {
    return (
         <div className={circleStyles}>
            <img src={iconSrc[type]} />
        </div>
    )
};

Any help would be appreciated.

Answer 1

    import React from 'react';
    import {css, cx} from 'emotion';
    import colors from '../styles/colors';

    //import your ICON component & make sure your path is right
    import Icon from "./../Icon";

    export default function Button({
      children,
      disabled,
      icon,
      ...props
    }) {

      const mergedStyles = cx(//your css);

      return (
          <button {...props} disabled={disabled} className={mergedStyles}>

            // If icon prop is provided then render ICON component
            {icon && <Icon type={icon}/>}

            //Other children
            {children}

          </button>
       );
    }

Answer 2

in render of Button, you can do something like that :

Button.js:

render(){
    const { icon } = this.props
    return(
        <Button>
            {icon && <Icon type={icon}/>}
        <Button>
    )
}