#Adding support for file icons

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codesmith-99/react-file-preview",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "description": "",
   "source": "src/index.ts",
   "main": "dist/main.js",
@@ -50,6 +50,7 @@
     "@types/mime": "^3.0.1",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
+    "@types/react-file-icon": "^1.0.1",
     "@types/react-table": "^7.7.14",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
@@ -72,6 +73,7 @@
     "comma-separated-values": "^3.6.4",
     "mime": "^3.0.0",
     "react": "^18.2.0",
+    "react-file-icon": "^1.3.0",
     "react-virtuoso": "^4.0.3",
     "styled-components": "^5.3.6"
   }

src/drivers/default-viewer.tsx

@@ -1,11 +1,17 @@
 import { useEffect } from 'react'
+import { DefaultExtensionType, FileIcon, defaultStyles } from 'react-file-icon'
 
 interface Props {
   onLoad: (value: boolean) => void
+  mimeType: string
 }
-export default function DefaultViewer({ onLoad }: Props) {
+export default function DefaultViewer({ onLoad, mimeType }: Props) {
   useEffect(() => {
     onLoad(true)
   }, [onLoad])
-  return <div>File can&apos;t be previewed</div>
+  return (
+    <div>
+      <FileIcon extension={mimeType} {...defaultStyles[mimeType as DefaultExtensionType]} />
+    </div>
+  )
 }

src/drivers/driver-selector.tsx

@@ -37,6 +37,6 @@ export default function DriverSelector({ mimeType, src, onError, onLoad }: Props
     case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
       return <DocumentViewer src={src} onLoad={onLoad} />
     default:
-      return <DefaultViewer onLoad={onLoad} />
+      return <DefaultViewer onLoad={onLoad} mimeType={mimeType} />
   }
 }

src/file-viewer.tsx

@@ -3,6 +3,8 @@ import DriverSelector from './drivers/driver-selector'
 import MimeTypes from 'mime'
 import Loading from './components/loading'
 import styled from 'styled-components'
+import { FileIcon, defaultStyles } from 'react-file-icon'
+import { DefaultExtensionType } from 'react-file-icon'
 interface Props {
   loader?: React.ReactNode
   mimeType?: string
@@ -40,7 +42,11 @@ export default function FileViewer({ loader = <Loading />, mimeType, src, onErro
     }
   }, [src, mimeType, fileName])
   if (showError) {
-    return <div>Unfortunately, this file can&apos;t be previewed</div>
+    return (
+      <div>
+        <FileIcon extension={fileType} {...defaultStyles[fileType as DefaultExtensionType]} />
+      </div>
+    )
   }
   return (
     <>