import { FC } from 'react'

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

const CloseIcon: FC<SvgIconProps> = ({ sx, ...props }) => (
  <SvgIcon sx={{ fontSize: 18, color: 'action.active', ...sx }} {...props}>
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M8.99561 10.0563L13.2363 14.2973C13.3777 14.4339 13.5671 14.5094 13.7636 14.5077C13.9602 14.506 14.1482 14.4272 14.2872 14.2882C14.4262 14.1492 14.505 13.9612 14.5067 13.7646C14.5084 13.568 14.4328 13.3786 14.2963 13.2373L10.0556 8.99625L14.2963 4.75525C14.4328 4.61386 14.5084 4.42448 14.5067 4.22792C14.505 4.03135 14.4262 3.84332 14.2872 3.70432C14.1482 3.56532 13.9602 3.48648 13.7636 3.48477C13.5671 3.48306 13.3777 3.55863 13.2363 3.69519L8.99561 7.93619L4.75491 3.69519C4.61289 3.562 4.42463 3.4893 4.22996 3.49246C4.03529 3.49562 3.84949 3.5744 3.71187 3.71213C3.57425 3.84985 3.49561 4.03572 3.49258 4.23041C3.48956 4.42509 3.56239 4.61332 3.69567 4.75525L7.93562 8.99625L3.69492 13.2373C3.62332 13.3064 3.56621 13.3891 3.52693 13.4806C3.48764 13.5721 3.46696 13.6704 3.46609 13.77C3.46523 13.8695 3.48419 13.9682 3.52189 14.0604C3.55958 14.1525 3.61524 14.2362 3.68563 14.3066C3.75601 14.377 3.83971 14.4327 3.93184 14.4704C4.02397 14.5081 4.12268 14.527 4.22222 14.5262C4.32175 14.5253 4.42012 14.5046 4.51158 14.4653C4.60304 14.426 4.68576 14.3689 4.75491 14.2973L8.99561 10.0563Z"
        fill="currentColor"
      />
    </svg>
  </SvgIcon>
)

export default CloseIcon
