Remove inline svg and update browserslist

Author: leonm1

.babelrc

@@ -1,9 +1,5 @@
 {
-	"presets": [
-		"@babel/env",
-		"@babel/preset-typescript",
-		"@babel/preset-react"
-	],
+	"presets": ["@babel/env", "@babel/preset-typescript", "@babel/preset-react"],
 	"plugins": [
 		"@babel/proposal-class-properties",
 		"@babel/proposal-object-rest-spread",

.eslintrc.js

@@ -22,7 +22,7 @@ module.exports = {
 				extensions: ['.js', '.ts', '.jsx', '.tsx', '.json'],
 			},
 			webpack: {
-				extensions: ['.svg', '.svg?inline', '.graphql'],
+				extensions: ['.svg', '.graphql'],
 			},
 		},
 	},

package.json

@@ -184,10 +184,11 @@
 		"webpack-merge": "^4.2.1"
 	},
 	"browserslist": [
-		"> 1% in US",
-		"firefox ESR",
-		"last 2 versions",
-		"not IE > 10",
-		"not dead"
+		"last 2 chrome versions",
+		"last 2 firefox versions",
+		"last 2 safari versions",
+		"last 2 edge versions",
+		"last 2 ios versions",
+		"last 2 chromeandroid versions"
 	]
 }

src/client/components/Input/Checkbox.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 import { Update } from 'use-immer';
 import { AppField } from '../../routes/application/ApplicationConfig';
-import UncheckedSvg from '../../assets/img/unchecked_box.svg?inline';
-import CheckedSvg from '../../assets/img/checked_box.svg?inline';
+import UncheckedSvg from '../../assets/img/unchecked_box.svg';
+import CheckedSvg from '../../assets/img/checked_box.svg';
 
 interface Props extends AppField {
 	options?: string[];
@@ -112,9 +112,9 @@ export class Checkbox extends React.PureComponent<Props, {}> {
 									/>
 									<label htmlFor={option}>
 										{value.has(option) ? (
-											<CheckedSvg width={24} height={24} />
+											<img src={CheckedSvg} alt="checked" width={24} height={24} />
 										) : (
-											<UncheckedSvg width={24} height={24} />
+											<img src={UncheckedSvg} alt="unchecked" width={24} height={24} />
 										)}
 										{option}
 									</label>

src/client/components/Sidebar/Sidebar.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import styled from 'styled-components';
 import { NavLink as UglyNavLink, withRouter } from 'react-router-dom';
-import SqLogo from '../../assets/img/square_hackathon_logo.svg?inline';
+import SqLogo from '../../assets/img/square_hackathon_logo.svg';
 import STRINGS from '../../assets/strings.json';
 import NavButton from '../Buttons/NavButton';
 import { SpaceBetweenColumn, FlexEndColumn } from '../Containers/FlexContainers';
@@ -115,7 +115,7 @@ const Sidebar = withRouter(
 			<Layout>
 				<Background>
 					<Logo>
-						<SqLogo />
+						<img src={SqLogo} alt="VH graphic" />
 					</Logo>
 					<HorizontalLine />
 					<SpaceBetweenColumn height="calc(100% - calc(8rem + 160px))">

src/client/components/Text/ErrorMessage.tsx

@@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import STRINGS from '../../assets/strings.json';
-import SadFace from '../../assets/img/sad_face.svg?inline';
+import SadFace from '../../assets/img/sad_face.svg';
 import TextButton from '../Buttons/TextButton';
 
 const Rectangle = styled.div`
@@ -32,7 +32,7 @@ export const ErrorMessage: FunctionComponent<ErrorMessageProps> = (
 	const { children } = props;
 	return (
 		<Rectangle>
-			<SadFace />
+			<img src={SadFace} alt="Sad face" />
 			{children}
 		</Rectangle>
 	);

tsconfig.json

@@ -1,6 +1,6 @@
 {
 	"compilerOptions": {
-		"module": "commonjs",
+		"module": "esnext",
 		"allowJs": true,
 		"allowSyntheticDefaultImports": true,
 		"emitDecoratorMetadata": true,
@@ -10,27 +10,10 @@
 		"jsx": "react",
 		"moduleResolution": "node",
 		"resolveJsonModule": true,
+		"sourceMap": true,
 		"strict": true,
-		"target": "es2017",
-		"lib": [
-			"es5",
-			"es6",
-			"dom",
-			"es2015",
-			"es2015.core",
-			"es2015.collection",
-			"es2015.generator",
-			"es2015.iterable",
-			"es2015.promise",
-			"es2015.proxy",
-			"es2015.reflect",
-			"es2015.symbol",
-			"es2015.symbol.wellknown",
-			"esnext.asynciterable",
-			"es2017.object",
-			"es2017"
-		],
-		"outDir": "dist",
+		"target": "esnext",
+		"outDir": "./dist/",
 		"baseUrl": ".",
 		"paths": {
 			"*": ["node_modules/*"]

webpack.common.js

@@ -28,15 +28,7 @@ module.exports = {
 			},
 			{
 				test: /\.svg$/,
-				oneOf: [
-					{
-						resourceQuery: /inline/,
-						use: ['@svgr/webpack'],
-					},
-					{
-						use: ['@svgr/webpack', 'file-loader'],
-					},
-				],
+				use: ['@svgr/webpack', 'file-loader'],
 			},
 			{
 				include: /node_modules/,