add Search icon with configurable color and size

fix #13

Author: mxlje

src/autocomplete/autocomplete.css

@@ -32,6 +32,9 @@
     rgba(0, 0, 0, 0) 0px 0px 0px 0px,
     rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
 
+  --search-icon-color: var(--gray-500);
+  --search-icon-size: 20px;
+
   --loading-color: var(--gray-500);
   --loading-size:  31px;
 
@@ -83,7 +86,11 @@
   display: block;
   width: 100%;
   border: 1px solid var(--input-border-color);
-  padding: 13px 55px 13px 12px; /* 12 + 31 + 12 = 55, loading spinner is 31 wide */;
+  padding:
+    13px
+    calc(12px + var(--loading-size) + 12px)
+    13px
+    calc(12px + var(--search-icon-size) + 9px);
   border-radius: var(--border-radius);
   appearance: none;
   -webkit-appearance: none;
@@ -101,6 +108,15 @@
   stroke: var(--loading-color);
 }
 
+.search-icon {
+  position: absolute;
+  color: var(--search-icon-color);
+  left: 12px;
+  top: calc((var(--input-height) - var(--search-icon-size)) / 2);
+  width: var(--search-icon-size);
+  height: var(--search-icon-size);
+}
+
 .results {
   font-size: 16px;
   position: absolute;

src/autocomplete/autocomplete.js

@@ -4,7 +4,7 @@ import { createAutocomplete } from '@geocodeearth/core-js'
 import debounce from 'lodash.debounce'
 import css from './autocomplete.css'
 import strings from '../strings'
-import { LocationMarker, Loading } from '../icons'
+import { LocationMarker, Loading, Search as SearchIcon } from '../icons'
 import escape from '../escape'
 
 const emptyResults = {
@@ -153,6 +153,7 @@ export default ({
       <label {...getLabelProps()} className='label'>{placeholder}</label>
 
       <div {...getComboboxProps()} >
+        <SearchIcon className='search-icon' />
         <input {...getInputProps({ref: inputRef})} spellCheck={false} placeholder={placeholder} className='input' />
         {isLoading && <Loading className={'loading'} />}
       </div>

src/icons.js

@@ -12,6 +12,12 @@ export const LocationMarker = ({className}) =>
     <path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
   </svg>
 
+
+export const Search = ({className}) =>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" className={className}>
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+  </svg>
+
 /**
  * SVG Loaders (github.com/SamHerbert/SVG-Loaders)
  * Copyright (c) 2014 Sam Herbert