add github icon for header

Author: penicillin0

package.json

@@ -30,6 +30,7 @@
   "dependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
     "react-scripts": "4.0.3",
     "react-select": "^5.2.1",
     "styled-components": "^5.3.3",

src/components/Header.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { IconContext } from 'react-icons';
+import { FaGithub } from 'react-icons/fa';
 import styled from 'styled-components';
 import Icon from '../images/icon.png';
 
@@ -9,10 +11,25 @@ export const Header: React.FC<Props> = () => {
     <Main>
       <Image src={Icon} />
       <Title>Scrapbox List Marker</Title>
+      <IconContext.Provider value={githubIconConfig}>
+        <a
+          href="https://github.com/penicillin0/scrapbox-list-marker"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <FaGithub />
+        </a>
+      </IconContext.Provider>
     </Main>
   );
 };
 
+const githubIconConfig = {
+  color: '#444',
+  size: '22px',
+  style: { paddingLeft: '52px' },
+};
+
 const Main = styled.div`
   padding: 7px;
   height: 54px;

yarn.lock

@@ -9444,6 +9444,11 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-icons@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
+  integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
+
 react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"