packages/ringcentral-widgets/components/CircleButton/index.js
function CircleButton(props) {
  let icon;
  if (props.icon) {
    const Icon = props.icon;
    icon = (
      <Icon
        className={classnames(styles.icon, props.iconClassName)}
        width={props.iconWidth}
        height={props.iconHeight}
        x={props.iconX}
        y={props.iconY}
      />
    );
  }
  const circleClass = classnames(
    styles.circle,
    !props.showBorder && styles.noBorder,
  );
  const onClick = props.disabled ? null : props.onClick;
  return (
    <svg
      data-sign={props.dataSign}
      xmlns="http://www.w3.org/2000/svg"
      className={classnames(styles.btnSvg, props.className)}
      viewBox="0 0 500 500"
      onClick={(e) => {
        if ((e.target && e.target.tagName !== 'svg') && onClick) {
          onClick(e);
        }
      }}
      width={props.width}
      height={props.height}
      x={props.x}
      y={props.y}
    >
      {props.title ? <title>{props.title}</title> : null}
      <g
        className={styles.btnSvgGroup}
      >
        <circle
          className={circleClass}
          cx="250"
          cy="250"
          r="245"
        />
        {icon}
        {
          props.showRipple
          ? <circle
            className={styles.ripple}
            cx="250"
            cy="250"
            r="245"
            />
          : null
        }
      </g>
    </svg>
  );
}
function CircleButton(props) {
  let icon;
  if (props.icon) {
    const Icon = props.icon;
    icon = (
      <Icon
        className={classnames(styles.icon, props.iconClassName)}
        width={props.iconWidth}
        height={props.iconHeight}
        x={props.iconX}
        y={props.iconY}
      />
    );
  }
  const circleClass = classnames(
    styles.circle,
    !props.showBorder && styles.noBorder,
  );
  const onClick = props.disabled ? null : props.onClick;
  return (
    <svg
      data-sign={props.dataSign}
      xmlns="http://www.w3.org/2000/svg"
      className={classnames(styles.btnSvg, props.className)}
      viewBox="0 0 500 500"
      onClick={(e) => {
        if ((e.target && e.target.tagName !== 'svg') && onClick) {
          onClick(e);
        }
      }}
      width={props.width}
      height={props.height}
      x={props.x}
      y={props.y}
    >
      {props.title ? <title>{props.title}</title> : null}
      <g
        className={styles.btnSvgGroup}
      >
        <circle
          className={circleClass}
          cx="250"
          cy="250"
          r="245"
        />
        {icon}
        {
          props.showRipple
          ? <circle
            className={styles.ripple}
            cx="250"
            cy="250"
            r="245"
            />
          : null
        }
      </g>
    </svg>
  );
}
function CircleButton ( props ) { let icon ; if ( props . icon ) { const Icon = props . icon ; icon = ( < Icon className = { classnames ( styles . icon , props . iconClassName ) } width = { props . iconWidth } height = { props . iconHeight } x = { props . iconX } y = { props . iconY } / > ) ; } const circleClass = classnames ( styles . circle , ! props . showBorder && styles . noBorder , ) ; const onClick = props . disabled ? null : props . onClick ; return ( < svg data-sign = { props . dataSign } xmlns = "http://www.w3.org/2000/svg" className = { classnames ( styles . btnSvg , props . className ) } viewBox = "0 0 500 500" onClick = { ( e ) => { if ( ( e . target && e . target . tagName !== 'svg' ) && onClick ) { onClick ( e ) ; } } } width = { props . width } height = { props . height } x = { props . x } y = { props . y } > { props . title ? < title > { props . title } < / title > : null } < g className = { styles . btnSvgGroup } > < circle className = { circleClass } cx = "250" cy = "250" r = "245" / > { icon } { props . showRipple ? < circle className = { styles . ripple } cx = "250" cy = "250" r = "245" / > : null } < / g > < / svg > ) ; }
Circle Button with SVG
Circle Button with SVG