add icons

components/AccountNav/AccountNav.tsx

 import React from 'react';
 import { VStack, Text } from '@chakra-ui/react';
 import AccountNavLink from './AccountNavLink';
+import { FaRegStar, FaTag, FaUserTag, FaCode, FaMarsDouble } from 'react-icons/fa'
 
 const navItems = [
-  { text: 'Watchlist', pathname: '/watchlist' },
-  { text: 'Private tags', pathname: '/private-tags' },
-  { text: 'Public tags', pathname: '/public-tags' },
-  { text: 'API keys', pathname: '/api-keys' },
-  { text: 'Custom ABI', pathname: '/custom-abi' },
+  { text: 'Watchlist', pathname: '/watchlist', icon: FaRegStar },
+  { text: 'Private tags', pathname: '/private-tags', icon: FaUserTag },
+  { text: 'Public tags', pathname: '/public-tags', icon: FaTag },
+  { text: 'API keys', pathname: '/api-keys', icon: FaMarsDouble },
+  { text: 'Custom ABI', pathname: '/custom-abi', icon: FaCode },
 ]
 
 const AccountNav = () => {

components/AccountNav/AccountNavLink.tsx

 import React from 'react';
-import { Link } from '@chakra-ui/react';
+import { Link, Icon, Text, HStack } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';
+import type { IconType } from 'react-icons';
 
 interface Props {
   pathname: string;
   text: string;
+  icon: IconType;
 }
 
-const AccountNavLink = ({ text, pathname }: Props) => {
+const AccountNavLink = ({ text, pathname, icon }: Props) => {
   const router = useRouter();
   const isActive = router.pathname === pathname;
 
@@ -21,7 +23,10 @@ const AccountNavLink = ({ text, pathname }: Props) => {
         bgColor={ isActive ? 'green.700' : 'transparent' }
         borderRadius="10px"
       >
-        { text }
+        <HStack spacing="4">
+          <Icon as={ icon } boxSize="5"/>
+          <Text>{ text }</Text>
+        </HStack>
       </Link>
     </NextLink>
   )

package.json

@@ -16,7 +16,8 @@
     "framer-motion": "^6",
     "next": "12.1.6",
     "react": "18.1.0",
-    "react-dom": "18.1.0"
+    "react-dom": "18.1.0",
+    "react-icons": "^4.4.0"
   },
   "devDependencies": {
     "@types/node": "17.0.36",

yarn.lock

@@ -2684,6 +2684,11 @@ react-focus-lock@^2.9.1:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-icons@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.4.0.tgz#a13a8a20c254854e1ec9aecef28a95cdf24ef703"
+  integrity sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"