refactor(starter): upgrade to new version of gatsby

src/components/Icon/Icon.js

@@ -1,20 +0,0 @@
-// @flow strict
-import React from 'react';
-import styles from './Icon.module.scss';
-
-type Props = {
-  name: string,
-  icon: {
-    viewBox?: string,
-    path?: string
-  }
-};
-
-const Icon = ({ name, icon }: Props) => (
-  <svg className={styles['icon']} viewBox={icon.viewBox}>
-    <title>{name}</title>
-    <path d={icon.path} />
-  </svg>
-);
-
-export default Icon;

src/components/Icon/Icon.module.scss

@@ -1,19 +1,19 @@
 .icon {
   display: inline-block;
-  width: 1em;
-  height: 1em;
-  stroke-width: 0;
-  stroke: currentColor;
   fill: currentColor;
-  font-style: normal;
-  font-weight: normal;
-  speak: none;
-  margin-right: .2em;
-  text-align: center;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1em;
-  margin-left: .2em;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  height: 1em;
+  line-height: 1em;
+  margin-left: 0.2em;
+  margin-right: 0.2em;
+  speak: none;
+  stroke: currentColor;
+  stroke-width: 0;
+  text-align: center;
+  text-transform: none;
+  width: 1em;
+}

src/components/Icon/Icon.test.js

@@ -1,19 +0,0 @@
-// @flow strict
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Icon from './Icon';
-
-describe('Icon', () => {
-  const props = {
-    name: 'test',
-    icon: {
-      viewBox: '0 0 0 0',
-      path: '',
-    }
-  };
-
-  it('renders correctly', () => {
-    const tree = renderer.create(<Icon {...props} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

src/components/Icon/Icon.test.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { Icon } from "@/components/Icon";
+
+describe("Icon", () => {
+  const props = {
+    name: "test",
+    icon: {
+      viewBox: "0 0 0 0",
+      path: "",
+    },
+  };
+
+  it("renders correctly", () => {
+    const tree = renderer.create(<Icon {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Icon/Icon.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+import styles from "./Icon.module.scss";
+
+interface Props {
+  name: string;
+  icon: {
+    path?: string;
+    viewBox?: string;
+  };
+}
+
+const Icon: React.FC<Props> = ({ name, icon }: Props) => (
+  <svg className={styles.icon} viewBox={icon.viewBox}>
+    <title>{name}</title>
+    <path d={icon.path} />
+  </svg>
+);
+
+export default Icon;

src/components/Icon/index.js

@@ -1,2 +0,0 @@
-// @flow strict
-export { default } from './Icon';

src/components/Icon/index.ts

@@ -0,0 +1 @@
+export { default as Icon } from "./Icon";