0

I am new on Mantine and I`m trying to do a Search Component. In stead of using an image from tabler icons as is present in the mantine examples, I want to add a picture from my assets.

This is what I`ve tried

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())
    }
/>

looks like if I import Icon Hash, the type is a function

Damian Huzau
  • 1

1 Answers1

1

Of course you can. icon is of type ReactNode and thus accepts every react node you pass to it. You should make sure that your svg is a react component, though.

The return type from @tabler\icons is indeed a function (actually, a component) because they're meant to be used as react components. You can check an example here and configure your svg accordingly: https://github.com/tabler/tabler-icons/blob/master/icons/123.svg?short_path=ce3b8f5.

zhulien
  • 5,145
  • 3
  • 22
  • 36