display all components/Icons file

src/components/Icons/ZkSyncFull.tsx

@@ -1,8 +1,4 @@
-import { useIsDarkMode } from 'state/user/hooks'
-
-const ZkSyncFull = () => {
-  const isDarkMode = useIsDarkMode()
-  const fill = isDarkMode ? 'white' : 'black'
+const ZkSyncFull = ({ color: fill }: { color: string }) => {
   return (
     <svg width="125" height="25" viewBox="0 0 125 25" fill="none" xmlns="http://www.w3.org/2000/svg">
       <mask

src/pages/About/AboutKyberSwap/index.tsx

@@ -1044,7 +1044,7 @@ function AboutKyberSwap() {
               <img src={isDarkMode ? BTTCDark : BTTCLight} alt="btt" width="100%" />
               <OptimismLogoFull />
               {/* <SolanaLogoFull /> */}
-              <ZkSyncFull />
+              <ZkSyncFull color={theme.text} />
               <LineaFull />
             </Powered>
           </Text>

src/pages/Icons/index.tsx

@@ -1,16 +1,17 @@
 import { rgba } from 'polished'
-import { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { Text } from 'rebass'
 import styled from 'styled-components'
 
 import sprite from 'assets/svg/sprite.svg'
 import { NotificationType } from 'components/Announcement/type'
-import * as IconComponents from 'components/Icons'
 import { ICON_IDS } from 'constants/index'
 import useCopyClipboard from 'hooks/useCopyClipboard'
+import useTheme from 'hooks/useTheme'
 import { useNotify } from 'state/application/hooks'
 
 const allSvgFiles = import.meta.glob('../../assets/svg/*')
+const allIconComponentsFiles = import.meta.glob('../../components/Icons/*')
 
 const Wrapper = styled.div`
   display: flex;
@@ -63,8 +64,10 @@ const camelizeSnake = (st: string) =>
 
 export default function Icons() {
   const [svgComponents, setSvgComponents] = useState<any>([])
+  const [iconComponents, setIconComponents] = useState<any>([])
   const [copied, setCopied] = useCopyClipboard(2000)
   const notify = useNotify()
+  const theme = useTheme()
 
   const onClick = useCallback(
     (id: string) => {
@@ -100,6 +103,24 @@ export default function Icons() {
         )
       })
       .catch(console.error)
+
+    const componentArr = Object.keys(allIconComponentsFiles).map(key => ({
+      id: key.split('/').pop()?.replace('.tsx', ''),
+      fn: allIconComponentsFiles[key](),
+    }))
+    Promise.all(componentArr.map(el => el.fn))
+      .then(data => {
+        setIconComponents(
+          data.map((e: any, i) => {
+            const id = componentArr[i].id
+            return {
+              render: e.default || (() => null),
+              id,
+            }
+          }),
+        )
+      })
+      .catch(console.error)
   }, [])
   return (
     <>
@@ -135,10 +156,19 @@ export default function Icons() {
       </Wrapper>
       <h2>All icons in: folder /components/Icons </h2>
       <Wrapper>
-        {Object.entries(IconComponents).map(([key, component]) => {
+        {iconComponents.map((el: any) => {
+          const key: string = el.id
           return (
-            <IconWrapperV2 key={key} onClick={() => onClick(`import { ${key} } from 'components/Icons'`)}>
-              {component?.({})}
+            <IconWrapperV2 key={key} onClick={() => onClick(`import ${key} from 'components/Icons/${key}'`)}>
+              {(() => {
+                try {
+                  return typeof el?.render === 'function'
+                    ? el.render({ color: theme.text })
+                    : React.createElement(el?.render)
+                } catch (error) {
+                  return 'Display Error'
+                }
+              })()}
               <Text fontSize={10} style={{ wordBreak: 'break-all' }}>
                 {key}.tsx
               </Text>