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

- Fixed TopBar.tsx: replaced chakra.svg with native svg element
- Fixed IconSvg.tsx: refactored to use native svg instead of chakra-wrapped SVG
- Changed Props interface to extend React.SVGAttributes instead of HTMLChakraProps
- Ensures SVG elements receive appropriate HTML attributes only

next-env.d.ts

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

ui/snippets/topBar/TopBar.tsx

@@ -144,19 +144,20 @@ const TopBar = () => {
                 border="none"
               >
                 Blockchain
-                <chakra.svg
+                <svg
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 20 20"
                   fill="currentColor"
-                  w="14px"
-                  h="14px"
+                  width="14px"
+                  height="14px"
+                  style={{ display: 'flex', alignItems: 'center' }}
                 >
                   <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"
                   />
-                </chakra.svg>
+                </svg>
               </chakra.button>
             </MenuTrigger>
             <MenuContent minW="180px">