diff --git a/src/components/Icons/Swap_2.svg b/src/components/Icons/Swap_2.svg
deleted file mode 100644
index aec673d0f2..0000000000
--- a/src/components/Icons/Swap_2.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
diff --git a/src/components/Icons/ZkSyncFull.tsx b/src/components/Icons/ZkSyncFull.tsx
index 7ef2a5233f..a55f65a82c 100644
--- a/src/components/Icons/ZkSyncFull.tsx
+++ b/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 (
diff --git a/src/pages/About/AboutKyberSwap/index.tsx b/src/pages/About/AboutKyberSwap/index.tsx
index 5c38f38f76..7b6fe7df11 100644
--- a/src/pages/About/AboutKyberSwap/index.tsx
+++ b/src/pages/About/AboutKyberSwap/index.tsx
@@ -1044,7 +1044,7 @@ function AboutKyberSwap() {
{/* */}
-
+
diff --git a/src/pages/Icons/index.tsx b/src/pages/Icons/index.tsx
index d1f82836b8..91c8a8fb57 100644
--- a/src/pages/Icons/index.tsx
+++ b/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([])
+ const [iconComponents, setIconComponents] = useState([])
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() {
All icons in: folder /components/Icons
- {Object.entries(IconComponents).map(([key, component]) => {
+ {iconComponents.map((el: any) => {
+ const key: string = el.id
return (
- onClick(`import { ${key} } from 'components/Icons'`)}>
- {component?.({})}
+ 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'
+ }
+ })()}
{key}.tsx