Change icon in search control

Fixes #380 Add `resetButton` option to `GeoSearchControl` to allow changing the cross icon. * Add `resetButton` option to `SearchControlProps` interface in `src/SearchControl.ts`. * Update `defaultOptions` to include `resetButton` with default value '×' in `src/SearchControl.ts`. * Update `resetButton` element creation to use `resetButton` option value in `src/SearchControl.ts`. * Add documentation for `resetButton` option in the `GeoSearchControl` section in `docs/usage.mdx`.
smeijer · Jan 22, 2025 · fe53f39 · fe53f39
1 parent 19e575c
commit fe53f39
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/docs/usage.mdx b/docs/usage.mdx
@@ -42,6 +42,7 @@ import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';
 const searchControl = new GeoSearchControl({
   provider: new OpenStreetMapProvider(),
   style: 'bar',
+  resetButton: '🔍', // Example of using a magnifying glass icon
 });
 
 map.addControl(searchControl);

diff --git a/src/SearchControl.ts b/src/SearchControl.ts
@@ -56,6 +56,7 @@ const defaultOptions: Omit<SearchControlProps, 'provider'> = {
   autoClose: false,
   keepResult: false,
   updateMap: true,
+  resetButton: '×',
 };
 
 const UNINITIALIZED_ERR =
@@ -110,6 +111,7 @@ interface SearchControlProps {
   autoClose: boolean;
   keepResult: boolean;
   updateMap: boolean;
+  resetButton: string;
 }
 
 export type SearchControlOptions = Partial<SearchControlProps> & {
@@ -202,7 +204,7 @@ const Control: SearchControl = {
       this.classNames.resetButton,
       this.searchElement.form,
       {
-        text: '×',
+        text: this.options.resetButton,
         'aria-label': this.options.clearSearchLabel,
         onClick: () => {
           if (this.searchElement.input.value === '') {