Fix SVG icons (#126)

src/components/Chain.tsx

@@ -1,5 +1,4 @@
 import {
-  Box,
   Button,
   Center,
   Flex,
@@ -12,7 +11,7 @@ import {
 import React, { useContext } from "react";
 import { Web3Context } from "../context/Web3Context";
 import { ChainData } from "../types/chain";
-import { GatsbyImage } from "gatsby-plugin-image";
+import { ChainIcon } from "./ChainIcon";
 
 export const Chain = ({
   name,
@@ -61,7 +60,7 @@ export const Chain = ({
         </Flex>
         {icon && (
           <Flex>
-            <GatsbyImage objectFit="scale-down" image={icon} alt={name} />
+            <ChainIcon name={name} icon={icon} />
           </Flex>
         )}
       </Flex>

src/components/ChainIcon.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { GatsbyImage } from "gatsby-plugin-image";
+import { ChainData } from "../types/chain";
+import { Image } from "@chakra-ui/react";
+
+export const ChainIcon = ({ icon, name }: Pick<ChainData, "icon" | "name">) =>
+  typeof icon === "string" ? (
+    <Image src={icon} width="40px" />
+  ) : (
+    <GatsbyImage objectFit="scale-down" image={icon} alt={name} />
+  );

src/pages/index.tsx

@@ -45,6 +45,14 @@ const IndexPage = () => {
           }
         }
       }
+      allFile(filter: { extension: { eq: "svg" } }) {
+        nodes {
+          id
+          name
+          extension
+          publicURL
+        }
+      }
     }
   `);
 
@@ -56,8 +64,13 @@ const IndexPage = () => {
     return acc;
   }, {});
 
+  const svgIcons = rawData.allFile.nodes.reduce((acc, node) => {
+    acc[node.name] = node.publicURL;
+    return acc;
+  }, {});
+
   const chains = rawChains.reduce((acc, chain, idx) => {
-    acc[idx].icon = icons[chain.icon];
+    acc[idx].icon = icons[chain.icon] ?? svgIcons[chain.icon];
     return acc;
   }, rawChains);
 

src/types/chain.ts

@@ -1,7 +1,9 @@
+import { IGatsbyImageData } from "gatsby-plugin-image";
+
 export interface ChainData {
   name: string;
   chain: string;
-  icon: string;
+  icon: string | IGatsbyImageData;
   rpc: string[];
   chainId: number;
   nativeCurrency: ChainCurrency;