text: /* eslint-disable react/jsx-props-no-spreading */
  import React from 'react'
  import styled from 'styled-components'
  
  const Svg = styled.svg`
  `
  
  const Path = styled.path`
    stroke-width: 0;
    stroke: ${(p) => p.color};
    fill: ${(p) => p.color};
  `
  
  const EyeIcon = (props) => {
    const { size = '1em', boxSize = 32, color = '#000000', className } = props
    return (
      <Svg
        width={size}
        height={size}
        viewBox={`0 0 ${boxSize} ${boxSize}`}
        {...props}
      >
        <g data-name="Eye">
          <Path
            color={color}
            className={className}
            data-name="Search-path"
            d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"
          />
        </g>
      </Svg>
    )
  }
  
  export default EyeIcon
  