Handle svg files using svgr

components/chain-list/all-chains-item.tsx

@@ -1,4 +1,3 @@
-import { ChainItemType } from "../../types";
 import {
   Dispatch,
   FunctionComponent,
@@ -6,19 +5,19 @@ import {
   useEffect,
   useState,
 } from "react";
+import { ChainItemType } from "../../types";
 
-import { ChainImage } from "./chain-image";
+import styled from "styled-components";
+import AllChainsIcon from "../../public/images/svg/all-chains-icon.svg";
+import color from "../../styles/color";
 import { Flex1 } from "../../styles/flex-1";
+import { Checkbox } from "../checkbox";
 import {
   ChainInfoContainer,
   ChainItemContainer,
   ChainName,
   WalletAddress,
 } from "./chain-item";
-import color from "../../styles/color";
-import styled from "styled-components";
-import { Checkbox } from "../checkbox";
-import AllChainsIcon from "../../public/images/svg/all-chains-icon.svg";
 
 interface Props {
   chainList: ChainItemType[];
@@ -55,7 +54,7 @@ export const AllChainsItem: FunctionComponent<Props> = (props) => {
         checked={checked}
         onClick={checkHandler}
       >
-        <ChainImage src={AllChainsIcon} fill={true} alt={`all chain images`} />
+        <AllChainsIcon />
         <ChainInfoContainer>
           <ChainName>{`.all chains(${chainList.length})`}</ChainName>
           <WalletAddress>

components/connect-wallet-modal/wallet-item.tsx

@@ -3,7 +3,6 @@ import ArrowRightIcon from "../../public/images/svg/arrow-right.svg";
 import color from "../../styles/color";
 import { Flex1 } from "../../styles/flex-1";
 import styled from "styled-components";
-import Image from "next/image";
 import {
   MINIMUM_VERSION,
   SELECTED_WALLET_KEY,
@@ -67,14 +66,9 @@ export const WalletItem: FunctionComponent<Props> = (props: Props) => {
 
   return (
     <WalleButton disabled={!wallet.isReady} onClick={onClickWalletItem}>
-      <WalletIcon>
+      <WalletIconContainer>
-        <Image
+        <wallet.IconComponent width="60" height="60" />
-          src={wallet.image}
+      </WalletIconContainer>
-          fill={true}
-          sizes="3.75rem"
-          alt="wallet Icon"
-        />
-      </WalletIcon>
       <WalletContentContainer>
         <WalletName>{wallet.name}</WalletName>
         {wallet.isReady ? (
@@ -88,7 +82,7 @@ export const WalletItem: FunctionComponent<Props> = (props: Props) => {
 
       <Flex1 />
 
-      <Image src={ArrowRightIcon} alt="arrow right icon" />
+      <ArrowRightIcon />
     </WalleButton>
   );
 };
@@ -116,7 +110,7 @@ const WalleButton = styled.button`
   }
 `;
 
-const WalletIcon = styled.div`
+const WalletIconContainer = styled.div`
   position: relative;
 
   width: 3.75rem;

components/error-modal/index.tsx

@@ -50,12 +50,7 @@ export const ErrorModal: FunctionComponent<Props> = (props) => {
       <ModalContainer>
         <ErrorTitleContainer>
           <ErrorImageContainer>
-            <Image
+            <ErrorIcon />
-              src={ErrorIcon}
-              fill={true}
-              sizes="2.5rem"
-              alt="error icon"
-            />
           </ErrorImageContainer>
           Error
         </ErrorTitleContainer>
@@ -65,12 +60,7 @@ export const ErrorModal: FunctionComponent<Props> = (props) => {
         {errorMessage?.path ? (
           <ErrorBackButton onClick={onClose}>
             <ErrorBackIconContainer>
-              <Image
+              <ArrowLeftIcon />
-                src={ArrowLeftIcon}
-                fill={true}
-                sizes="1.5rem"
-                alt="back button icon"
-              />
             </ErrorBackIconContainer>
             GO BACK TO HOME
           </ErrorBackButton>

components/final-check-modal/index.tsx

@@ -1,14 +1,13 @@
+import { Bech32Address } from "@keplr-wallet/cosmos";
+import Image from "next/image";
+import { useRouter } from "next/router";
 import { FunctionComponent } from "react";
-import color from "../../styles/color";
 import ReactModal from "react-modal";
 import styled from "styled-components";
-import TwitterIcon from "../../public/images/svg/twitter-modal-icon.svg";
+import { MINIMUM_OSMO_FEE } from "../../constants/wallet";
-import Image from "next/image";
+import color from "../../styles/color";
 import { PrimaryButton } from "../primary-button";
 import { SecondaryButton } from "../secondary-button";
-import { MINIMUM_OSMO_FEE } from "../../constants/wallet";
-import { useRouter } from "next/router";
-import { Bech32Address } from "@keplr-wallet/cosmos";
 
 interface Props {
   twitterUserName: string | undefined;

components/logo/index.tsx

@@ -1,25 +1,18 @@
 // NextJs
-import Image from "next/image";
 import Link from "next/link";
 
 // Image Assets
 import LogoIcon from "../../public/images/svg/logo.svg";
 
 // Styles
-import styled from "styled-components";
 import { FunctionComponent } from "react";
+import styled from "styled-components";
 
 export const Logo: FunctionComponent = () => {
   return (
     <Link href="/">
       <LogoContainer>
-        <Image
+        <LogoIcon />
-          src={LogoIcon}
-          fill={true}
-          sizes="10rem"
-          alt="Home Logo"
-          priority
-        />
       </LogoContainer>
     </Link>
   );

components/search-input/index.tsx

@@ -1,7 +1,5 @@
 import { Dispatch, FunctionComponent, SetStateAction } from "react";
 
-import Image from "next/image";
-
 import styled from "styled-components";
 import color from "../../styles/color";
 
@@ -18,7 +16,7 @@ export const SearchInput: FunctionComponent<Props> = (props) => {
   return (
     <SearchContainer>
       <SearchIconContainer>
-        <Image src={SearchIcon} fill={true} sizes="1.3rem" alt="search icon" />
+        <SearchIcon />
       </SearchIconContainer>
 
       <SearchText

constants/wallet.tsx

@@ -1,7 +1,6 @@
-import { StaticImageData } from "next/image";
+import { SVGProps } from "react";
-
-import KeplrIcon from "../public/images/svg/keplr-icon.svg";
 import CosmostationIcon from "../public/images/svg/cosmostation-icon.svg";
+import KeplrIcon from "../public/images/svg/keplr-icon.svg";
 
 export const WALLET_INSTALL_URL =
   "https://chrome.google.com/webstore/detail/keplr/dmkamcknogkgcdfhhbddcghachkejeap";
@@ -13,20 +12,20 @@ export const MINIMUM_OSMO_FEE = process.env.MINIMUM_OSMO_FEE ?? "0.5 OSMO";
 export type WalletName = "Keplr" | "Cosmostation";
 export interface WalletType {
   name: WalletName;
-  image: StaticImageData;
   isReady: boolean;
+  IconComponent: (props: SVGProps<SVGSVGElement>) => JSX.Element;
 }
 
 export const WalletList: WalletType[] = [
   {
     name: "Keplr",
-    image: KeplrIcon,
     isReady: true,
+    IconComponent: KeplrIcon,
   },
   {
     name: "Cosmostation",
-    image: CosmostationIcon,
     isReady: false,
+    IconComponent: CosmostationIcon,
   },
 ];
 

pages/complete/index.tsx

@@ -115,7 +115,7 @@ export default function CompletePage() {
 
         <DescriptionContainer>
           <AlertIcon>
-            <Image src={AlertCircleOutlineIcon} fill={true} alt="alert icon" />
+            <AlertCircleOutlineIcon />
           </AlertIcon>
           <DescriptionText>
             If you want to make that name address with same twitter account,
@@ -125,7 +125,7 @@ export default function CompletePage() {
 
         {/*<ShareButtonContainer onClick={onClickShareButton}>*/}
         {/*  <ShareButtonText>SHARE MY NAME</ShareButtonText>*/}
-        {/*  <Image src={TwitterIcon} alt="twitter icon" />*/}
+        {/* <TwitterIcon /> */}
         {/*</ShareButtonContainer>*/}
       </MainContainer>
     </Container>

pages/index.tsx

@@ -1,8 +1,5 @@
 import * as amplitude from "@amplitude/analytics-browser";
 
-// NextJs
-import Image from "next/image";
-
 // Styles
 import styled from "styled-components";
 import color from "../styles/color";
@@ -52,28 +49,10 @@ export default function Home() {
       <MainContainer>
         <MainTitleContainer>
           <MainTitleImageBackground>
-            <Image
+            <StarIcon className="starIcon first" />
-              src={StarIcon}
+            <StarIcon className="starIcon last" />
-              width={50}
-              height={50}
-              alt="Star Icon"
-              className="starIcon first"
-            />
-            <Image
-              src={StarIcon}
-              width={50}
-              height={50}
-              alt="Star Icon"
-              className="starIcon last"
-            />
             <MainTitleImageContainer>
-              <Image
+              <MainTitle />
-                src={MainTitle}
-                fill={true}
-                sizes="60rem"
-                alt="Main Title"
-                priority
-              />
             </MainTitleImageContainer>
           </MainTitleImageBackground>
 
@@ -97,32 +76,18 @@ export default function Home() {
           </CTAContainer>
           <SubContainer>
             <CheckContainer>
-              <CheckIconContainer>
+              <CheckIcon />
-                <Image
-                  src={CheckIcon}
-                  fill={true}
-                  sizes="1.6rem"
-                  alt="Check Icon"
-                />
-              </CheckIconContainer>
               Osmo is required for this transaction
             </CheckContainer>
             <CheckContainer>
-              <CheckIconContainer>
+              <CheckIcon />
-                <Image
-                  src={CheckIcon}
-                  fill={true}
-                  sizes="1.6rem"
-                  alt="Check Icon"
-                />
-              </CheckIconContainer>
               More wallet support coming soon
             </CheckContainer>
           </SubContainer>
         </MainTitleContainer>
 
         <MainLogoContainer>
-          <Image src={MainLogo} fill={true} sizes="25rem" alt="Main Logo" />
+          <MainLogo />
         </MainLogoContainer>
       </MainContainer>
 
@@ -158,7 +123,7 @@ const MainContainer = styled.div`
   margin-top: 15rem;
   margin-left: 10rem;
 
-  img.starIcon {
+  .starIcon {
     position: absolute;
 
     &.first {

public/images/svg/cosmostation-icon.svg

@@ -1,4 +1,4 @@
-<svg width="81" height="80" viewBox="0 0 81 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="current" height="current" viewBox="0 0 81 80" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect x="0.25" width="80" height="80" rx="20" fill="#1B1B21"/>
 <g clip-path="url(#clip0_249_4007)">
 <path d="M30.5465 56.0417L19.3466 37.1577C18.779 36.2007 18.779 35.0167 19.3466 34.0597L30.5465 15.1855C31.1141 14.2285 32.1682 13.6365 33.3034 13.6365H55.7032C56.8384 13.6365 57.8925 14.2285 58.4601 15.1855L69.6598 34.0696L64.1562 37.1676L53.8583 19.8325H35.1278L25.7624 35.6186L36.04 52.9538L30.5363 56.0516L30.5465 56.0417Z" fill="#9C6CFF"/>

public/images/svg/keplr-icon.svg

@@ -1,4 +1,4 @@
-<svg width="60" height="61" viewBox="0 0 60 61" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="current" height="current" viewBox="0 0 60 61" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <path d="M46.3636 0.5H13.6364C6.10521 0.5 0 6.60521 0 14.1364V46.8636C0 54.3948 6.10521 60.5 13.6364 60.5H46.3636C53.8948 60.5 60 54.3948 60 46.8636V14.1364C60 6.60521 53.8948 0.5 46.3636 0.5Z" fill="url(#pattern0)"/>
 <path d="M24.3786 46.1818V32.2906L37.6296 46.1818H45.0001V45.8213L29.7604 30.0064L43.8246 14.9984V14.8181H36.4066L24.3786 28.0798V14.8181H18.4092V46.1818H24.3786Z" fill="white"/>
 <defs>