FEATURE REQUEST: Provide a way to configure default icons

[amirhhashemi]

It would be nice if we were able to configre default icons. Something like this:

<Toaster
  icons={{
    success: <SuccessIcon />,
    info: <InfoIcon />,
    warning: <WarningIcon />,
    error: <ErrorIcon />,
    loading: <LoadingIcon />,
  }}
/>

In my case, the default styles are very close to what I want, but I need to change the default icons. It doesn't make a lot of sence to create a wrapper just to change the icons.

[katerynarieznik]

@amirhhashemi @emilkowalski I just saw this feature released, but unfortunately it does not work for me and throws an error: Property 'icons' does not exist on type 'IntrinsicAttributes & ToasterProps.'. Sorry if I misunderstand the release notes.

Thank you for your work and fantastic Toast component 🙌

[amirhhashemi]

@amirhhashemi @emilkowalski I just saw this feature released, but unfortunately it does not work for me and throws an error: Property 'icons' does not exist on type 'IntrinsicAttributes & ToasterProps.'. Sorry if I misunderstand the release notes.

Thank you for your work and fantastic Toast component 🙌

Can you please share how you are using the icons prop? A minimal reproduction example helps a lot. Also, double check that you are using the latest version (1.4.0)

[katerynarieznik]

Can you please share how you are using the icons prop? A minimal reproduction example helps a lot. Also, double check that you are using the latest version (1.4.0)

Sure, I installed it from shadcn/ui components. Here is the code with how I use Sonner:

'use client'

import { CSSProperties } from 'react'
import {
  AlertCircle,
  AlertTriangle,
  CheckCircle,
  Info,
  Loader
} from 'lucide-react'
import { Toaster as Sonner } from 'sonner'

interface ExtendedCSSProperties extends CSSProperties {
  // additional properties to pass css variables to the component
  '--width'?: string
}
type ToasterProps = React.ComponentProps<typeof Sonner> & {
  style?: ExtendedCSSProperties
}

const Toaster = ({ ...props }: ToasterProps) => {
  return (
    <Sonner
      className="toaster group"
      position="top-center"
      closeButton={true}
      style={{
        '--width': '262px'
      }}
      icons={{
        success: <CheckCircle className="text-green-4 size-5" />,
        info: <Info className="text-violet-2 size-5" />,
        warning: <AlertTriangle className="text-yellow-2 size-5" />,
        error: <AlertCircle className="text-red-4 size-5" />,
        loading: <Loader className="text-violet-4 size-5" />
      }}
      toastOptions={{
        classNames: {
          toast:
            'group toast group-[.toaster]:bg-white group-[.toaster]:py-3 group-[.toaster]:px-5 group-[.toaster]:text-grey-10 group-[.toaster]:font-normal group-[.toaster]:border-2 group-[.toaster]:rounded group-[.toaster]:shadow-lg group-[.toaster]:border-violet-1',
          title:
            'group-[.toast]:text-grey-10 group-[.toast]:text-xs group-[.toast]:font-medium group-[.toast]:leading-6',
          description:
            'group-[.toast]:text-grey-10 group-[.toast]:text-xs group-[.toast]:font-normal group-[.toast]:leading-6',
          actionButton:
            'group-[.toast]:bg-violet-1 group-[.toast]:hover:bg-violet-2 group-[.toast]:text-grey-10 group-[.toast]:h-[26px] group-[.toast]:text-xxs group-[.toast]:font-semibold group-[.toast]:rounded-xs group-[.toast]:px-3 group-[.toast]:py-0',
          cancelButton:
            'group-[.toast]:bg-white group-[.toast]:text-grey-10 group-[.toast]:h-[26px] group-[.toast]:border group-[.toast]:border-solid group-[.toast]:border-inherit group-[.toast]:text-xxs group-[.toast]:font-semibold group-[.toast]:rounded-xs group-[.toast]:px-3 group-[.toast]:py-0',
          closeButton:
            'group-[.toast]:bg-grey-3 group-[.toast]:h-6 group-[.toast]:w-6 group-[.toast]:border-0 group-[.toast]:text-grey-6 group-[.toast]:left-[unset] group-[.toast]:right-0 group-[.toast]:translate-x-[35%] group-[.toast]:translate-y-[-35%]',
          info: 'group-[.toaster]:bg-violet-1 group-[.toaster]:!border-violet-2',
          error: 'group-[.toaster]:bg-red-1 group-[.toaster]:!border-red-4',
          warning:
            'group-[.toaster]:bg-yellow-1 group-[.toaster]:!border-yellow-2',
          success:
            'group-[.toaster]:bg-green-1 group-[.toaster]:!border-green-4'
        }
      }}
      {...props}
    />
  )
}

export { Toaster }

Also, I could not find the information in the docs about how to use the icons... sonner.emilkowal.ski/styling

[amirhhashemi]

@rieznik Thanks for the example. I noticed the PR that added this feature was reverted before the release. So it's not available yet. Please refer to #319 for further follow-up.