text: import propTypes from 'prop-types'
  import styled from '@emotion/styled'
  
  const UserView = styled('span')`
    display: block;
    width: ${(props) => props.size};
    line-height: 0;
  
    svg {
      width: 100%;
      fill: ${(props) => props.color || props.theme.inputs.placeholderColor};
    }
  `
  
  const User = ({ size = '2.0rem', color = null }) => {
    return (
      <UserView size={size} color={color}>
        <svg viewBox="0 0 20 20">
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M9.99967 2.95964C8.41186 2.95964 7.12467 4.24682 7.12467 5.83464C7.12467 7.42245 8.41186 8.70964 9.99967 8.70964C11.5875 8.70964 12.8747 7.42245 12.8747 5.83464C12.8747 4.24682 11.5875 2.95964 9.99967 2.95964ZM6.20801 5.83464C6.20801 3.74056 7.90559 2.04297 9.99967 2.04297C12.0938 2.04297 13.7913 3.74056 13.7913 5.83464C13.7913 7.92871 12.0938 9.6263 9.99967 9.6263C7.90559 9.6263 6.20801 7.92871 6.20801 5.83464Z"
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M8.33317 12.9596C7.57067 12.9596 6.83941 13.2625 6.30024 13.8017C5.76107 14.3409 5.45817 15.0721 5.45817 15.8346V17.5013C5.45817 17.7544 5.25297 17.9596 4.99984 17.9596C4.74671 17.9596 4.5415 17.7544 4.5415 17.5013V15.8346C4.5415 14.829 4.94098 13.8646 5.65206 13.1535C6.36313 12.4424 7.32756 12.043 8.33317 12.043H11.6665C12.6721 12.043 13.6365 12.4424 14.3476 13.1535C15.0587 13.8646 15.4582 14.829 15.4582 15.8346V17.5013C15.4582 17.7544 15.253 17.9596 14.9998 17.9596C14.7467 17.9596 14.5415 17.7544 14.5415 17.5013V15.8346C14.5415 15.0721 14.2386 14.3409 13.6994 13.8017C13.1603 13.2625 12.429 12.9596 11.6665 12.9596H8.33317Z"
          />
        </svg>
      </UserView>
    )
  }
  
  User.displayName = 'User'
  User.propTypes = {
    size: propTypes.string,
    color: propTypes.string,
  }
  
  export default User
  