带图标组件的按钮

我有一个 <Button /> 组件和an <Icon/> 组件。

我尝试实现一个带有图标的按钮。

这个 Button.jsx 故事:

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>
    ))

这工作正常,但我想为一个图标按钮的api是-

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

这个 Icon.jsx 故事:

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>
    ));

这个 < 组成部分:

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>
  );

以及 <Icon /> 组成部分:

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>
    )
};

任何帮助都将不胜感激。