refact: convert all svg images to React components

src/components/DiscordButton/styles.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components"
-import DiscordLogo from "../../images/discord-logo.svg"
+import DiscordLogo from "../../images/discord-logo"
 
 export const DiscordButtonWrapper = styled.a`
   display: inline-flex;

src/components/HeaderBarebone/styles.tsx

@@ -2,7 +2,7 @@ import { transparentize, darken } from "polished"
 import styled from "styled-components"
 import { fontFamily } from "../../design/typography"
 import { WavesTop, WavesBottom } from "../Waves"
-import Circles from "../../images/circles.svg"
+import Circles from "../../images/circles"
 
 const height = 250
 

src/components/Home/styles.tsx

@@ -2,7 +2,7 @@ import { Link } from "gatsby"
 import Particles from "react-particles-js"
 import styled, { css } from "styled-components"
 import { fontFamily } from "../../design/typography"
-import TPHLogo from "../../images/tph-logo.svg"
+import TPHLogo from "../../images/tph-logo"
 
 export const HomeWrapper = styled.header`
   display: flex;

src/components/HomePartner/styles.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components"
-import JetBrainsLogo from "../../images/jetbrains-logo.svg"
+import JetBrainsLogo from "../../images/jetbrains-logo"
 
 export const HomePartnerWrapper = styled.div`
   margin-top: 32px;

src/components/MobileHeader/styles.tsx

@@ -1,7 +1,7 @@
 import { transparentize } from "polished"
 import styled from "styled-components"
 import { fontFamily } from "../../design/typography"
-import Logo from "../../images/tph-logo.svg"
+import Logo from "../../images/tph-logo"
 
 export const MobileHeaderWrapper = styled.div`
   z-index: 50;

src/components/Sidebar/styles.tsx

@@ -2,7 +2,7 @@ import { Link } from "gatsby"
 import styled, { css } from "styled-components"
 import { transparentize } from "polished"
 import { fontFamily } from "../../design/typography"
-import TPHLogo from "../../images/tph-logo.svg"
+import TPHLogo from "../../images/tph-logo"
 
 export const SidebarWrapper = styled.div`
   box-sizing: border-box;

src/components/Waves/styles.tsx

@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components"
-import WavesBottom from "../../images/waves-bot.svg"
-import WavesTop from "../../images/waves-top.svg"
+import WavesBottom from "../../images/waves-bot"
+import WavesTop from "../../images/waves-top"
 
 const waves = css`
   display: block;