Revert "Fix: Replace chakra.svg with native SVG elements to resolve React rendering error"

This reverts commit c64825c208.

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import './.next/dev/types/routes.d.ts';
+import './.next/types/routes.d.ts';
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

ui/shared/IconSvg.tsx

@@ -1,4 +1,6 @@
-import type { IconName } from 'public/icons/name';
+import type { HTMLChakraProps } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
+import { type IconName } from 'public/icons/name';
 import React from 'react';
 
 import config from 'configs/app';
@@ -8,23 +10,18 @@ export const href = config.app.spriteHash ? `/icons/sprite.${ config.app.spriteH
 
 export { IconName };
 
-export interface Props extends React.SVGAttributes<SVGSVGElement> {
+export interface Props extends HTMLChakraProps<'div'> {
   name: IconName;
   isLoading?: boolean;
 }
 
 const IconSvg = React.forwardRef(
-  function IconSvg({ name, isLoading = false, ...props }: Props, ref: React.ForwardedRef<SVGSVGElement>) {
+  function IconSvg({ name, isLoading = false, ...props }: Props, ref: React.ForwardedRef<HTMLDivElement>) {
     return (
-      <Skeleton loading={ isLoading } display="inline-block" flexShrink={ 0 } asChild>
-        <svg
-          ref={ ref }
-          width="100%"
-          height="100%"
-          { ...props }
-        >
+      <Skeleton loading={ isLoading } display="inline-block" flexShrink={ 0 } asChild { ...props } ref={ ref }>
+        <chakra.svg w="100%" h="100%">
           <use href={ `${ href }#${ name }` }/>
-        </svg>
+        </chakra.svg>
       </Skeleton>
     );
   },

ui/snippets/topBar/TopBar.tsx

@@ -144,20 +144,19 @@ const TopBar = () => {
                 border="none"
               >
                 Blockchain
-                <svg
+                <chakra.svg
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 20 20"
                   fill="currentColor"
-                  width="14px"
-                  height="14px"
-                  style={{ display: 'flex', alignItems: 'center' }}
+                  w="14px"
+                  h="14px"
                 >
                   <path
                     fillRule="evenodd"
                     d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                     clipRule="evenodd"
                   />
-                </svg>
+                </chakra.svg>
               </chakra.button>
             </MenuTrigger>
             <MenuContent minW="180px">