fix: #1681 replace svg icons with png icons

app/components/exporter.module.scss

@@ -131,7 +131,8 @@
         position: absolute;
         top: 0px;
         left: 0px;
-        transform: scale(2);
+        height: 50%;
+        transform: scale(1.5);
       }
 
       .main-title {

app/components/exporter.tsx

@@ -7,17 +7,19 @@ import { copyToClipboard, downloadAs, useMobileScreen } from "../utils";
 
 import CopyIcon from "../icons/copy.svg";
 import LoadingIcon from "../icons/three-dots.svg";
-import ChatGptIcon from "../icons/chatgpt.svg";
+import ChatGptIcon from "../icons/chatgpt.png";
 import ShareIcon from "../icons/share.svg";
+import BotIcon from "../icons/bot.png";
 
 import DownloadIcon from "../icons/download.svg";
 import { useMemo, useRef, useState } from "react";
 import { MessageSelector, useMessageSelector } from "./message-selector";
 import { Avatar } from "./emoji";
-import { MaskAvatar } from "./mask";
 import dynamic from "next/dynamic";
+import NextImage from "next/image";
 
 import { toBlob, toPng } from "html-to-image";
+import { DEFAULT_MASK_AVATAR } from "../store/mask";
 
 const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
   loading: () => <LoadingIcon />,
@@ -253,6 +255,22 @@ export function PreviewActions(props: {
   );
 }
 
+function ExportAvatar(props: { avatar: string }) {
+  if (props.avatar === DEFAULT_MASK_AVATAR) {
+    return (
+      <NextImage
+        src={BotIcon.src}
+        width={30}
+        height={30}
+        alt="bot"
+        className="user-avatar"
+      />
+    );
+  }
+
+  return <Avatar avatar={props.avatar}></Avatar>;
+}
+
 export function ImagePreviewer(props: {
   messages: ChatMessage[];
   topic: string;
@@ -319,7 +337,12 @@ export function ImagePreviewer(props: {
       >
         <div className={styles["chat-info"]}>
           <div className={styles["logo"] + " no-dark"}>
-            <ChatGptIcon />
+            <NextImage
+              src={ChatGptIcon.src}
+              alt="logo"
+              width={50}
+              height={50}
+            />
           </div>
 
           <div>
@@ -328,9 +351,9 @@ export function ImagePreviewer(props: {
               github.com/Yidadaa/ChatGPT-Next-Web
             </div>
             <div className={styles["icons"]}>
-              <Avatar avatar={config.avatar}></Avatar>
+              <ExportAvatar avatar={config.avatar} />
               <span className={styles["icon-space"]}>&</span>
-              <MaskAvatar mask={session.mask} />
+              <ExportAvatar avatar={mask.avatar} />
             </div>
           </div>
           <div>
@@ -358,11 +381,9 @@ export function ImagePreviewer(props: {
               key={i}
             >
               <div className={styles["avatar"]}>
-                {m.role === "user" ? (
+                <ExportAvatar
-                  <Avatar avatar={config.avatar}></Avatar>
+                  avatar={m.role === "user" ? config.avatar : mask.avatar}
-                ) : (
+                />
-                  <MaskAvatar mask={session.mask} />
-                )}
               </div>
 
               <div className={`${styles["body"]} `}>