如何在Mantine Select组件中添加自定义本地图标而非Tabler Icons

你当前的实现思路是完全正确的：通过import { ReactComponent as SearchIcon } from '../../assets/search.svg'导入的本地SVG会被编译为React函数组件，和Tabler Icons提供的IconHash这类函数组件类型完全匹配，所以可以直接传递给Select组件的icon属性使用。

关于图标类型的说明 #

Tabler Icons本身就是以React函数组件的形式封装的，所以你看到IconHash是函数类型是正常的——你导入的SearchIcon本质上也是同类型的函数组件，二者在Select的icon属性中可以直接互换使用。

样式调整建议 #

如果需要修改图标的大小、颜色等样式，直接在<SearchIcon />组件上添加属性即可：

• 内联样式写法：<SearchIcon style={{ width: 18, height: 18, color: '#6b7280' }} />
• 结合Mantine的createStyles方案：在自定义样式中定义图标类名，再通过className传递给组件

另外，如果你不需要将SVG作为React组件处理，也可以用<img>标签导入，但这种方式无法直接修改SVG内部的颜色（除非SVG本身使用currentColor作为填充色），示例如下：

import searchIcon from '../../assets/search.svg';

// 在Select组件中使用
icon={<img src={searchIcon} alt="搜索" style={{ width: 18, height: 18 }} />}

完整示例代码 #

import { ReactComponent as SearchIcon } from '../../assets/search.svg';
import { Select, SelectItem } from '@mantine/core';
import { createStyles } from '@mantine/styles';

const useStyles = createStyles((theme) => ({
  searchBar: {
    width: '100%',
    // 自定义其他样式
  },
}));

export default function SearchSelect() {
  const { classes } = useStyles();
  const data = [
    { label: 'Produs 1', description: 'Descriere produs 1' },
    { label: 'Serviciu 1', description: 'Descriere serviciu 1' },
    { label: 'Partener 1', description: 'Descriere partener 1' },
  ];

  return (
    <Select
      className={classes.searchBar}
      radius="xl"
      placeholder="Cauta produse, servicii, sau parteneri"
      itemComponent={SelectItem}
      data={data}
      searchable
      icon={<SearchIcon style={{ width: 18, height: 18, color: theme.colors.gray[6] }} />}
      maxDropdownHeight={400}
      nothingFound="Nu s-au gasit rezultate"
      filter={(value, item) =>
        item.label.toLowerCase().includes(value.toLowerCase().trim()) ||
        item.description.toLowerCase().includes(value.toLowerCase().trim())
      }
    />
  );
}

内容的提问来源于stack exchange，提问作者Damian Huzau