有没有办法在Select(Mantine)上添加个人图标，而不是Tabler Icons中的图像

Question

我是Mantine的新手，正在尝试做一个搜索组件。我想添加一张来自我的资产的图片，而不是像mantine示例中那样使用来自tabler图标的图片。

这就是我尝试过的

import { ReactComponent as SearchIcon } from '../../assets/search.svg';
import { IconHash } from '@tabler/icons';

<Select
className={classes.searchBar}
radius="xl"
placeholder="Cauta produse, servicii, sau parteneri"
itemComponent={SelectItem}
data={data}
searchable
icon={<SearchIcon />}
maxDropdownHeight={400}
nothingFound="Nobody here"
filter={(value, item) =>
item.label.toLowerCase().includes(value.toLowerCase().trim()) ||
item.description.toLowerCase().includes(value.toLowerCase().trim())
}
/>

看起来如果我导入Icon Hash，类型是函数

Answer 1

当然可以。icon的类型是ReactNode，因此它接受您传递给它的每个react节点。不过，您应该确保您的svg是一个react组件。

@tablericons的返回类型实际上是一个函数(实际上，是一个组件(，因为它们被用作react组件。您可以在这里查看一个示例，并相应地配置您的svg：https://github.com/tabler/tabler-icons/blob/master/icons/123.svg?short_path=ce3b8f5.