docs: added missing external imports for Toast Component (#946)

Co-authored-by: Mateo Wartelle <mateo.wartelle@abt.com>

app/docs/components/toast/toast.mdx

@@ -23,7 +23,7 @@ import { Toast } from 'flowbite-react';
 
 Use the default `<Toast>` React component to show a simple toast message with an icon and a text message.
 
-<CodePreview title="Default toast">
+<CodePreview importExternal="import { HiFire } from 'react-icons/hi';" title="Default toast">
   <Toast>
     <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-cyan-100 text-cyan-500 dark:bg-cyan-800 dark:text-cyan-200">
       <HiFire className="h-5 w-5" />
@@ -37,7 +37,11 @@ Use the default `<Toast>` React component to show a simple toast message with an
 
 Choose one of the following toast examples based on form submission messages to update the color of the component by using the `bg` and `text` utility classes from Tailwind CSS.
 
-<CodePreview importFlowbiteReact="Toast" title="Colors">
+<CodePreview
+  importExternal="import { HiCheck, HiX, HiExclamation } from 'react-icons/hi';"
+  importFlowbiteReact="Toast"
+  title="Colors"
+>
   <div className="flex flex-col gap-4">
     <Toast>
       <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-500 dark:bg-green-800 dark:text-green-200">
@@ -67,7 +71,11 @@ Choose one of the following toast examples based on form submission messages to
 
 Use this example to show a message based on form submission to indicate errors or successful actions.
 
-<CodePreview importFlowbiteReact="Toast" title="Simple toast">
+<CodePreview
+  importExternal="import { FaTelegramPlane } from 'react-icons/fa';"
+  importFlowbiteReact="Toast"
+  title="Simple toast"
+>
   <div className="space-x-4 divide-x divide-gray-200 dark:divide-gray-700">
     <Toast>
       <FaTelegramPlane className="h-5 w-5 text-cyan-600 dark:text-cyan-500" />
@@ -99,7 +107,11 @@ Add a button to the toast component to allow the user to perform an action or cl
 
 This component can be used to show more complex messages with buttons and other elements that can be used to perform actions and use the `<Toast.Toggle>` component to allow the user to close the toast component.
 
-<CodePreview importFlowbiteReact="Button, Toast" title="Interactive toast">
+<CodePreview
+  importExternal="import { MdLoop } from 'react-icons/md';"
+  importFlowbiteReact="Button, Toast"
+  title="Interactive toast"
+>
   <Toast>
     <div className="flex items-start">
       <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-cyan-100 text-cyan-500 dark:bg-cyan-900 dark:text-cyan-300">
@@ -129,6 +141,7 @@ This component can be used to show more complex messages with buttons and other
 By passing the `onDismiss` callback prop to the `<Toast.Toggle>` component, you gain the ability to define your preferred dismissal handling (ex: using other toast libraries like `react-toastfy`). When `onDismiss` is provided, the internal state of the `<Toast />` component will remain unchanged upon clicking `<Toast.Toggle>`.
 
 <CodePreview
+  importExternal="import { HiFire } from 'react-icons/hi';"
   importFlowbiteReact="Button, Toast"
   title="Custom dismissal"
   functionBody={['const [showToast, setShowToast] = useState(false);', 'const props = { showToast, setShowToast };']}