import React from 'react'
import { DefaultProps } from 'icons/typings'
import Vector from 'atoms/Vector'
import EyeVisibilityProps from './typings'

const wording = {
  title: 'Password Icon',
  description: 'A oval outline, with a circle in the middle',
  namespace: 'title-eye-visibility',
}
class EyeVisibilityIcon extends React.PureComponent<EyeVisibilityProps> {
  static defaultProps = {
    width: '22px',
    height: '16px',
    viewBox: '0 0 22 16',
  }

  render() {
    return (
      <Vector {...wording} {...this.props}>
        <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
          <g id="ic_visibility" fill="#2C2C2C">
            <g id="Icon-24px">
              <path
                d="M11,0.5 C6,0.5 1.73,3.61 0,8 C1.73,12.39 6,15.5 11,15.5 C16,15.5 20.27,12.39 22,8 C20.27,3.61 16,0.5 11,0.5 L11,0.5 Z M11,13 C8.24,13 6,10.76 6,8 C6,5.24 8.24,3 11,3 C13.76,3 16,5.24 16,8 C16,10.76 13.76,13 11,13 L11,13 Z M11,5 C9.34,5 8,6.34 8,8 C8,9.66 9.34,11 11,11 C12.66,11 14,9.66 14,8 C14,6.34 12.66,5 11,5 L11,5 Z"
                id="Shape"
              />
            </g>
          </g>
        </g>
      </Vector>
    )
  }
}

export { EyeVisibilityIcon }
export default EyeVisibilityIcon