monaco icons

lib/hooks/useNavItems.tsx

@@ -101,7 +101,7 @@ export default function useNavItems(): ReturnType {
         config.features.beaconChain.isEnabled && {
           text: 'Withdrawals',
           nextRoute: { pathname: '/withdrawals' as const },
-          icon: 'arrow/north-east',
+          icon: 'arrows/north-east',
           isActive: pathname === '/withdrawals',
         },
       ].filter(Boolean);

public/icons/name.d.ts

@@ -55,6 +55,11 @@
 	| "link"
 	| "lock"
 	| "minus"
+	| "monaco/file"
+	| "monaco/folder-open"
+	| "monaco/folder"
+	| "monaco/solidity"
+	| "monaco/vyper"
 	| "moon-with-star"
 	| "moon"
 	| "networks"

ui/shared/monaco/CodeEditorFileIcon.tsx

-import { Icon, chakra } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import iconFile from './icons/file.svg';
-import iconSolidity from './icons/solidity.svg';
-import iconVyper from './icons/vyper.svg';
+import type { IconName } from 'ui/shared/IconSvg';
+import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   className?: string;
@@ -11,19 +10,19 @@ interface Props {
 }
 
 const CodeEditorFileIcon = ({ className, fileName }: Props) => {
-  const as = (() => {
+  const name: IconName = (() => {
     if (/.vy$/.test(fileName)) {
-      return iconVyper;
+      return 'monaco/vyper';
     }
 
     if (/.sol|.yul$/.test(fileName)) {
-      return iconSolidity;
+      return 'monaco/solidity';
     }
 
-    return iconFile;
+    return 'monaco/file';
   })();
 
-  return <Icon className={ className } as={ as } boxSize="16px"/>;
+  return <IconSvg className={ className } name={ name } boxSize="16px"/>;
 };
 
 export default React.memo(chakra(CodeEditorFileIcon));

ui/shared/monaco/CodeEditorFileTree.tsx

 import type { ChakraProps } from '@chakra-ui/react';
-import { Box, Accordion, AccordionButton, AccordionItem, AccordionPanel, Icon, chakra } from '@chakra-ui/react';
+import { Box, Accordion, AccordionButton, AccordionItem, AccordionPanel, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { FileTree } from './types';
 
+import IconSvg from 'ui/shared/IconSvg';
+
 import CodeEditorFileIcon from './CodeEditorFileIcon';
 import CodeEditorMainFileIndicator from './CodeEditorMainFileIndicator';
-import iconFolderOpen from './icons/folder-open.svg';
-import iconFolder from './icons/folder.svg';
 import useThemeColors from './utils/useThemeColors';
 
 interface Props {
@@ -57,7 +57,7 @@ const CodeEditorFileTree = ({ tree, level = 0, onItemClick, isCollapsed, selecte
                         boxSize="16px"
                         mr="2px"
                       />
-                      <Icon as={ isExpanded ? iconFolderOpen : iconFolder } boxSize="16px" mr="4px"/>
+                      <IconSvg name={ isExpanded ? 'monaco/folder-open' : 'monaco/folder' } boxSize="16px" mr="4px"/>
                       { leafName }
                     </AccordionButton>
                     <AccordionPanel p="0">