@procore/core-icons/src/Icon.tsx

import * as React from 'react'

export type IconSize = 'sm' | 'md' | 'lg' | 'tool'

export interface IconProps {
  name: string
  size?: IconSize
  style?: React.CSSProperties
}

function getSize(size?: IconSize): number {
  if (size === 'sm') {
    return 16
  } else if (size === 'md') {
    return 24
  } else if (size === 'lg') {
    return 32
  } else if (size === 'tool') {
    return 26
  }

  return 24
}

export function Icon({
  children,
  ...props
}: React.PropsWithChildren<IconProps>) {
  return React.isValidElement(children)
    ? React.cloneElement(children, {
        'aria-hidden': true,
        'data-qa': `ci-${props.name}`,
        ...props,
        width: getSize(props.size),
        height: getSize(props.size),
        focusable: false,
        style: {
          ...props.style,
          flex: '0 0 auto',
        },
      })
    : null
}