feat: Add FileIcon #1880 (#1960)

### What problem does this PR solve?

feat: Add FileIcon #1880

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/file-icon/index.less

@@ -0,0 +1,3 @@
+.thumbnailImg {
+  max-width: 20px;
+}

web/src/components/file-icon/index.tsx

@@ -0,0 +1,25 @@
+import { getExtension } from '@/utils/document-util';
+import SvgIcon from '../svg-icon';
+
+import { useSelectFileThumbnails } from '@/hooks/knowledge-hooks';
+import styles from './index.less';
+
+interface IProps {
+  name: string;
+  id: string;
+}
+
+const FileIcon = ({ name, id }: IProps) => {
+  const fileExtension = getExtension(name);
+  // TODO: replace this line with react query
+  const fileThumbnails = useSelectFileThumbnails();
+  const fileThumbnail = fileThumbnails[id];
+
+  return fileThumbnail ? (
+    <img src={fileThumbnail} className={styles.thumbnailImg}></img>
+  ) : (
+    <SvgIcon name={`file-icon/${fileExtension}`} width={24}></SvgIcon>
+  );
+};
+
+export default FileIcon;