// @flow
import React from 'react';
import styled from 'styled-components';

type Props = {
  className?: string,
}

const Svg = styled.svg`
  width: 100%;
`;

const SearchIconLight = ({ className }: Props) => (
  <Svg className={className} width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
      <g id="Navbar---Homepage" transform="translate(-227.000000, -28.000000)" fill="#6b3ecd">
        <g id="New-Navbar">
          <g id="Search-Bar" transform="translate(213.000000, 15.000000)">
            <g id="35" transform="translate(12.000000, 13.000000)">
              <path
                d="M16.8116308,15.872291 L24.3603025,23.4209627 C24.653184,23.7138442 25.1260063,23.7158768 25.4209415,23.4209415 C25.7138348,23.1280483 25.7101258,22.6494656 25.4209627,22.3603025 L17.872291,14.8116308 C19.1996323,13.243619 20,11.2152774 20,9 C20,4.02943725 15.9705627,0 11,0 C6.02943725,0 2,4.02943725 2,9 C2,13.9705627 6.02943725,18 11,18 C13.2152774,18 15.243619,17.1996323 16.8116308,15.872291 L16.8116308,15.872291 L16.8116308,15.872291 Z M3.5,9 C3.5,4.85786438 6.85786438,1.5 11,1.5 C15.1421356,1.5 18.5,4.85786438 18.5,9 C18.5,13.1421356 15.1421356,16.5 11,16.5 C6.85786438,16.5 3.5,13.1421356 3.5,9 L3.5,9 Z"
                id="Rectangle-404"
              />
            </g>
          </g>
        </g>
      </g>
    </g>
  </Svg>
);

SearchIconLight.defaultProps = {
  className: '',
};

export default SearchIconLight;