Я настраиваю Algolia Instantsearch.js и хочу заменить значок кнопки отправки окна поиска по умолчанию.
Шоу документы для стилизации цвета значка с использованием имени класса виджета, но я не могу понять, как заменить значок svg другим svg.
Это код по умолчанию, который Algolia генерирует для значка кнопки отправки:
<button class = "ais-SearchBox-submit" type = "submit" title = "Submit the search query."><svg class = "ais-SearchBox-submitIcon" xmlns = "http://www.w3.org/2000/svg" width = "10" height = "10" viewBox = "0 0 40 40"> <path d = "M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"></path> </svg></button>
Виджеты в InstantSearch.js от Algolia поставляются с предопределенным рендерингом. Вы можете стилизовать их, но если вы недовольны фактическим рендерингом (то есть тем, какой HTML генерируется для виджета), вам придется создать свой собственный.
Когда речь идет о настройке существующего виджета, как в вашем случае, есть умный механизм, который они предоставляют, который называется «коннекторы».
По сути, они отделили поведение/логику виджета от его рендеринга. Различные соединители обеспечивают логику для каждого компонента поиска, а виджеты предоставляют пользовательский интерфейс поверх этих соединителей.
Итак, в вашем случае вам нужно посмотреть на документация по коннекторам и продолжить использование connectSearchBox
разъем для создания собственного виджета searchBox.
Какой InstantSearch вы используете? В React InstantSerach v5 вы можете заменить изображение в поле поиска по умолчанию, не создавая собственное поле поиска:
<SearchBox
reset = {<img src = "/reset.png" alt = ""/>}
/>
Вот подтверждающая документация: https://www.algolia.com/doc/api-reference/widgets/search-box/react/#widget-param-submit