migrate snippets

lib/hooks/useNavItems.tsx

@@ -4,28 +4,6 @@ import React from 'react';
 import type { NavItemInternal, NavItem, NavGroupItem } from 'types/client/navigation-items';
 
 import config from 'configs/app';
-import abiIcon from 'icons/ABI.svg';
-import apiKeysIcon from 'icons/API.svg';
-import appsIcon from 'icons/apps.svg';
-import withdrawalsIcon from 'icons/arrows/north-east.svg';
-import depositsIcon from 'icons/arrows/south-east.svg';
-import blocksIcon from 'icons/block.svg';
-import gearIcon from 'icons/gear.svg';
-import globeIcon from 'icons/globe-b.svg';
-import graphQLIcon from 'icons/graphQL.svg';
-import outputRootsIcon from 'icons/output_roots.svg';
-import privateTagIcon from 'icons/privattags.svg';
-import publicTagIcon from 'icons/publictags.svg';
-import apiDocsIcon from 'icons/restAPI.svg';
-import rpcIcon from 'icons/RPC.svg';
-import statsIcon from 'icons/stats.svg';
-import tokensIcon from 'icons/token.svg';
-import topAccountsIcon from 'icons/top-accounts.svg';
-import transactionsIcon from 'icons/transactions.svg';
-import txnBatchIcon from 'icons/txn_batches.svg';
-import verifiedIcon from 'icons/verified.svg';
-import verifyContractIcon from 'icons/verify-contract.svg';
-import watchlistIcon from 'icons/watchlist.svg';
 import { rightLineArrow } from 'lib/html-entities';
 import UserAvatar from 'ui/shared/UserAvatar';
 
@@ -50,35 +28,43 @@ export default function useNavItems(): ReturnType {
   return React.useMemo(() => {
     let blockchainNavItems: Array<NavItem> | Array<Array<NavItem>> = [];
 
-    const topAccounts = !config.UI.views.address.hiddenViews?.top_accounts ? {
+    const topAccounts: NavItem | null = !config.UI.views.address.hiddenViews?.top_accounts ? {
       text: 'Top accounts',
       nextRoute: { pathname: '/accounts' as const },
-      icon: topAccountsIcon,
+      icon: 'top-accounts',
       isActive: pathname === '/accounts',
     } : null;
-    const blocks = {
+    const blocks: NavItem | null = {
       text: 'Blocks',
       nextRoute: { pathname: '/blocks' as const },
-      icon: blocksIcon,
+      icon: 'block',
       isActive: pathname === '/blocks' || pathname === '/block/[height_or_hash]',
     };
-    const txs = {
+    const txs: NavItem | null = {
       text: 'Transactions',
       nextRoute: { pathname: '/txs' as const },
-      icon: transactionsIcon,
+      icon: 'transactions',
       isActive: pathname === '/txs' || pathname === '/tx/[hash]',
     };
-    const verifiedContracts =
-    // eslint-disable-next-line max-len
-     { text: 'Verified contracts', nextRoute: { pathname: '/verified-contracts' as const }, icon: verifiedIcon, isActive: pathname === '/verified-contracts' };
+    const verifiedContracts: NavItem | null =
+     {
+       text: 'Verified contracts',
+       nextRoute: { pathname: '/verified-contracts' as const },
+       icon: 'verified',
+       isActive: pathname === '/verified-contracts',
+     };
 
     if (config.features.zkEvmRollup.isEnabled) {
       blockchainNavItems = [
         [
           txs,
           blocks,
-          // eslint-disable-next-line max-len
-          { text: 'Txn batches', nextRoute: { pathname: '/zkevm-l2-txn-batches' as const }, icon: txnBatchIcon, isActive: pathname === '/zkevm-l2-txn-batches' || pathname === '/zkevm-l2-txn-batch/[number]' },
+          {
+            text: 'Txn batches',
+            nextRoute: { pathname: '/zkevm-l2-txn-batches' as const },
+            icon: 'txn_batches',
+            isActive: pathname === '/zkevm-l2-txn-batches' || pathname === '/zkevm-l2-txn-batch/[number]',
+          },
         ],
         [
           topAccounts,
@@ -90,16 +76,16 @@ export default function useNavItems(): ReturnType {
         [
           txs,
           // eslint-disable-next-line max-len
-          { text: `Deposits (L1${ rightLineArrow }L2)`, nextRoute: { pathname: '/l2-deposits' as const }, icon: depositsIcon, isActive: pathname === '/l2-deposits' },
+          { text: `Deposits (L1${ rightLineArrow }L2)`, nextRoute: { pathname: '/l2-deposits' as const }, icon: 'arrows/south-east', isActive: pathname === '/l2-deposits' },
           // eslint-disable-next-line max-len
-          { text: `Withdrawals (L2${ rightLineArrow }L1)`, nextRoute: { pathname: '/l2-withdrawals' as const }, icon: withdrawalsIcon, isActive: pathname === '/l2-withdrawals' },
+          { text: `Withdrawals (L2${ rightLineArrow }L1)`, nextRoute: { pathname: '/l2-withdrawals' as const }, icon: 'arrows/north-east', isActive: pathname === '/l2-withdrawals' },
         ],
         [
           blocks,
           // eslint-disable-next-line max-len
-          { text: 'Txn batches', nextRoute: { pathname: '/l2-txn-batches' as const }, icon: txnBatchIcon, isActive: pathname === '/l2-txn-batches' },
+          { text: 'Txn batches', nextRoute: { pathname: '/l2-txn-batches' as const }, icon: 'txn_batches', isActive: pathname === '/l2-txn-batches' },
           // eslint-disable-next-line max-len
-          { text: 'Output roots', nextRoute: { pathname: '/l2-output-roots' as const }, icon: outputRootsIcon, isActive: pathname === '/l2-output-roots' },
+          { text: 'Output roots', nextRoute: { pathname: '/l2-output-roots' as const }, icon: 'output_roots', isActive: pathname === '/l2-output-roots' },
         ],
         [
           topAccounts,
@@ -115,7 +101,7 @@ export default function useNavItems(): ReturnType {
         config.features.beaconChain.isEnabled && {
           text: 'Withdrawals',
           nextRoute: { pathname: '/withdrawals' as const },
-          icon: withdrawalsIcon,
+          icon: 'arrow/north-east',
           isActive: pathname === '/withdrawals',
         },
       ].filter(Boolean);
@@ -125,23 +111,23 @@ export default function useNavItems(): ReturnType {
       config.features.restApiDocs.isEnabled ? {
         text: 'REST API',
         nextRoute: { pathname: '/api-docs' as const },
-        icon: apiDocsIcon,
+        icon: 'restAPI',
         isActive: pathname === '/api-docs',
       } : null,
       config.features.graphqlApiDocs.isEnabled ? {
         text: 'GraphQL',
         nextRoute: { pathname: '/graphiql' as const },
-        icon: graphQLIcon,
+        icon: 'graphQL',
         isActive: pathname === '/graphiql',
       } : null,
       !config.UI.sidebar.hiddenLinks?.rpc_api && {
         text: 'RPC API',
-        icon: rpcIcon,
+        icon: 'RPC',
         url: 'https://docs.blockscout.com/for-users/api/rpc-endpoints',
       },
       !config.UI.sidebar.hiddenLinks?.eth_rpc_api && {
         text: 'Eth RPC API',
-        icon: rpcIcon,
+        icon: 'RPC',
         url: ' https://docs.blockscout.com/for-users/api/eth-rpc',
       },
     ].filter(Boolean);
@@ -149,42 +135,42 @@ export default function useNavItems(): ReturnType {
     const mainNavItems: ReturnType['mainNavItems'] = [
       {
         text: 'Blockchain',
-        icon: globeIcon,
+        icon: 'globe-b',
         isActive: blockchainNavItems.flat().some(item => isInternalItem(item) && item.isActive),
         subItems: blockchainNavItems,
       },
       {
         text: 'Tokens',
         nextRoute: { pathname: '/tokens' as const },
-        icon: tokensIcon,
+        icon: 'token',
         isActive: pathname.startsWith('/token'),
       },
       config.features.marketplace.isEnabled ? {
         text: 'Apps',
         nextRoute: { pathname: '/apps' as const },
-        icon: appsIcon,
+        icon: 'apps',
         isActive: pathname.startsWith('/app'),
       } : null,
       config.features.stats.isEnabled ? {
         text: 'Charts & stats',
         nextRoute: { pathname: '/stats' as const },
-        icon: statsIcon,
+        icon: 'stats',
         isActive: pathname === '/stats',
       } : null,
       apiNavItems.length > 0 && {
         text: 'API',
-        icon: apiDocsIcon,
+        icon: 'restAPI',
         isActive: apiNavItems.some(item => isInternalItem(item) && item.isActive),
         subItems: apiNavItems,
       },
       {
         text: 'Other',
-        icon: gearIcon,
+        icon: 'gear',
         subItems: [
           {
             text: 'Verify contract',
             nextRoute: { pathname: '/contract-verification' as const },
-            icon: verifyContractIcon,
+            icon: 'verify-contract',
             isActive: pathname.startsWith('/contract-verification'),
           },
           ...config.UI.sidebar.otherLinks,
@@ -196,35 +182,37 @@ export default function useNavItems(): ReturnType {
       {
         text: 'Watch list',
         nextRoute: { pathname: '/account/watchlist' as const },
-        icon: watchlistIcon,
+        icon: 'watchlist',
         isActive: pathname === '/account/watchlist',
       },
       {
         text: 'Private tags',
         nextRoute: { pathname: '/account/tag-address' as const },
-        icon: privateTagIcon,
+        icon: 'privattags',
         isActive: pathname === '/account/tag-address',
       },
       {
         text: 'Public tags',
         nextRoute: { pathname: '/account/public-tags-request' as const },
-        icon: publicTagIcon, isActive: pathname === '/account/public-tags-request',
+        icon: 'publictags',
+        isActive: pathname === '/account/public-tags-request',
       },
       {
         text: 'API keys',
         nextRoute: { pathname: '/account/api-key' as const },
-        icon: apiKeysIcon, isActive: pathname === '/account/api-key',
+        icon: 'API',
+        isActive: pathname === '/account/api-key',
       },
       {
         text: 'Custom ABI',
         nextRoute: { pathname: '/account/custom-abi' as const },
-        icon: abiIcon,
+        icon: 'ABI',
         isActive: pathname === '/account/custom-abi',
       },
       config.features.addressVerification.isEnabled && {
         text: 'Verified addrs',
         nextRoute: { pathname: '/account/verified-addresses' as const },
-        icon: verifiedIcon,
+        icon: 'verified',
         isActive: pathname === '/account/verified-addresses',
       },
     ].filter(Boolean);

types/client/navigation-items.ts

@@ -2,8 +2,10 @@ import type React from 'react';
 
 import type { Route } from 'nextjs-routes';
 
+import type { IconName } from 'ui/shared/IconSvg';
+
 type NavIconOrComponent = {
-  icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  icon?: IconName;
 } | {
   iconComponent?: React.FC<{size?: number}>;
 };

ui/shared/IconSvg.tsx

+import type { HTMLChakraProps } from '@chakra-ui/react';
 import { Skeleton, chakra } from '@chakra-ui/react';
 import { type IconName } from 'public/icons/name';
 import React from 'react';
@@ -6,15 +7,14 @@ export const href = '/icons/sprite.svg';
 
 export { IconName };
 
-interface Props {
+interface Props extends HTMLChakraProps<'div'> {
   name: IconName;
   isLoading?: boolean;
-  className?: string;
 }
 
-const IconSvg = ({ name, isLoading, className }: Props) => {
+const IconSvg = ({ name, isLoading, ...props }: Props) => {
   return (
-    <Skeleton isLoaded={ !isLoading } className={ className }>
+    <Skeleton isLoaded={ !isLoading } display="inline-block" { ...props }>
       <chakra.svg w="100%" h="100%">
         <use href={ `${ href }#${ name }` }/>
       </chakra.svg>
@@ -22,4 +22,4 @@ const IconSvg = ({ name, isLoading, className }: Props) => {
   );
 };
 
-export default chakra(IconSvg);
+export default IconSvg;

ui/snippets/footer/Footer.tsx

@@ -6,13 +6,6 @@ import React from 'react';
 import type { CustomLinksGroup } from 'types/footerLinks';
 
 import config from 'configs/app';
-import discussionsIcon from 'icons/discussions.svg';
-import donateIcon from 'icons/donate.svg';
-import editIcon from 'icons/edit.svg';
-import cannyIcon from 'icons/social/canny.svg';
-import discordIcon from 'icons/social/discord.svg';
-import gitIcon from 'icons/social/git.svg';
-import twitterIcon from 'icons/social/tweet.svg';
 import type { ResourceError } from 'lib/api/resources';
 import useApiQuery from 'lib/api/useApiQuery';
 import useFetch from 'lib/hooks/useFetch';
@@ -39,43 +32,43 @@ const Footer = () => {
   const issueUrl = useIssueUrl(backendVersionData?.backend_version);
   const BLOCKSCOUT_LINKS = [
     {
-      icon: editIcon,
+      icon: 'edit' as const,
       iconSize: '16px',
       text: 'Submit an issue',
       url: issueUrl,
     },
     {
-      icon: cannyIcon,
+      icon: 'social/canny' as const,
       iconSize: '20px',
       text: 'Feature request',
       url: 'https://blockscout.canny.io/feature-requests',
     },
     {
-      icon: gitIcon,
+      icon: 'social/git' as const,
       iconSize: '18px',
       text: 'Contribute',
       url: 'https://github.com/blockscout/blockscout',
     },
     {
-      icon: twitterIcon,
+      icon: 'social/tweet' as const,
       iconSize: '18px',
       text: 'Twitter',
       url: 'https://www.twitter.com/blockscoutcom',
     },
     {
-      icon: discordIcon,
+      icon: 'social/discord' as const,
       iconSize: '24px',
       text: 'Discord',
       url: 'https://discord.gg/blockscout',
     },
     {
-      icon: discussionsIcon,
+      icon: 'discussions' as const,
       iconSize: '20px',
       text: 'Discussions',
       url: 'https://github.com/orgs/blockscout/discussions',
     },
     {
-      icon: donateIcon,
+      icon: 'donate' as const,
       iconSize: '20px',
       text: 'Donate',
       url: 'https://github.com/sponsors/blockscout',

ui/snippets/footer/FooterLinkItem.tsx

-import { Center, Icon, Link, Skeleton } from '@chakra-ui/react';
+import { Center, Link, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
+import type { IconName } from 'ui/shared/IconSvg';
+import IconSvg from 'ui/shared/IconSvg';
+
 type Props = {
-  icon?: React.FC<React.SVGAttributes<SVGElement>>;
+  icon?: IconName;
   iconSize?: string;
   text: string;
   url: string;
@@ -18,7 +21,7 @@ const FooterLinkItem = ({ icon, iconSize, text, url, isLoading }: Props) => {
     <Link href={ url } display="flex" alignItems="center" h="30px" variant="secondary" target="_blank" fontSize="xs">
       { icon && (
         <Center minW={ 6 } mr={ 2 }>
-          <Icon boxSize={ iconSize || 5 } as={ icon }/>
+          <IconSvg boxSize={ iconSize || 5 } name={ icon }/>
         </Center>
       ) }
       { text }

ui/snippets/footer/IntTxsIndexingStatus.tsx

-import { IconButton, Icon, Popover, PopoverTrigger, PopoverContent, PopoverBody, Flex, Text, useColorModeValue } from '@chakra-ui/react';
+import { IconButton, Popover, PopoverTrigger, PopoverContent, PopoverBody, Flex, Text, useColorModeValue } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import React from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
 import type { IndexingStatus } from 'types/api/indexingStatus';
 
-import infoIcon from 'icons/info.svg';
 import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 import { apos, nbsp, ndash } from 'lib/html-entities';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
+import IconSvg from 'ui/shared/IconSvg';
 
 const IntTxsIndexingStatus = () => {
 
@@ -72,7 +72,7 @@ const IntTxsIndexingStatus = () => {
       <IconButton
         colorScheme="none"
         aria-label="hint"
-        icon={ <Icon as={ infoIcon } boxSize={ 5 }/> }
+        icon={ <IconSvg name="info" boxSize={ 5 }/> }
         boxSize={ 6 }
         variant="simple"
       />

ui/snippets/header/Burger.tsx

-import { Icon, Box, Flex, Drawer, DrawerOverlay, DrawerContent, DrawerBody, useColorModeValue, useDisclosure } from '@chakra-ui/react';
+import { Box, Flex, Drawer, DrawerOverlay, DrawerContent, DrawerBody, useColorModeValue, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
-import burgerIcon from 'icons/burger.svg';
-import testnetIcon from 'icons/testnet.svg';
+import IconSvg from 'ui/shared/IconSvg';
 import NavigationMobile from 'ui/snippets/navigation/NavigationMobile';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import NetworkMenuButton from 'ui/snippets/networkMenu/NetworkMenuButton';
@@ -31,8 +30,8 @@ const Burger = ({ isMarketplaceAppPage }: Props) => {
   return (
     <>
       <Box padding={ 2 } onClick={ onOpen } cursor="pointer">
-        <Icon
-          as={ burgerIcon }
+        <IconSvg
+          name="burger"
           boxSize={ 6 }
           display="block"
           color={ iconColor }
@@ -48,7 +47,7 @@ const Burger = ({ isMarketplaceAppPage }: Props) => {
         <DrawerOverlay/>
         <DrawerContent maxWidth="260px">
           <DrawerBody p={ 6 } display="flex" flexDirection="column">
-            { config.chain.isTestnet && <Icon as={ testnetIcon } h="14px" w="auto" color="red.400" alignSelf="flex-start"/> }
+            { config.chain.isTestnet && <IconSvg name="testnet" h="14px" w="37px" color="red.400" alignSelf="flex-start"/> }
             <Flex alignItems="center" justifyContent="space-between">
               <NetworkLogo onClick={ handleNetworkLogoClick }/>
               { config.UI.sidebar.featuredNetworks ? (

ui/snippets/navigation/NavLink.tsx

-import { Link, Text, HStack, Tooltip, Box, useBreakpointValue, chakra, shouldForwardProp, Icon } from '@chakra-ui/react';
+import { Link, Text, HStack, Tooltip, Box, useBreakpointValue, chakra, shouldForwardProp } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import React from 'react';
 
@@ -6,9 +6,9 @@ import type { NavItem } from 'types/client/navigation-items';
 
 import { route } from 'nextjs-routes';
 
-import arrowIcon from 'icons/arrows/north-east.svg';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { isInternalItem } from 'lib/hooks/useNavItems';
+import IconSvg from 'ui/shared/IconSvg';
 
 import NavLinkIcon from './NavLinkIcon';
 import useColors from './useColors';
@@ -63,7 +63,7 @@ const NavLink = ({ item, isCollapsed, px, className, onClick }: Props) => {
           <NavLinkIcon item={ item }/>
           <Text { ...styleProps.textProps }>
             <span>{ item.text }</span>
-            { !isInternalLink && <Icon as={ arrowIcon } boxSize={ 4 } color="text_secondary" verticalAlign="middle"/> }
+            { !isInternalLink && <IconSvg name="arrows/north-east" boxSize={ 4 } color="text_secondary" verticalAlign="middle"/> }
           </Text>
         </HStack>
       </Tooltip>

ui/snippets/navigation/NavLinkGroupDesktop.tsx

 import {
-  Icon,
   Text,
   HStack,
   Box,
@@ -14,7 +13,7 @@ import React from 'react';
 
 import type { NavGroupItem } from 'types/client/navigation-items';
 
-import chevronIcon from 'icons/arrows/east-mini.svg';
+import IconSvg from 'ui/shared/IconSvg';
 
 import NavLink from './NavLink';
 import NavLinkIcon from './NavLinkIcon';
@@ -53,8 +52,8 @@ const NavLinkGroupDesktop = ({ item, isCollapsed }: Props) => {
               >
                 { item.text }
               </Text>
-              <Icon
-                as={ chevronIcon }
+              <IconSvg
+                name="arrows/east-mini"
                 position="absolute"
                 right="7px"
                 transform="rotate(180deg)"

ui/snippets/navigation/NavLinkGroupMobile.tsx

 import {
-  Icon,
   Text,
   HStack,
   Flex,
@@ -9,7 +8,7 @@ import React from 'react';
 
 import type { NavGroupItem } from 'types/client/navigation-items';
 
-import chevronIcon from 'icons/arrows/east-mini.svg';
+import IconSvg from 'ui/shared/IconSvg';
 
 import NavLinkIcon from './NavLinkIcon';
 import useNavLinkStyleProps from './useNavLinkStyleProps';
@@ -40,7 +39,7 @@ const NavLinkGroup = ({ item, onClick, isExpanded }: Props) => {
               { item.text }
             </Text>
           </HStack>
-          <Icon as={ chevronIcon } transform="rotate(180deg)" boxSize={ 6 }/>
+          <IconSvg name="arrows/east-mini" transform="rotate(180deg)" boxSize={ 6 }/>
         </Flex>
       </Box>
     </Box>

ui/snippets/navigation/NavLinkIcon.tsx

-import { Icon } from '@chakra-ui/react';
 import React from 'react';
 
 import type { NavItem, NavGroupItem } from 'types/client/navigation-items';
 
+import IconSvg from 'ui/shared/IconSvg';
+
 const NavLinkIcon = ({ item }: { item: NavItem | NavGroupItem}) => {
-  if ('icon' in item) {
-    return <Icon as={ item.icon } boxSize="30px"/>;
+  if ('icon' in item && item.icon) {
+    return <IconSvg name={ item.icon } boxSize="30px" flexShrink={ 0 }/>;
   }
   if ('iconComponent' in item && item.iconComponent) {
     const IconComponent = item.iconComponent;

ui/snippets/navigation/NavigationDesktop.tsx

-import { Flex, Box, VStack, Icon, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Box, VStack, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
-import chevronIcon from 'icons/arrows/east-mini.svg';
-import testnetIcon from 'icons/testnet.svg';
 import { useAppContext } from 'lib/contexts/app';
 import * as cookies from 'lib/cookies';
 import useHasAccount from 'lib/hooks/useHasAccount';
 import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
+import IconSvg from 'ui/shared/IconSvg';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import NetworkMenu from 'ui/snippets/networkMenu/NetworkMenu';
 
@@ -65,7 +64,7 @@ const NavigationDesktop = () => {
         },
       }}
     >
-      { config.chain.isTestnet && <Icon as={ testnetIcon } h="14px" w="auto" color="red.400" position="absolute" pl={ 3 } top="34px"/> }
+      { config.chain.isTestnet && <IconSvg name="testnet" h="14px" w="49px" color="red.400" position="absolute" pl={ 3 } top="34px"/> }
       <Box
         as="header"
         display="flex"
@@ -101,8 +100,8 @@ const NavigationDesktop = () => {
           </VStack>
         </Box>
       ) }
-      <Icon
-        as={ chevronIcon }
+      <IconSvg
+        name="arrows/east-mini"
         width={ 6 }
         height={ 6 }
         border="1px"

ui/snippets/navigation/NavigationMobile.tsx

-import { Box, Flex, Text, Icon, VStack, useColorModeValue } from '@chakra-ui/react';
+import { Box, Flex, Text, VStack, useColorModeValue } from '@chakra-ui/react';
 import { animate, motion, useMotionValue } from 'framer-motion';
 import React, { useCallback } from 'react';
 
-import chevronIcon from 'icons/arrows/east-mini.svg';
 import useHasAccount from 'lib/hooks/useHasAccount';
 import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
+import IconSvg from 'ui/shared/IconSvg';
 import NavLink from 'ui/snippets/navigation/NavLink';
 
 import NavLinkGroupMobile from './NavLinkGroupMobile';
@@ -96,7 +96,7 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
           key="sub"
         >
           <Flex alignItems="center" px={ 3 } py={ 2.5 } w="100%" h="50px" onClick={ onGroupItemClose } mb={ 1 }>
-            <Icon as={ chevronIcon } boxSize={ 6 } mr={ 2 } color={ iconColor }/>
+            <IconSvg name="arrows/east-mini" boxSize={ 6 } mr={ 2 } color={ iconColor }/>
             <Text variant="secondary" fontSize="sm">{ mainNavItems[openedGroupIndex].text }</Text>
           </Flex>
           <Box

ui/snippets/networkMenu/NetworkLogo.tsx

-import { Icon, Box, Image, useColorModeValue, Skeleton } from '@chakra-ui/react';
+import { Box, Image, useColorModeValue, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
-import iconPlaceholder from 'icons/networks/icon-placeholder.svg';
-import logoPlaceholder from 'icons/networks/logo-placeholder.svg';
+import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   isCollapsed?: boolean;
@@ -31,8 +30,8 @@ const LogoFallback = ({ isCollapsed, isSmall }: { isCollapsed?: boolean; isSmall
   }
 
   return (
-    <Icon
-      as={ isSmall ? iconPlaceholder : logoPlaceholder }
+    <IconSvg
+      name={ isSmall ? 'networks/icon-placeholder' : 'networks/logo-placeholder' }
       width="auto"
       height="100%"
       color={ logoColor }

ui/snippets/networkMenu/NetworkMenuButton.tsx

-import { Icon, useColorModeValue, Button, forwardRef, chakra } from '@chakra-ui/react';
+import { useColorModeValue, Button, forwardRef, chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import networksIcon from 'icons/networks.svg';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
+import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   isMobile?: boolean;
@@ -30,8 +30,8 @@ const NetworkMenuButton = ({ isMobile, isActive, onClick, className }: Props, re
       aria-label="Network menu"
       aria-roledescription="menu"
     >
-      <Icon
-        as={ networksIcon }
+      <IconSvg
+        name="networks"
         width="36px"
         height="36px"
         padding="10px"

ui/snippets/networkMenu/NetworkMenuLink.tsx

-import { Box, Flex, Icon, Text, Image, useColorModeValue } from '@chakra-ui/react';
+import { Box, Flex, Text, Image, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import type { FeaturedNetwork } from 'types/networks';
 
-import checkIcon from 'icons/check.svg';
-import placeholderIcon from 'icons/networks/icon-placeholder.svg';
+import IconSvg from 'ui/shared/IconSvg';
 
 import useColors from './useColors';
 
@@ -21,8 +20,8 @@ const NetworkMenuLink = ({ title, icon, isActive, isMobile, url, invertIconInDar
   const iconEl = icon ? (
     <Image w="30px" h="30px" src={ icon } alt={ `${ title } network icon` } style={ style }/>
   ) : (
-    <Icon
-      as={ placeholderIcon }
+    <IconSvg
+      name="networks/icon-placeholder"
       boxSize="30px"
       color={ colors.iconPlaceholder.default }
     />
@@ -54,8 +53,8 @@ const NetworkMenuLink = ({ title, icon, isActive, isMobile, url, invertIconInDar
           { title }
         </Text>
         { isActive && (
-          <Icon
-            as={ checkIcon }
+          <IconSvg
+            name="check"
             boxSize="24px"
             marginLeft="auto"
           />

ui/snippets/searchBar/SearchBarInput.tsx

-import { InputGroup, Input, InputLeftElement, Icon, chakra, useColorModeValue, forwardRef, InputRightElement } from '@chakra-ui/react';
+import { InputGroup, Input, InputLeftElement, chakra, useColorModeValue, forwardRef, InputRightElement } from '@chakra-ui/react';
 import throttle from 'lodash/throttle';
 import React from 'react';
 import type { ChangeEvent, FormEvent, FocusEvent } from 'react';
 
-import searchIcon from 'icons/search.svg';
 import { useScrollDirection } from 'lib/contexts/scrollDirection';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import ClearButton from 'ui/shared/ClearButton';
+import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   onChange: (value: string) => void;
@@ -86,7 +86,7 @@ const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHid
     >
       <InputGroup size={{ base: isHomepage ? 'md' : 'sm', lg: 'md' }}>
         <InputLeftElement w={{ base: isHomepage ? 6 : 4, lg: 6 }} ml={{ base: isHomepage ? 4 : 3, lg: 4 }} h="100%">
-          <Icon as={ searchIcon } boxSize={{ base: isHomepage ? 6 : 4, lg: 6 }} color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/>
+          <IconSvg name="search" boxSize={{ base: isHomepage ? 6 : 4, lg: 6 }} color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/>
         </InputLeftElement>
         <Input
           pl={{ base: isHomepage ? '50px' : '38px', lg: '50px' }}

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx

-import { Icon, Image, Flex, Text, useColorModeValue } from '@chakra-ui/react';
+import { Image, Flex, Text, useColorModeValue } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import React from 'react';
 
 import type { MarketplaceAppOverview } from 'types/client/marketplace';
 
-import arrowIcon from 'icons/arrows/north-east.svg';
 import highlightText from 'lib/highlightText';
+import IconSvg from 'ui/shared/IconSvg';
 
 import SearchBarSuggestItemLink from './SearchBarSuggestItemLink';
 
@@ -42,7 +42,7 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
             >
               <span dangerouslySetInnerHTML={{ __html: highlightText(data.title, searchTerm) }}/>
             </Text>
-            { data.external && <Icon as={ arrowIcon } boxSize={ 4 } verticalAlign="middle"/> }
+            { data.external && <IconSvg name="arrows/north-east" boxSize={ 4 } verticalAlign="middle"/> }
           </Flex>
           <Text
             variant="secondary"
@@ -81,7 +81,7 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
         >
           { data.description }
         </Text>
-        { data.external && <Icon as={ arrowIcon } boxSize={ 4 } verticalAlign="middle" color="text_secondary"/> }
+        { data.external && <IconSvg name="arrows/north-east" boxSize={ 4 } verticalAlign="middle" color="text_secondary"/> }
       </Flex>
     );
   })();

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestLabel.tsx

-import { Grid, Text, Flex, Icon } from '@chakra-ui/react';
+import { Grid, Text, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { SearchResultLabel } from 'types/api/search';
 
-import labelIcon from 'icons/publictags_slim.svg';
-import iconSuccess from 'icons/status/success.svg';
 import highlightText from 'lib/highlightText';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   data: SearchResultLabel;
@@ -15,7 +14,7 @@ interface Props {
 }
 
 const SearchBarSuggestLabel = ({ data, isMobile, searchTerm }: Props) => {
-  const icon = <Icon as={ labelIcon } boxSize={ 5 } color="gray.500"/>;
+  const icon = <IconSvg name="publictags_slim" boxSize={ 5 } color="gray.500"/>;
 
   const name = (
     <Text
@@ -38,7 +37,7 @@ const SearchBarSuggestLabel = ({ data, isMobile, searchTerm }: Props) => {
     </Text>
   );
 
-  const isContractVerified = data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500"/>;
+  const isContractVerified = data.is_smart_contract_verified && <IconSvg name="status/success" color="green.500"/>;
 
   if (isMobile) {
     return (

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx

-import { Grid, Text, Flex, Icon } from '@chakra-ui/react';
+import { Grid, Text, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { SearchResultToken } from 'types/api/search';
 
-import iconSuccess from 'icons/status/success.svg';
-import verifiedToken from 'icons/verified_token.svg';
 import highlightText from 'lib/highlightText';
 import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   data: SearchResultToken;
@@ -17,7 +16,7 @@ interface Props {
 
 const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
   const icon = <TokenEntity.Icon token={{ ...data, type: data.token_type }}/>;
-  const verifiedIcon = <Icon as={ verifiedToken } boxSize={ 4 } color="green.500" ml={ 1 }/>;
+  const verifiedIcon = <IconSvg name="verified_token" boxSize={ 4 } color="green.500" ml={ 1 }/>;
   const name = (
     <Text
       fontWeight={ 700 }
@@ -35,7 +34,7 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
     </Text>
   );
 
-  const contractVerifiedIcon = data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/>;
+  const contractVerifiedIcon = data.is_smart_contract_verified && <IconSvg name="status/success" color="green.500" ml={ 1 }/>;
   const additionalInfo = (
     <Text overflow="hidden" whiteSpace="nowrap" fontWeight={ 700 }>
       { data.token_type === 'ERC-20' && data.exchange_rate && `$${ Number(data.exchange_rate).toLocaleString() }` }

ui/snippets/topBar/ColorModeSwitch.tsx

 import {
   IconButton,
-  Icon,
   Popover,
   PopoverTrigger,
   PopoverContent,
@@ -12,6 +11,7 @@ import {
 import React from 'react';
 
 import * as cookies from 'lib/cookies';
+import IconSvg from 'ui/shared/IconSvg';
 
 import ColorModeSwitchTheme from './ColorModeSwitchTheme';
 import { COLOR_THEMES } from './utils';
@@ -79,7 +79,7 @@ const ColorModeSwitch = () => {
             variant="simple"
             colorScheme="blue"
             aria-label="color mode switch"
-            icon={ <Icon as={ activeTheme.icon } boxSize={ 5 }/> }
+            icon={ <IconSvg name={ activeTheme.icon } boxSize={ 5 }/> }
             boxSize={ 5 }
             onClick={ onToggle }
           />

ui/snippets/topBar/ColorModeSwitchTheme.tsx

 import {
-  Icon,
   Flex,
   useColorModeValue,
   useToken,
 } from '@chakra-ui/react';
 import React from 'react';
 
+import IconSvg from 'ui/shared/IconSvg';
+
 import ColorModeSwitchSample from './ColorModeSwitchSample';
 import type { ColorTheme } from './utils';
 
@@ -43,7 +44,7 @@ const ColorModeSwitchTheme = ({ icon, name, colors, onClick, activeHex }: Props)
       fontWeight={ 500 }
       borderRadius="base"
     >
-      <Icon as={ icon } boxSize={ 5 } mr={ 2 }/>
+      <IconSvg name={ icon } boxSize={ 5 } mr={ 2 }/>
       <span>{ name }</span>
       <Flex columnGap={ 2 } ml="auto" alignItems="center">
         { colors.map((sample) => <ColorModeSwitchSample key={ sample.hex } { ...sample } onClick={ onClick } isActive={ activeHex === sample.hex }/>) }

ui/snippets/topBar/utils.ts

-import moonWithStarIcon from 'icons/moon-with-star.svg';
-import moonIcon from 'icons/moon.svg';
-import sunIcon from 'icons/sun.svg';
+import type { IconName } from 'ui/shared/IconSvg';
 
 export const COLOR_THEMES = [
   {
     name: 'Light',
     colorMode: 'light',
-    icon: sunIcon,
+    icon: 'sun' as IconName,
     colors: [
       { hex: '#FFFFFF', sampleBg: 'linear-gradient(154deg, #EFEFEF 50%, rgba(255, 255, 255, 0.00) 330.86%)' },
     ],
@@ -14,7 +12,7 @@ export const COLOR_THEMES = [
   {
     name: 'Dim',
     colorMode: 'dark',
-    icon: moonWithStarIcon,
+    icon: 'moon-with-star' as IconName,
     colors: [
       { hex: '#232B37', sampleBg: 'linear-gradient(152deg, #232B37 50%, rgba(255, 255, 255, 0.00) 290.71%)' },
       { hex: '#1B2E48', sampleBg: 'linear-gradient(150deg, #1B2E48 50%, rgba(255, 255, 255, 0.00) 312.75%)' },
@@ -23,7 +21,7 @@ export const COLOR_THEMES = [
   {
     name: 'Dark',
     colorMode: 'dark',
-    icon: moonIcon,
+    icon: 'moon' as IconName,
     colors: [
       { hex: '#101112', sampleBg: 'linear-gradient(161deg, #000 9.37%, #383838 92.52%)' },
     ],

ui/snippets/walletMenu/WalletMenuMobile.tsx

-import { Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, IconButton, Icon } from '@chakra-ui/react';
+import { Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, IconButton } from '@chakra-ui/react';
 import React from 'react';
 
-import walletIcon from 'icons/wallet.svg';
 import AddressIdenticon from 'ui/shared/entities/address/AddressIdenticon';
+import IconSvg from 'ui/shared/IconSvg';
 import useWallet from 'ui/snippets/walletMenu/useWallet';
 import WalletMenuContent from 'ui/snippets/walletMenu/WalletMenuContent';
 
@@ -21,7 +21,7 @@ const WalletMenuMobile = () => {
           aria-label="wallet menu"
           icon={ isWalletConnected ?
             <AddressIdenticon size={ 20 } hash={ address }/> :
-            <Icon as={ walletIcon } boxSize={ 6 }/>
+            <IconSvg name="wallet" boxSize={ 6 }/>
           }
           variant={ isWalletConnected ? 'subtle' : 'outline' }
           colorScheme="gray"