svg fix

Author: carlrip

Chapter5/Section5-Using-SVGs/app/src/Alert.tsx

@@ -1,4 +1,7 @@
 import { useState } from 'react';
+import { ReactComponent as CrossIcon } from './cross.svg';
+import { ReactComponent as InfoIcon } from './info.svg';
+import { ReactComponent as WarningIcon } from './warning.svg';
 
 type Props = {
   type?: string;
@@ -32,7 +35,11 @@ export function Alert({ type = 'information', heading, children, closable, onClo
           aria-label={type === 'warning' ? 'Warning' : 'Information'}
           className="w-7"
         >
-          {type === 'warning' ? '⚠' : 'ℹ️'}
+          {type === 'warning ' ? (
+            <WarningIcon className="fill-amber-900 w-5 h-5" />
+          ) : (
+            <InfoIcon className="fill-teal-900 w-5 h-5" />
+          )}
         </span>
         <span className="font-bold">{heading}</span>
         {closable && (
@@ -41,9 +48,7 @@ export function Alert({ type = 'information', heading, children, closable, onClo
             onClick={handleCloseClick}
             className="border-none bg-transparent ml-auto cursor-pointer"
           >
-            <span role="img" aria-label="Close">
-              ❌
-            </span>
+            <CrossIcon />
           </button>
         )}
       </div>