refactor: use local svg file

src/common/component/AvatarUploader.js

@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import styled from "styled-components";
+import uploadIcon from "../../assets/icons/upload.image.svg?url";
 import { getInitials, getInitialsAvatar } from "../utils";
 const StyledWrapper = styled.div`
   width: 96px;
@@ -101,13 +102,7 @@ export default function AvatarUploader({
           </>
         )}
       </div>
-      {!disabled && (
-        <img
-          src="https://static.nicegoodthings.com/project/rustchat/icon.avatar.uploader.svg"
-          alt="icon"
-          className="icon"
-        />
-      )}
+      {!disabled && <img src={uploadIcon} alt="icon" className="icon" />}
     </StyledWrapper>
   );
 }

src/common/component/ChannelIcon.js

@@ -1,49 +1,12 @@
 // import React from 'react';
-const HashIcon = ({ size = 20, color = "#616161", ...rest }) => {
+import hashIcon from "../../assets/icons/channel.svg?url";
+import lockHashIcon from "../../assets/icons/channel.private.svg?url";
+export default function ChannelIcon({ personal = false, ...rest }) {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox={`0 0 ${size} ${size}`}
-      fill="none"
+    <img
+      src={personal ? lockHashIcon : hashIcon}
+      alt="channel icon"
       {...rest}
-    >
-      <path
-        d="M6.48667 11.6667L6.83667 8.33333H3.325V6.66667H7L7.43333 2.5H9.10833L8.66667 6.66667H11.9833L12.4167 2.5H14.0917L13.65 6.66667H16.625V8.33333H13.4667L13.1167 11.6667H16.6167V13.3333H12.9333L12.4917 17.5H10.8083L11.2417 13.3333H7.91667L7.475 17.5H5.8L6.23333 13.3333H3.25V11.6667H6.4H6.48667ZM8.1625 11.6667H11.4875L11.8375 8.33333H8.5125L8.1625 11.6667Z"
-        fill={color}
-      />
-    </svg>
-  );
-};
-const PrivateHashIcon = ({ size = 20, color = "#616161", ...rest }) => {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox={`0 0 ${size} ${size}`}
-      fill="none"
-      {...rest}
-    >
-      <path
-        d="M6.83667 8.33333L6.48667 11.6667H6.4H3.25V13.3333H6.23333L5.8 17.5H7.475L7.91667 13.3333H11.2417L10.8083 17.5H12.4917L12.9333 13.3333H16.6167V11.6667H13.1167L13.2917 10H11.6625L11.4875 11.6667H8.1625L8.5125 8.33333H10.8334V6.66667H8.66667L9.10833 2.5H7.43333L7 6.66667H3.325V8.33333H6.83667Z"
-        fill={color}
-      />
-      <path
-        d="M16.6875 4.16663V3.33329C16.6875 2.39996 15.875 1.66663 15 1.66663C14.125 1.66663 13.3333 2.39996 13.3333 3.33329V4.16663C12.8731 4.16663 12.5 4.53973 12.5 4.99996V7.49996C12.5 7.96019 12.8731 8.33329 13.3333 8.33329H15H16.6667C17.1269 8.33329 17.5 7.96019 17.5 7.49996V4.97913C17.5 4.53039 17.1362 4.16663 16.6875 4.16663ZM15.8333 4.16663H14.1667V3.33329C14.1667 2.8571 14.5556 2.49996 15 2.49996C15.4444 2.49996 15.8333 2.8571 15.8333 3.33329V4.16663Z"
-        fill={color}
-      />
-    </svg>
-  );
-};
-export default function ChannelIcon({
-  personal = false,
-  size = 20,
-  color = "#616161",
-  ...rest
-}) {
-  return personal ? (
-    <PrivateHashIcon size={size} color={color} {...rest} />
-  ) : (
-    <HashIcon size={size} color={color} {...rest} />
+    />
   );
 }

src/common/component/ChannelSetting/Overview.js

@@ -9,6 +9,7 @@ import Input from "../styled/Input";
 import Label from "../styled/Label";
 import Textarea from "../styled/Textarea";
 import SaveTip from "../SaveTip";
+import channelIcon from "../../../assets/icons/channel.svg?url";
 const StyledWrapper = styled.div`
   position: relative;
   width: 512px;
@@ -29,7 +30,7 @@ const StyledWrapper = styled.div`
       gap: 8px;
       .name {
         padding-left: 36px;
-        background: url(https://static.nicegoodthings.com/project/rustchat/icon.hash.svg);
+        background: url(${channelIcon});
         background-size: 20px;
         background-position-x: 8px;
         background-position-y: 8px;

src/common/component/ManageMembers.js

@@ -7,6 +7,8 @@ import useCopy from "../hook/useCopy";
 import { useLazyDeleteContactQuery } from "../../app/services/contact";
 import Contact from "./Contact";
 import StyledMenu from "./StyledMenu";
+import InviteLink from "./InviteLink";
+import moreIcon from "../../assets/icons/more.svg?url";
 const StyledWrapper = styled.section`
   display: flex;
   flex-direction: column;
@@ -116,6 +118,7 @@ export default function ManageMembers({ members = [] }) {
   const uids = !members || members.length == 0 ? contacts.ids : members;
   return (
     <StyledWrapper>
+      <InviteLink />
       <div className="intro">
         <h4 className="title">Manage Members</h4>
         <p className="desc">
@@ -142,7 +145,7 @@ export default function ManageMembers({ members = [] }) {
                     data-uid={uid}
                     onClick={toggleMenu}
                     className="dots"
-                    src="https://static.nicegoodthings.com/project/rustchat/icon.dots.svg"
+                    src={moreIcon}
                     alt="dots icon"
                   />
                   {menuVisible == uid && (

src/common/component/Message/Commands.js

@@ -7,7 +7,12 @@ import { addReplyingMessage } from "../../../app/slices/message";
 import StyledMenu from "../StyledMenu";
 import DeleteMessageConfirm from "./DeleteMessageConfirm";
 import EmojiPicker from "./EmojiPicker";
+import replyIcon from "../../../assets/icons/reply.svg?url";
+import reactIcon from "../../../assets/icons/reaction.svg?url";
+import editIcon from "../../../assets/icons/edit.svg?url";
+import moreIcon from "../../../assets/icons/more.svg?url";
 const StyledCmds = styled.ul`
+  z-index: 9999;
   position: absolute;
   right: 10px;
   top: 0;
@@ -33,6 +38,12 @@ const StyledCmds = styled.ul`
       height: 24px;
     }
   }
+  > .picker {
+    position: absolute;
+    left: -10px;
+    top: 0;
+    transform: translateX(-100%);
+  }
   .menu {
     position: absolute;
     top: 0;
@@ -70,34 +81,24 @@ export default function Commands({
   return (
     <StyledCmds className={`cmds ${alwaysVisible ? "visible" : ""}`}>
       <li className="cmd" onClick={toggleEmojiPopover}>
-        <img
-          src="https://static.nicegoodthings.com/project/rustchat/icon.reply.svg"
-          alt="icon emoji"
-        />
+        <img src={reactIcon} alt="icon emoji" />
       </li>
       {emojiPopVisible && (
-        <EmojiPicker mid={mid} hidePicker={toggleEmojiPopover} />
+        <div className="picker">
+          <EmojiPicker mid={mid} hidePicker={toggleEmojiPopover} />
+        </div>
       )}
       {currUid == from_uid ? (
         <li className="cmd" onClick={toggleEditMessage}>
-          <img
-            src="https://static.nicegoodthings.com/project/rustchat/icon.edit.svg"
-            alt="icon edit"
-          />
+          <img src={editIcon} alt="icon edit" />
         </li>
       ) : (
         <li className="cmd" onClick={handleReply}>
-          <img
-            src="https://static.nicegoodthings.com/project/rustchat/icon.forward.svg"
-            alt="icon reply"
-          />
+          <img src={replyIcon} alt="icon reply" />
         </li>
       )}
       <li className="cmd" onClick={toggleMenu}>
-        <img
-          src="https://static.nicegoodthings.com/project/rustchat/icon.dots.svg"
-          alt="icon emoji"
-        />
+        <img src={moreIcon} alt="icon emoji" />
       </li>
       {menuVisible && (
         <StyledMenu className="menu" ref={menuRef}>