如何更改搜索框提交按钮图标？
How do I change the search box submit button icon?
我正在设置 Algolia instantsearch.js，我想替换默认的搜索框提交按钮图标。
docs 显示使用小部件 class 名称设置图标颜色样式，但我不知道如何用另一个 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>
Algolia InstantSearch.js 中的小部件带有预定义的渲染。您可以设置它们的样式，但如果您对实际呈现不满意（即为小部件生成的 HTML），那么您必须创建自己的。
当它是关于自定义现有小部件时，这是您的情况，他们提供了一种称为 "connectors" 的智能机制。
他们基本上已经将小部件的 behaviour/logic 与其渲染分离了。不同的连接器为每个搜索组件提供逻辑，小部件在这些连接器之上带来 UI。
因此，对于您的情况，您需要查看 documentation on connectors and go ahead with using a connectSearchBox connector 以创建您自己的搜索框小部件。
您使用的是哪个 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
我正在设置 Algolia instantsearch.js，我想替换默认的搜索框提交按钮图标。
docs 显示使用小部件 class 名称设置图标颜色样式，但我不知道如何用另一个 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>
Algolia InstantSearch.js 中的小部件带有预定义的渲染。您可以设置它们的样式，但如果您对实际呈现不满意（即为小部件生成的 HTML），那么您必须创建自己的。
当它是关于自定义现有小部件时，这是您的情况，他们提供了一种称为 "connectors" 的智能机制。
他们基本上已经将小部件的 behaviour/logic 与其渲染分离了。不同的连接器为每个搜索组件提供逻辑，小部件在这些连接器之上带来 UI。
因此，对于您的情况，您需要查看 documentation on connectors and go ahead with using a connectSearchBox connector 以创建您自己的搜索框小部件。
您使用的是哪个 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