use svgs as React components with svgr

nym-wallet/package.json

@@ -36,6 +36,7 @@
     "@babel/plugin-transform-async-to-generator": "^7.14.5",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
+    "@svgr/webpack": "^6.1.1",
     "@tauri-apps/api": "^1.0.0-beta.6",
     "@tauri-apps/cli": "^1.0.0-beta.9",
     "@types/bs58": "^4.0.1",

nym-wallet/src/images/delegate.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 12V15H6V12H4ZM16 7L14.59 5.59L13 7.17V2H11V7.19L9.39 5.61L8 7L12 11L16 7ZM4 17H20V15H4V17Z" fill="black"/>
+<path d="M20 21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V20H20V21Z" fill="black"/>
+<rect x="18" y="12" width="2" height="3" fill="black"/>
+<rect x="18" y="17" width="2" height="3" fill="black"/>
+<rect x="4" y="17" width="2" height="3" fill="black"/>
+</svg>

nym-wallet/src/images/logo-background.svg

@@ -1,5 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 5389.9 5389.9" style="enable-background:new 0 0 5389.9 5389.9;" xml:space="preserve">
 <style type="text/css">

nym-wallet/src/layouts/AppLayout.tsx

@@ -24,7 +24,7 @@ export const ApplicationLayout: React.FC = ({ children }) => {
         }}
       >
         <Box sx={{ mb: 3 }}>
-          <img src={Logo} style={{ width: 45 }} />
+          <Logo width={45} />
         </Box>
 
         <Nav />

nym-wallet/src/routes/sign-in/sign-in.tsx

@@ -1,22 +1,11 @@
 import React, { useContext, useState } from 'react'
-import {
-  Button,
-  CircularProgress,
-  Grid,
-  Stack,
-  Link,
-  TextField,
-  Typography,
-  Alert,
-} from '@mui/material'
+import { Button, CircularProgress, Grid, Stack, Link, TextField, Typography, Alert, SvgIcon } from '@mui/material'
 import { styled } from '@mui/styles'
-import logo from '../../images/logo-background.svg'
+import Logo from '../../images/logo-background.svg'
 import { signInWithMnemonic } from '../../requests'
 import { ClientContext } from '../../context/main'
 
-export const SignInContent: React.FC<{ showCreateAccount: () => void }> = ({
-  showCreateAccount,
-}) => {
+export const SignInContent: React.FC<{ showCreateAccount: () => void }> = ({ showCreateAccount }) => {
   const [mnemonic, setMnemonic] = useState<string>('')
   const [inputError, setInputError] = useState<string>()
   const [isLoading, setIsLoading] = useState(false)
@@ -41,17 +30,13 @@ export const SignInContent: React.FC<{ showCreateAccount: () => void }> = ({
 
   return (
     <Stack spacing={3} alignItems="center" sx={{ width: '80%' }}>
-      <img src={logo} style={{ width: 80 }} />
-      <Typography sx={{ color: 'common.white' }}>
-        Enter Mnemonic and sign in
-      </Typography>
+      <Logo width={80} />
+      <Typography sx={{ color: 'common.white' }}>Enter Mnemonic and sign in</Typography>
       <Grid container direction="column" spacing={3}>
         <Grid item style={{ paddingTop: 0 }}>
           <StyledInput
             value={mnemonic}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              setMnemonic(e.target.value)
-            }
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMnemonic(e.target.value)}
             size="medium"
             variant="outlined"
             margin="normal"
@@ -82,12 +67,7 @@ export const SignInContent: React.FC<{ showCreateAccount: () => void }> = ({
         </Grid>
         {inputError && (
           <Grid item sx={{ mt: 1 }}>
-            <Alert
-              severity="error"
-              variant="outlined"
-              data-testid="error"
-              sx={{ color: 'error.light' }}
-            >
+            <Alert severity="error" variant="outlined" data-testid="error" sx={{ color: 'error.light' }}>
               {inputError}
             </Alert>
           </Grid>
@@ -105,24 +85,22 @@ export const SignInContent: React.FC<{ showCreateAccount: () => void }> = ({
   )
 }
 
-const StyledInput = styled((props) => <TextField {...props} />)(
-  ({ theme }) => ({
-    '& input': {
-      color: theme.palette.nym.text.light,
+const StyledInput = styled((props) => <TextField {...props} />)(({ theme }) => ({
+  '& input': {
+    color: theme.palette.nym.text.light,
+  },
+  '& label': {
+    color: theme.palette.nym.text.light,
+  },
+  '& label.Mui-focused': {
+    color: theme.palette.primary.main,
+  },
+  '& .MuiOutlinedInput-root': {
+    '& fieldset': {
+      borderColor: theme.palette.common.white,
     },
-    '& label': {
-      color: theme.palette.nym.text.light,
+    '&:hover fieldset': {
+      borderColor: theme.palette.primary.main,
     },
-    '& label.Mui-focused': {
-      color: theme.palette.primary.main,
-    },
-    '& .MuiOutlinedInput-root': {
-      '& fieldset': {
-        borderColor: theme.palette.common.white,
-      },
-      '&:hover fieldset': {
-        borderColor: theme.palette.primary.main,
-      },
-    },
-  }),
-)
+  },
+}))

nym-wallet/webpack.config.js

@@ -33,13 +33,18 @@ module.exports = {
         use: ['style-loader', 'css-loader'],
       },
       {
-        test: /\.(png|jpe?g|gif|svg)$/i,
+        test: /\.(png|jpe?g|gif)$/i,
         use: [
           {
             loader: 'file-loader',
           },
         ],
       },
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        use: ['@svgr/webpack'],
+      },
     ],
   },
   resolve: {