Can someone please explain how to include a custom icon on Select component in Mantine without using an image from Tabler Icons library?

Hey there, I'm new to using Mantine and I'm currently working on a Search Component. Instead of utilizing an image from the tabler icons like in the Mantine examples, my goal is to include a picture from my own assets.

Here's what I've attempted:

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


<Select
    className={classes.searchBar}
    radius="xl"
    placeholder="Search for products, services, or partners"
    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())
    }
/>

It seems that when I import Icon Hash, the type appears to be a function.

Answer №1

Absolutely, it is possible. The icon component in this case is designed to accept any react node you provide as it is of type ReactNode. Just remember to ensure that your SVG is a valid react component.

The response type from the @tabler\icons library is a function (in fact, a component) because it is intended to be utilized as a react component. For an example and instructions on configuring your SVG correctly, you can refer to this link: https://github.com/tabler/tabler-icons/blob/master/icons/123.svg?short_path=ce3b8f5.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is preventing me from navigating to other pages in my React application?

Recently, I have been experimenting with ReactJS and encountered an issue where I couldn't access my other pages. The code snippet provided below seems to be the root of the problem. I am in the process of developing a multi-page application using Re ...

Search timeout restriction

I have a function that makes a request to the server to retrieve data. Here is the code for it: export default class StatusChecker { constructor() { if (gon.search && gon.search.searched) { this.final_load(); } else { this.make_req ...

eliminating the hues beneath the lines on Morris region charts

I'm seeking advice on how to remove colors below the lines in Morris area charts. Any ideas? Here's the code snippet I've been using: Morris.Area({ element: 'area-example', data: [ { y: '2006', a: 100, b: 90 }, ...

Include an element in a secondary list based on its position in the initial list

Having 2 lists presents a challenge. An Angular service is utilized with a splice-based method to remove items from the first list (named "items") according to their index through a ng-click action. service.removeItem = function (itemIndex) { items ...

The response from NodeJS is not being properly parsed by Express or BodyParser

const express = require('express'); const bodyParser = require('body-parser'); const app = express(); const adminRoutes = require('./routes/admin'); const shopRoutes = require('./routes/shop'); // app.use(express.u ...

Unveiling all Gatsby.js routes/endpoints in Cypress tests: A comprehensive guide

I am currently in the process of creating end-to-end tests with Cypress for a project built on Gatsby. One specific test requires me to iterate through all pages of my Gatsby site. To accomplish this, I require a test fixture (such as endpoints.json) cont ...

Steps for embedding the code into your website

I'm facing an issue with integrating a .jsx file into my website. I tried testing it on a single-page demo site, but nothing is showing up. Can someone guide me through the steps to successfully integrate it onto my site? I've also attached the . ...

Utilize Ajax and Nodejs to inject dynamic content into your webpage

Seeking assistance in implementing a project where a navigation bar on the page contains various items, and I aim to display the content of each tab without reloading the entire page. Utilizing Nodejs with the ejs template engine, my research hasn't l ...

Is it possible to create a "private" variable by utilizing prototype in JavaScript?

In my JavaScript code, I am trying to have a unique private variable for each "instance," but it seems that both instances end up using the same private variable. func = function(myName) { this.name = myName secret = myName func.prototype.tel ...

Tips for retrieving page source with selenium Remote Control

Looking to Develop a Basic Java Web Crawler. WebDriver driver = new HtmlUnitDriver(); driver.get("https://examplewebsite.com"); String pageSource=driver.getPageSource(); System.out.println(pageSource); The result is as follows: <!DOCTYPE html PUBLIC ...

"Utilizing the jQuery append method to dynamically insert an SVG element

Currently, I'm in the process of constructing a graph by utilizing svg elements and then dynamically creating rect elements for each bar in the graph through a loop. I have a query regarding how I can effectively pass the value of the "moveBar" varia ...

What is the best way to update information in the `App` component using Vue?

Within Vue, I have an App component that utilizes the <router-view> to extend the functionality of a Login component. My goal is to update specific data within the App component when a button is clicked in the Login component. Is this type of inter ...

sw-precache-webpack-plugin for webpack's default service worker template

When utilizing the sw-precache-webpack-plugin to create a service worker for my project, I've noticed that while all my fonts, js, and css files are stored in the cache storage, the index/html file is missing. This has resulted in it not functioning p ...

Utilizing highcharts to visualize non-linear time data pulled from a CSV file

I am seeking guidance on implementing a simple graph based on data from a CSV file in web development. I lack experience in this area and have struggled to find a suitable example to follow. The CSV file contains data in the format of a unix timestamp, hu ...

Unable to Utilize Custom Colors in Tailwind CSS within NextJS

I am currently experimenting with NextJs and Tailwinds CSS for a new project. However, I keep encountering an error when attempting to apply a custom background color: Failed to compile ./styles/globals.css:7:12 Syntax error: /Users/anishkunapareddy/Deskto ...

Ember Gain a comprehensive understanding of the flow of execution between route and controller

Below is a snippet of my "box" route/controller: export default Ember.Controller.extend({ initialized: false, type: 'P', status: 'done', layouts: null, toggleFltr: null, gridVals: Ember.computed.alias('mode ...

Is there a way to trigger javascript on Amazon once the "Next Page" button is clicked?

My Greasemonkey script is designed to run on Amazon's search results page. However, I've noticed that when the "Next Page" button is clicked and new results are dynamically loaded, my script only executes once after the initial page load. Here&a ...

Upon clicking, the reset function will be triggered

I have a jQuery code that includes a click event on td elements. After clicking on a td, an input field with text appears and the focus is set at the end of the text. However, I want to remove the focus after the initial click so that I can click in the ...

Having trouble accessing the desired API as the Next.js Dynamic API Page keeps returning "local..../undefined/api/......"

Within my React components, I have implemented a function called "statusHandler" that makes a fetch call to "api/orders/ + ID" where ID is a unique item identifier. My setup involves using Next.js and pages to access API routes. An error I encountered rea ...

Assign a class to each offspring of a slot

I am currently in the process of setting up a component with a slot that, upon rendering, adds a specific class to each child within that slot. To simplify: <template> <div> <slot name="footerItems"></slot> </div> ...