add twitter

Author: khendrikse

components/Footer/footer.module.scss

@@ -32,6 +32,7 @@
       @media (prefers-color-scheme: dark) {
         fill: white;
       }
+      width: 24px;
     }
   }
 }

components/Footer/index.js

@@ -1,40 +1,45 @@
+import { BsGithub, BsLinkedin, BsFillRssFill, BsTwitter } from 'react-icons/bs';
+import { SiDevdotto } from 'react-icons/si';
 import styles from './footer.module.scss';
-import DevTo from '../../public/assets/images/devto.svg';
-import GitHub from '../../public/assets/images/github.svg';
-import LinkedIn from '../../public/assets/images/linkedin.svg';
-import Rss from '../../public/assets/images/rss.svg';
 
 export default function Footer() {
   return (
     <div className={styles.footer}>
       <div className={styles.footer__links}>
-        <a
-          className={styles.footer__link}
-          aria-label='DEV.to'
-          href='https://dev.to/khenhey'
-        >
-          <DevTo width='24px' height='24px' alt='DEV.to' />
-        </a>
         <a
           className={styles.footer__link}
           aria-label='GitHub'
           href='https://github.com/khendrikse'
         >
-          <GitHub width='24px' height='24px' alt='GitHub' />
+          <BsGithub size='24px' alt='GitHub' />
         </a>
         <a
           className={styles.footer__link}
           aria-label='linkedin'
           href='https://www.linkedin.com/in/karinhendrikse/'
         >
-          <LinkedIn width='24px' height='24px' alt='LinkedIn' />
+          <BsLinkedin size='24px' alt='LinkedIn' />
+        </a>
+        <a
+          className={styles.footer__link}
+          aria-label='Twitter'
+          href='https://twitter.com/k_henhey'
+        >
+          <BsTwitter size='24px' alt='Twitter' />
+        </a>
+        <a
+          className={styles.footer__link}
+          aria-label='DEV.to'
+          href='https://dev.to/khenhey'
+        >
+          <SiDevdotto size='24px' alt='DEV.to' />
         </a>
         <a
           className={styles.footer__link}
           aria-label='RSS feed'
           href='https://khendrikse.github.io/feeds/feed.xml'
         >
-          <Rss width='24px' height='24px' alt='RSS' />
+          <BsFillRssFill size='24px' alt='RSS' />
         </a>
         © {new Date().getFullYear()} Karin Hendrikse
       </div>

components/Navbar/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import Link from 'next/link';
+import { BsFillRssFill } from 'react-icons/bs';
 import styles from './navbar.module.scss';
-import Rss from '../../public/assets/images/rss.svg';
 
 // TODO: current page styling for links
 
@@ -42,7 +42,7 @@ export default function Header() {
                 aria-label='RSS feed'
                 href='https://khendrikse.github.io/feeds/feed.xml'
               >
-                <Rss width='14px' height='14px' alt='RSS' />
+                <BsFillRssFill size='14px' alt='RSS' />
               </a>
             </li>
           </ul>

package.json

@@ -6,7 +6,8 @@
     "dev": "next dev -p 8080",
     "build": "next build",
     "start": "next start",
-    "test": "jest"
+    "test": "jest",
+    "lint": "eslint ."
   },
   "dependencies": {
     "@babel/eslint-parser": "^7.16.5",
@@ -27,6 +28,7 @@
     "raw-loader": "^4.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
     "react-markdown": "^8.0.0",
     "react-syntax-highlighter": "^15.4.5",
     "remark-gfm": "^3.0.1",

public/assets/images/devto.svg

@@ -6891,6 +6891,11 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+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.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"