import { FC } from 'react'

import { SvgIcon, SvgIconProps } from '@mui/material'

const UsernameIcon: FC<SvgIconProps> = ({ sx, ...props }) => (
  <SvgIcon sx={{ fontSize: 24, ...sx }} {...props}>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
      <path
        fill="currentColor"
        fillRule="evenodd"
        clipRule="evenodd"
        d="M2.25 12C2.25 6.61479 6.61479 2.25 12 2.25C17.3852 2.25 21.75 6.61479 21.75 12V13.5C21.75 15.2952 20.2952 16.75 18.5 16.75C17.2658 16.75 16.1924 16.0624 15.6422 15.0492C14.7708 16.0889 13.4626 16.75 12 16.75C9.37679 16.75 7.25 14.6232 7.25 12C7.25 9.37679 9.37679 7.25 12 7.25C14.6232 7.25 16.75 9.37679 16.75 12V13.5C16.75 14.4668 17.5332 15.25 18.5 15.25C19.4668 15.25 20.25 14.4668 20.25 13.5V12C20.25 7.44321 16.5568 3.75 12 3.75C7.44321 3.75 3.75 7.44321 3.75 12C3.75 16.5568 7.44321 20.25 12 20.25C13.0536 20.25 14.1238 20.0502 15.1569 19.6221C15.7108 19.3926 16.2258 19.1035 16.7047 18.7703C17.0448 18.5338 17.5122 18.6177 17.7487 18.9577C17.9852 19.2978 17.9013 19.7652 17.5613 20.0017C17.0023 20.3905 16.3933 20.7334 15.7312 21.0078L15.7311 21.0079C14.5102 21.5138 13.2444 21.75 12 21.75C6.61479 21.75 2.25 17.3852 2.25 12ZM15.25 12C15.25 10.2052 13.7948 8.75 12 8.75C10.2052 8.75 8.75 10.2052 8.75 12C8.75 13.7948 10.2052 15.25 12 15.25C13.7948 15.25 15.25 13.7948 15.25 12Z"
      />
    </svg>
  </SvgIcon>
)

export default UsernameIcon
