How can I use custom icons with React Toastify?

How can I use custom icons with React Toastify?

You can use custom icons in React Toastify by passing a custom component to the icon prop in the toast options.

Can you show me an example of how to implement that?

Sure! Here's a simple example:

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const CustomIcon = () => <img src='path/to/icon.png' alt='Custom Icon' />;

const notify = () => {
  toast('This is a custom toast!', { icon: <CustomIcon /> });
};

// Call notify() to trigger the toast

What if I want to change the icon based on the toast type?

You can conditionally render different icons based on the toast type by using a function to determine the icon. For example:

const getIcon = (type) => {
  switch (type) {
    case 'success':
      return <SuccessIcon />;
    case 'error':
      return <ErrorIcon />;
    default:
      return <DefaultIcon />;
  }
};

toast('Message', { icon: getIcon('success') });