Как изменить значок кнопки отправки в окне поиска?

Question

Я настраиваю 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>

Answer 1

Виджеты в InstantSearch.js Algolia поставляются с предопределенным рендерингом. Вы можете их стилизовать, но если вы недовольны фактическим рендерингом (т. Е. Какой HTML-код генерируется для виджета), вам придется создать свой собственный.

Когда речь идет о настройке существующего виджета, что в вашем случае, есть интеллектуальный механизм, который они предоставляют, который называется "соединителями".
Они в основном отделили поведение / логику виджета от его рендеринга. Разные соединители обеспечивают логику для каждого компонента поиска, а виджеты обеспечивают интерфейс поверх этих соединителей.

Так что в вашем случае вам нужно посмотреть документацию о соединителях и продолжить использовать connectSearchBox соединитель для создания собственного виджета searchBox.