fix: import svg

next/components/accordionPanel/fold/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from "react";
 import styled from "styled-components";
-import { ReactComponent as CaretDown } from "./caret-down.svg";
+import CaretDown from "./caret-down.svg";
 
 const Wrapper = styled.span`
   cursor: pointer;

next/components/account.js

@@ -9,7 +9,7 @@ import {
 } from "store/reducers/accountSlice";
 import Avatar from "./avatar";
 import { p_14_medium } from "../styles/textStyles";
-import { ReactComponent as UserIcon } from "../public/imgs/icons/user.svg";
+import UserIcon from "../public/imgs/icons/user.svg";
 import { shadow_200 } from "../styles/globalCss";
 import { useWindowSize } from "../frontedUtils/hooks";
 import ButtonPrimary from "@osn/common-ui/es/styled/Button";

next/components/chain/blockHeightInput.js

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import Input from "@osn/common-ui/es/styled/Input";
 import { ChainIcon } from "@osn/common-ui";
-import { ReactComponent as Loading } from "public/imgs/icons/loading.svg";
+import Loading from "public/imgs/icons/loading.svg";
 import { useDispatch, useSelector } from "react-redux";
 import {
   setSnapshotHeights,

next/components/connect/connectButton/index.js

@@ -1,7 +1,7 @@
 import { memo } from "react";
 import Button from "@osn/common-ui/es/styled/Button";
-import { ReactComponent as Metamask } from "./metamask.svg";
-import { ReactComponent as Polkadot } from "./polkadot.svg";
+import Metamask from "./metamask.svg";
+import Polkadot from "./polkadot.svg";
 import styled from "styled-components";
 import { useDispatch } from "react-redux";
 import { setAccount } from "../../../store/reducers/accountSlice";

next/components/datePicker.js

@@ -5,9 +5,9 @@ import "react-datepicker/dist/react-datepicker.css";
 import moment from "moment";
 
 import { useOnClickOutside } from "frontedUtils/hooks";
-import { ReactComponent as CaretRight } from "/public/imgs/icons/caret-right.svg";
-import { ReactComponent as ArrowLeft } from "/public/imgs/icons/arrow-left.svg";
-import { ReactComponent as ArrowRight } from "/public/imgs/icons/arrow-right.svg";
+import CaretRight from "/public/imgs/icons/caret-right.svg";
+import ArrowLeft from "/public/imgs/icons/arrow-left.svg";
+import ArrowRight from "/public/imgs/icons/arrow-right.svg";
 import Button from "@osn/common-ui/es/styled/Button";
 import {
   p_14_medium,

next/components/datetime.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { ReactComponent as TimeIcon } from "public/imgs/icons/timeline.svg";
+import TimeIcon from "public/imgs/icons/timeline.svg";
 import { p_14_normal } from "../styles/textStyles";
 
 const Wrapper = styled.div`

next/components/header.js

@@ -15,12 +15,12 @@ import {
   showHeaderMenuSelector,
 } from "../store/reducers/showConnectSlice";
 import { Header as OsnHeader } from "@osn/common-ui";
-import { ReactComponent as Plus } from "../public/imgs/icons/plus.svg";
-import { ReactComponent as Discussions } from "../public/imgs/icons/discussions.svg";
+import Plus from "../public/imgs/icons/plus.svg";
+import Discussions from "../public/imgs/icons/discussions.svg";
 import { Flex } from "@osn/common-ui";
 import Menu from "@/components/menu";
 import NotificationBell from "./notification/bell";
-import { ReactComponent as CaretRight } from "/public/imgs/icons/caret-right-s.svg";
+import CaretRight from "../public/imgs/icons/caret-right-s.svg";
 
 const CaretRightIcon = styled(CaretRight)`
   margin-left: 16px;

next/components/listTab.js

@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
 import { useEffect, useState } from "react";
-import { ReactComponent as QuestionMark } from "../public/imgs/icons/question-mark.svg";
+import QuestionMark from "../public/imgs/icons/question-mark.svg";
 import { LIST_TAB_ITEMS } from "frontedUtils/constants";
 import { p_16_semibold } from "../styles/textStyles";
 import { useRouter } from "next/router";

next/components/loadingInput.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { ReactComponent as Loading } from "public/imgs/icons/loading.svg";
+import Loading from "public/imgs/icons/loading.svg";
 import { Input } from "@osn/common-ui";
 
 const Wrapper = styled.div`

next/components/logoUploader/index.js

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { ReactComponent as UploadSVG } from "./upload.svg";
+import UploadSVG from "./upload.svg";
 import { useRef } from "react";
 
 const Wrapper = styled.div`

next/components/menu.js

@@ -4,8 +4,8 @@ import { shadow_200 } from "../styles/globalCss";
 import { useSelector } from "react-redux";
 import { showHeaderMenuSelector } from "../store/reducers/showConnectSlice";
 import { p_14_medium } from "../styles/textStyles";
-import { ReactComponent as Plus } from "../public/imgs/icons/grey-plus.svg";
-import { ReactComponent as Discussions } from "../public/imgs/icons/grey-discussions.svg";
+import Plus from "../public/imgs/icons/grey-plus.svg";
+import Discussions from "../public/imgs/icons/grey-discussions.svg";
 
 const MenuWrapper = styled.div`
   cursor: auto;

next/components/multiSelect/optionCheck.js

@@ -1,6 +1,6 @@
 import styled from "styled-components";
-import { ReactComponent as CheckedSVG } from "./checked.svg";
-import { ReactComponent as UncheckedSVG } from "./unchecked.svg";
+import CheckedSVG from "./checked.svg";
+import UncheckedSVG from "./unchecked.svg";
 import { noop } from "@osn/common-ui";
 
 const Wrapper = styled.div`

next/components/multiSelect/selectedItems.js

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { ReactComponent as DropSVG } from "./drop.svg";
+import DropSVG from "./drop.svg";
 import { noop } from "@osn/common-ui";
 
 const Wrapper = styled.div`

next/components/newSpace/backButton/index.js

@@ -3,7 +3,7 @@ import {
   currentStepSelector,
   setCurrentStep,
 } from "store/reducers/newSpaceSlice";
-import { ReactComponent as BackSVG } from "./back.svg";
+import BackSVG from "./back.svg";
 import styled from "styled-components";
 import { Button } from "@osn/common-ui";
 

next/components/newSpace/step2/newAssetButton/index.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { ReactComponent as AddAvg } from "./add.svg";
+import AddAvg from "./add.svg";
 import { noop } from "@osn/common-ui";
 
 const Wrapper = styled.div`

next/components/notification/bell.js

@@ -3,8 +3,8 @@ import Link from "next/link";
 import { useSelector } from "react-redux";
 import { unreadSelector } from "store/reducers/notificationSlice";
 import { FlexCenter } from "@osn/common-ui";
-import { ReactComponent as NotificationSVG } from "./notification.svg";
-import { ReactComponent as UnreadNotificationSVG } from "./unread-notification.svg";
+import NotificationSVG from "./notification.svg";
+import UnreadNotificationSVG from "./unread-notification.svg";
 import { loginAddressSelector } from "store/reducers/accountSlice";
 
 const Wrapper = styled(FlexCenter)`

next/components/notification/notificationItem.js

@@ -6,7 +6,7 @@ import {
   primary_turquoise_500,
   text_dark_accessory,
 } from "@osn/common-ui/es/styles/colors";
-import { ReactComponent as CheckIcon } from "@osn/common-ui/es/imgs/icons/check.svg";
+import CheckIcon from "@osn/common-ui/es/imgs/icons/check.svg";
 import Link from "next/link";
 import { MOBILE_SIZE } from "@osn/constants";
 import { useState } from "react";

next/components/postAddress.js

@@ -5,7 +5,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { fetchIdentity } from "services/identity";
 import Avatar from "./avatar";
 import IdentityIcon from "@osn/common-ui/es/User/IdentityIcon";
-import { ReactComponent as Loading } from "public/imgs/icons/loading.svg";
+import Loading from "public/imgs/icons/loading.svg";
 import { useWindowSize } from "frontedUtils/hooks";
 import { addressEllipsis } from "frontedUtils";
 import { isAddress } from "@polkadot/util-crypto";

next/components/postCreate/BalanceRow.js

@@ -1,4 +1,4 @@
-import { ReactComponent as Loading } from "../../public/imgs/icons/loading.svg";
+import Loading from "../../public/imgs/icons/loading.svg";
 import Row from "@/components/row";
 import Tooltip from "@/components/tooltip";
 import { bigNumber2LocaleWithAbbr, toPrecision } from "../../frontedUtils";

next/components/postCreate/choice.js

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import { useRef, useState } from "react";
 
-import { ReactComponent as Substract } from "public/imgs/icons/substract.svg";
+import Substract from "public/imgs/icons/substract.svg";
 import { p_14_medium } from "../../styles/textStyles";
 import { FlexBetween } from "@osn/common-ui";
 

next/components/postDetail/appendants.js

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { ReactComponent as AddIcon } from "/public/imgs/icons/add-appendant.svg";
+import AddIcon from "/public/imgs/icons/add-appendant.svg";
 import { useRouter } from "next/router";
 import {
   DividerWrapper,

next/components/postDetail/strategyResult/biasedVotingResult.js

@@ -1,5 +1,5 @@
 import BigNumber from "bignumber.js";
-import { ReactComponent as LinkSvg } from "public/imgs/icons/link.svg";
+import LinkSvg from "public/imgs/icons/link.svg";
 import ExternalLink from "@osn/common-ui/es/ExternalLink";
 import BiasedVotingItem from "../biasedVotingItem";
 import {

next/components/postResult/index.js

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { useRef, useState } from "react";
 
-import { ReactComponent as StatusSvg } from "public/imgs/icons/status.svg";
+import StatusSvg from "public/imgs/icons/status.svg";
 import { useOffset } from "frontedUtils/hooks";
 import Popup from "./popup";
 

next/components/postResult/popup.js

@@ -5,7 +5,7 @@ import { useSelector, useDispatch } from "react-redux";
 import { p_14_medium, p_16_semibold } from "styles/textStyles";
 import ValueDisplay from "../valueDisplay";
 import { votesSelector, fetchVote } from "store/reducers/voteSlice";
-import { ReactComponent as LoadingSvg } from "public/imgs/icons/loading.svg";
+import LoadingSvg from "public/imgs/icons/loading.svg";
 import BigNumber from "bignumber.js";
 
 const ResultWrapper = styled.div`

next/components/share/index.js

@@ -1,8 +1,8 @@
 import { useState, useCallback } from "react";
 import copy from "copy-to-clipboard";
 import styled from "styled-components";
-import { ReactComponent as Twitter } from "./twitter.svg";
-import { ReactComponent as CopySvg } from "./copy.svg";
+import Twitter from "./twitter.svg";
+import CopySvg from "./copy.svg";
 import Tooltip from "@/components/tooltip";
 
 const Wrapper = styled.div`

next/components/sideBar/sideSectionTitle.js

@@ -4,7 +4,7 @@ import { memo } from "react";
 import { Flex, FlexBetween } from "@osn/common-ui";
 import SubTitle from "@osn/common-ui/es/styled/SubTitle";
 import Tooltip from "@/components/tooltip";
-import { ReactComponent as QuestionMark } from "../../public/imgs/icons/question-mark.svg";
+import QuestionMark from "../../public/imgs/icons/question-mark.svg";
 
 const TitleWrapper = styled(FlexBetween)`
   ${p_16_semibold};

next/components/spaceListItem/joinButton.js

@@ -1,20 +1,19 @@
 import styled from "styled-components";
 import Tooltip from "../tooltip";
-import { ReactComponent as JoinedSVG } from "./joined.svg";
-import { ReactComponent as NotJoinedSVG } from "./not-joined.svg";
+import JoinedSVG from "./joined.svg";
+import NotJoinedSVG from "./not-joined.svg";
 
 const NotJoinedMark = styled(NotJoinedSVG)`
   &:hover {
     path {
-      fill: #B7C0CC;
+      fill: #b7c0cc;
     }
   }
 `;
 
 const JoinedMark = styled(JoinedSVG)``;
 
-
-export default function JoinButton({ joined, onClick = ()=>{} }) {
+export default function JoinButton({ joined, onClick = () => {} }) {
   if (!joined) {
     return (
       <Tooltip content={"Join space"}>

next/components/steps/checkedIndex.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { ReactComponent as CheckedSVG } from "./checked.svg";
+import CheckedSVG from "./checked.svg";
 import { Index } from "./styled";
 
 const Wrapper = styled(Index)`

next/components/symbolIcon.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { ReactComponent as LKSM } from "../public/imgs/icons/symbol/lksm.svg";
-import { ReactComponent as taiKSM } from "../public/imgs/icons/symbol/taiKSM.svg";
-import { ReactComponent as KSM } from "../public/imgs/icons/chain/kusama.svg";
-import { ReactComponent as DOT } from "../public/imgs/icons/chain/polkadot.svg";
+import LKSM from "../public/imgs/icons/symbol/lksm.svg";
+import taiKSM from "../public/imgs/icons/symbol/taiKSM.svg";
+import KSM from "../public/imgs/icons/chain/kusama.svg";
+import DOT from "../public/imgs/icons/chain/polkadot.svg";
 import styled from "styled-components";
 
 const Wrapper = styled.div`

next/components/toast/toastItem.js

@@ -3,8 +3,8 @@ import { useDispatch } from "react-redux";
 import styled, { css } from "styled-components";
 
 import { removeToast } from "store/reducers/toastSlice";
-import { ReactComponent as Close } from "public/imgs/icons/close.svg";
-import { ReactComponent as Sticky } from "public/imgs/icons/sticky.svg";
+import Close from "public/imgs/icons/close.svg";
+import Sticky from "public/imgs/icons/sticky.svg";
 import { TOAST_TYPES } from "frontedUtils/constants";
 import { useIsMounted } from "frontedUtils/hooks";
 

next/components/uploadBanner/uploader.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { Flex } from "@osn/common-ui";
 import nextApi from "services/nextApi";
 import { LoadingIcon } from "@osn/common-ui";
-import { ReactComponent as Upload } from "../../public/imgs/icons/upload.svg";
+import Upload from "../../public/imgs/icons/upload.svg";
 
 const UploadIcon = styled(Upload)`
   flex-basis: 100%;

next/pages/notifications.js

@@ -11,7 +11,7 @@ import { clearUnread } from "store/reducers/notificationSlice";
 import { accountSelector } from "store/reducers/accountSlice";
 import NotificationItem from "../components/notification/notificationItem";
 import NotificationTabs from "../components/notification/notificationTabs";
-import { ReactComponent as CheckUnderline } from "@osn/common-ui/es/imgs/icons/check-underline.svg";
+import CheckUnderline from "@osn/common-ui/es/imgs/icons/check-underline.svg";
 import { text_dark_minor } from "@osn/common-ui/es/styles/colors";
 import { p_14_medium } from "@osn/common-ui/es/styles/textStyles";
 import { useNotifications } from "hooks/notification/useNotifications";