feat: add file icon and add message popover content (#77)

* feat: add message popover content

* feat: add file icon

web/src/hooks/commonHooks.ts

@@ -32,3 +32,39 @@ export const useDeepCompareEffect = (
     };
   }, []);
 };
+
+export interface UseDynamicSVGImportOptions {
+  onCompleted?: (
+    name: string,
+    SvgIcon: React.FC<React.SVGProps<SVGSVGElement>> | undefined,
+  ) => void;
+  onError?: (err: Error) => void;
+}
+
+export function useDynamicSVGImport(
+  name: string,
+  options: UseDynamicSVGImportOptions = {},
+) {
+  const ImportedIconRef = useRef<React.FC<React.SVGProps<SVGSVGElement>>>();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error>();
+
+  const { onCompleted, onError } = options;
+  useEffect(() => {
+    setLoading(true);
+    const importIcon = async (): Promise<void> => {
+      try {
+        ImportedIconRef.current = (await import(name)).ReactComponent;
+        onCompleted?.(name, ImportedIconRef.current);
+      } catch (err: any) {
+        onError?.(err);
+        setError(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    importIcon();
+  }, [name, onCompleted, onError]);
+
+  return { error, loading, SvgIcon: ImportedIconRef.current };
+}