import * as React from 'react';

import AccessibleSVG from '../accessible-svg';

import { Icon } from '../iconTypes';

const IconEyeInverted = ({ className = '', color = '#444', height = 12, title, width = 16 }: Icon) => (
    <AccessibleSVG
        className={`icon-eye-inverted ${className}`}
        height={height}
        title={title}
        viewBox="0 0 16 12"
        width={width}
    >
        <path
            d="M.07 6.054L0 5.866l.07-.188C1.342 2.284 4.466 0 8.001 0c3.536 0 6.66 2.284 7.929 5.679l.07.187-.07.188c-1.27 3.395-4.394 5.68-7.929 5.68-3.536 0-6.66-2.285-7.93-5.68zm7.931 4.613c3.018 0 5.702-1.917 6.862-4.8-1.16-2.884-3.844-4.8-6.862-4.8-3.018 0-5.702 1.916-6.864 4.8 1.162 2.883 3.846 4.8 6.864 4.8zm0-7.467a2.657 2.657 0 0 1 2.654 2.666A2.658 2.658 0 0 1 8 8.533a2.657 2.657 0 0 1-2.656-2.665A2.659 2.659 0 0 1 8.001 3.2zm0 1.067c-.882 0-1.594.714-1.594 1.6a1.593 1.593 0 1 0 3.186-.001c0-.885-.711-1.6-1.592-1.6z"
            fill={color}
            fillRule="nonzero"
        />
    </AccessibleSVG>
);

export default IconEyeInverted;