Add classNames.icon option

[trevorblades]

What has been done ✅:

I added an icon property to the classNames toast option. This allows users to style the <div data-icon=""> element using tailwind. This would be very useful to give the icon common styles like width/height:

<Toaster
  toastOptions={{
    unstyled: true,
    classNames: {
      icon: "size-6"
    },
  }}
/>

Currently, I have to add the size-6 classname to each icon in my icons override:

<Toaster
  icons={{
    error: <ExclamationCircleIcon className="size-6" />,
    warning: <ExclamationTriangleIcon className="size-6" />,
    info: <InformationCircleIcon className="size-6" />,
    success: <CheckCircleIcon className="size-6" />,
  }}
/>

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sonner	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 24, 2024 2:17am

[landg16]

@emilkowalski please merge this, can't change icon sizes and style :(

[trevorblades]

It looks like this is a duplicate of #372. I think this one can be closed since that one has already been merged.