replace fortawesome with react-icons

package.json

@@ -2,10 +2,6 @@
   "name": "personal-website",
   "version": "1.0.0",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.21",
-    "@fortawesome/free-brands-svg-icons": "^5.10.1",
-    "@fortawesome/free-solid-svg-icons": "^5.10.1",
-    "@fortawesome/react-fontawesome": "^0.1.4",
     "gatsby": "^2.31.0",
     "gatsby-plugin-feed": "^2.12.0",
     "gatsby-plugin-react-helmet": "^3.1.3",
@@ -17,6 +13,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^5.2.1",
+    "react-icons": "^4.3.1",
     "styled-components": "^5.2.1",
     "zustand": "^3.3.1"
   },

src/components/ExternalLink.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
+import { FaExternalLinkAlt } from 'react-icons/fa'
 
 const ExternalLink = (props) => {
-  return (  
-    <a {...props} href={props.href} target="_blank" rel="noopener noreferrer">{props.children} <FontAwesomeIcon icon={faExternalLinkAlt} /></a>
+  return (
+    <a {...props} href={props.href} target="_blank" rel="noopener noreferrer">{props.children} <FaExternalLinkAlt style={{fontSize: 'small'}} /></a>
   );
 }
 

src/components/Footer.js

@@ -1,9 +1,7 @@
 import React from 'react'
 import { Link } from 'gatsby'
 import styled from 'styled-components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faInfo } from '@fortawesome/free-solid-svg-icons'
-import { faGit } from '@fortawesome/free-brands-svg-icons';
+import { FaInfo, FaGit } from 'react-icons/fa'
 
 import Will from '../images/will.png';
 
@@ -40,8 +38,8 @@ const Footer = () => (
   <StyledFooter>
     <StyledAvatar />
     <StyledCopyright>&copy; Will Webberley {(new Date()).getFullYear()}</StyledCopyright>
-    <StyledSourceLink href="https://git.wilw.dev/wilw/wilw.dev" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faGit} /> View site source</StyledSourceLink>
-    <StyledNavLink to='/this'><FontAwesomeIcon icon={faInfo} /> About this site &amp; privacy</StyledNavLink>
+    <StyledSourceLink href="https://git.wilw.dev/wilw/wilw.dev" target="_blank" rel="noopener noreferrer"><FaGit /> View site source</StyledSourceLink>
+    <StyledNavLink to='/this'><FaInfo /> About this site &amp; privacy</StyledNavLink>
   </StyledFooter>
 )
 

src/pages/blog/index.js

@@ -1,8 +1,7 @@
 import React from "react";
 import { graphql, Link } from 'gatsby';
 import Helmet from 'react-helmet';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faRss } from '@fortawesome/free-solid-svg-icons';
+import { FaRss } from 'react-icons/fa';
 import styled from 'styled-components';
 
 import Layout from '../../components/Layout/Layout.js';
@@ -24,7 +23,7 @@ export default class Blog extends React.Component {
         <StyledHeader>
           <span>Blog posts</span>
           <small>
-            <FontAwesomeIcon icon={faRss} /> <Link to='/feeds'>RSS feeds</Link>
+            <FaRss /> <Link to='/feeds'>RSS feeds</Link>
           </small>
         </StyledHeader>
         {this.props.data.allMarkdownRemark.edges.map(({ node }) => {

src/pages/feeds.js

@@ -1,6 +1,5 @@
 import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faRssSquare, faCopy } from '@fortawesome/free-solid-svg-icons'
+import { FaRssSquare, FaCopy } from 'react-icons/fa'
 import Helmet from 'react-helmet'
 import styled from 'styled-components';
 
@@ -55,7 +54,7 @@ const FeedsPage = () => {
   const copyFeedsUrl = () =>
     navigator && navigator.clipboard && navigator.clipboard.writeText &&
       navigator.clipboard.writeText('https://wilw.dev');
-  
+
   return (
     <Layout>
       <Helmet title='Feeds'>
@@ -70,14 +69,14 @@ const FeedsPage = () => {
          I use <ExternalLink href="https://www.reederapp.com/">Reeder 5</ExternalLink> on my <ExternalLink href="https://itunes.apple.com/app/id1529448980">Mac</ExternalLink> and <ExternalLink href="https://apps.apple.com/app/id1529445840">iPhone</ExternalLink>.</p>
       </Alert>
 
-      <h3><Emoji e='🌍' n='Earth'/> Recommended: enter <code>wilw.dev <StyledCopyButton onClick={copyFeedsUrl}><FontAwesomeIcon icon={faCopy} /></StyledCopyButton></code> into your RSS reader &amp; it should list the available feeds</h3>
+      <h3><Emoji e='🌍' n='Earth'/> Recommended: enter <code>wilw.dev <StyledCopyButton onClick={copyFeedsUrl}><FaCopy /></StyledCopyButton></code> into your RSS reader &amp; it should list the available feeds</h3>
       <p>Alternatively you can choose a feed from the options below.</p>
 
-      {feeds.map(feed => 
-        <Alert key={feed.url} colour='green' title={<span><FontAwesomeIcon icon={faRssSquare} /> {feed.name}</span>}>
+      {feeds.map(feed =>
+        <Alert key={feed.url} colour='green' title={<span><FaRssSquare /> {feed.name}</span>}>
           <p>{feed.description}</p>
           <StyledButton href={feed.url}>Subscribe</StyledButton>
-        </Alert>  
+        </Alert>
       )}
     </Layout>
   );

src/pages/index.js

@@ -1,8 +1,7 @@
 import React from 'react'
 import { Link, graphql } from "gatsby";
 import Helmet from 'react-helmet'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faRss } from '@fortawesome/free-solid-svg-icons'
+import { FaRss } from 'react-icons/fa'
 
 import Layout from '../components/Layout/Layout.js';
 import Emoji from '../components/Emoji';
@@ -27,7 +26,7 @@ const IndexPage = (props) => (
     <p><Emoji e='👨‍🏫' n='Teacher'/> I lectured the Advanced Computer Science MSc module <i><ExternalLink href="https://github.com/willwebberley/CMT111">Web &amp; Social Computing</ExternalLink></i> and the Computer Science BSc module <i><ExternalLink href="https://github.com/willwebberley/CM2101">Human-Computer Interaction</ExternalLink></i>.</p>
 
     <h3>What's on this website?</h3>
-    <p><Emoji n="Blogging" e='📝' /> I write about technology and things I find interesting on <Link to='/blog'>my blog</Link> <small>(<FontAwesomeIcon icon={faRss} /> <Link to='/feeds'>RSS feeds</Link> available)</small>.</p>
+    <p><Emoji n="Blogging" e='📝' /> I write about technology and things I find interesting on <Link to='/blog'>my blog</Link> <small>(<FaRss /> <Link to='/feeds'>RSS feeds</Link> available)</small>.</p>
     <p><Emoji n='Notes' e='📔' /> I maintain a collection of <Link to='/notes'>thoughts, links and notes</Link>.</p>
     <p><Emoji e='🚀' n='Rocket ship'/> I (occasionally) publish additional content on my geminispace at <a href="gemini://wilw.capsule.town">gemini://wilw.capsule.town</a> <small>(see <Link to='/blog/2021/01/20/project-gemini'>this post</Link> for help with opening this link)</small>.</p>
     <p><Emoji n="Research" e='👨‍💻' /> Some of my research publications are <Link to='/research'>available here</Link>.</p>

src/pages/projects.js

@@ -1,7 +1,5 @@
 import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faLaptop } from '@fortawesome/free-solid-svg-icons';
-import { faLinux, faApple, faAndroid, faGithub } from '@fortawesome/free-brands-svg-icons';
+import { FaLaptop, FaLinux, FaApple, FaAndroid, FaGithub } from 'react-icons/fa';
 import Helmet from 'react-helmet';
 import styled from 'styled-components';
 
@@ -17,28 +15,28 @@ const projects = [
     logo: capsuleTownIcon,
     url: 'https://portal.mozz.us/gemini/capsule.town',
     description: 'A free Vercel-like service for hosting your own Geminispace. Find out more by visiting gemini://capsule.town in your Gemini client. The link above will show the Gemini capsule through a web proxy service.',
-    availableFor: [ { name: 'macOS', icon: faApple }, { name: 'Linux', icon: faLinux } ],
+    availableFor: [ { name: 'macOS', icon: FaApple }, { name: 'Linux', icon: FaLinux } ],
   },
   {
     name: 'Treadl',
     logo: treadlIcon,
     url: 'https://treadl.com',
     description: 'A webapp for managing, displaying, and sharing weaving projects.',
-    availableFor: [ { name: 'Web', icon: faLaptop }, { name: 'iOS', icon: faApple }, { name: 'Android', icon: faAndroid } ]
+    availableFor: [ { name: 'Web', icon: FaLaptop }, { name: 'iOS', icon: FaApple }, { name: 'Android', icon: FaAndroid } ]
   },
   {
     name: 'Dotty',
     logo: dottyIcon,
     url: 'https://dotty.cloud',
     description: 'A command-line tool and RESTful API for backing-up and storing dotfiles and configuration files.',
-    availableFor: [ { name: 'Web', icon: faLaptop }, { name: 'macOS', icon: faApple, url: 'https://dotty.cloud/documentation/quick-start' }, { name: 'Linux', icon: faLinux, url: 'https://dotty.cloud/documentation/quick-start' } ]
+    availableFor: [ { name: 'Web', icon: FaLaptop }, { name: 'macOS', icon: FaApple, url: 'https://dotty.cloud/documentation/quick-start' }, { name: 'Linux', icon: FaLinux, url: 'https://dotty.cloud/documentation/quick-start' } ]
   },
   {
     name: 'SSO Tools',
     logo: ssotoolsIcon,
     url: 'https://sso.tools',
     description: 'A webapp for managing custom IdPs for testing and building out single sign-on and enterprise applications.',
-    availableFor: [ { name: 'Web', icon: faLaptop } ]
+    availableFor: [ { name: 'Web', icon: FaLaptop } ]
   },
 ];
 
@@ -122,7 +120,7 @@ const ProjectsPage = () => (
               <h3><a href={p.url} target='_blank' rel='noopener noreferrer'>{p.name}</a></h3>
               <p>{p.description}</p>
               <p>{p.availableFor && p.availableFor.map((a, j) =>
-                <StyledPlatform key={j} href={a.url || p.url} target="_blank" rel="noopener noreferrer">{a.icon && <FontAwesomeIcon icon={a.icon} />} {a.name}</StyledPlatform>
+                <StyledPlatform key={j} href={a.url || p.url} target="_blank" rel="noopener noreferrer">{a.icon && <a.icon />} {a.name}</StyledPlatform>
               )}</p>
             </div>
           </StyledProject>
@@ -134,7 +132,7 @@ const ProjectsPage = () => (
           <div key={i}>
             <h3>{p.name}</h3>
             <p>{p.description}</p>
-              {p.source && <a href={p.source} target='_blank' rel='noopener noreferrer'><span><FontAwesomeIcon icon={faGithub} /> Project home</span></a>}
+              {p.source && <a href={p.source} target='_blank' rel='noopener noreferrer'><span><FaGithub /> Project home</span></a>}
           </div>
         )}
       </div>

src/templates/blog-post.js

@@ -2,18 +2,13 @@ import React from "react";
 import moment from 'moment';
 import { graphql, Link } from 'gatsby'
 import Helmet from 'react-helmet'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faArrowLeft, faRss } from '@fortawesome/free-solid-svg-icons'
-import { config } from "@fortawesome/fontawesome-svg-core"
-import "@fortawesome/fontawesome-svg-core/styles.css"
+import { FaArrowLeft, FaRss } from 'react-icons/fa'
 
 import Layout from '../components/Layout/Layout.js';
 import Tag from '../components/Tag';
 import Alert from '../components/Alert';
 import ExternalLink from '../components/ExternalLink';
 
-config.autoAddCss = false;
-
 export default class BlogPost extends React.Component {
 
   render() {
@@ -23,7 +18,7 @@ export default class BlogPost extends React.Component {
         <Helmet title={post.frontmatter.title}>
           {post.frontmatter.description && <meta name="description" content={post.frontmatter.description} />}
         </Helmet>
-        <h4><FontAwesomeIcon icon={faArrowLeft} /> <Link to='/blog'>More posts</Link></h4>
+        <h4><FaArrowLeft /> <Link to='/blog'>More posts</Link></h4>
 
         <h1>{post.frontmatter.title}</h1>
         <h4>{moment(post.frontmatter.date).format('D MMMM YYYY')} <i><small>({moment(post.frontmatter.date).fromNow()})</small></i>
@@ -62,7 +57,7 @@ export default class BlogPost extends React.Component {
 
         <Alert colour='blue' emoji='📲' emojiName='Download to phone emoji' title='Enjoyed this article? Subscribe to updates!'>
           <p>If you would like to read more posts like this, then you can subscribe via RSS.</p>
-          <p><FontAwesomeIcon icon={faRss} /> <Link to='/feeds'>Subscribe to an RSS feed</Link></p>
+          <p><FaRss /> <Link to='/feeds'>Subscribe to an RSS feed</Link></p>
         </Alert>
       </Layout>
     );

src/templates/note.js

@@ -2,8 +2,7 @@ import React from "react";
 import moment from 'moment';
 import { graphql, Link } from 'gatsby'
 import Helmet from 'react-helmet'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'
+import { FaArrowLeft } from 'react-icons/fa'
 
 import Layout from '../components/Layout/Layout.js';
 import Tag from '../components/Tag';
@@ -18,7 +17,7 @@ export default class Note extends React.Component {
         <Helmet title={note.frontmatter.title}>
           {note.frontmatter.description && <meta name="description" content={note.frontmatter.description} />}
         </Helmet>
-        <h4><FontAwesomeIcon icon={faArrowLeft} /> <Link to='/notes'>More notes</Link></h4>
+        <h4><FaArrowLeft /> <Link to='/notes'>More notes</Link></h4>
 
         <h1><Emoji e='📔' n='Notebook' /> {note.frontmatter.title}</h1>
         <h4>Last updated {moment(note.frontmatter.date).format('D MMMM YYYY')} <i><small>({moment(note.frontmatter.date).fromNow()})</small></i>

yarn.lock

@@ -1398,52 +1398,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fortawesome/fontawesome-common-types@npm:^0.2.34":
-  version: 0.2.34
-  resolution: "@fortawesome/fontawesome-common-types@npm:0.2.34"
-  checksum: 5f1b5f92e7e39eb32ea80c4b69528d636a8c80a341e450e0ba16e30d7488c4336932fa97bf4c41e44981695f6dc6aed41e396d83b8a20dc5a8353c9a642c2b3e
-  languageName: node
-  linkType: hard
-
-"@fortawesome/fontawesome-svg-core@npm:^1.2.21":
-  version: 1.2.34
-  resolution: "@fortawesome/fontawesome-svg-core@npm:1.2.34"
-  dependencies:
-    "@fortawesome/fontawesome-common-types": ^0.2.34
-  checksum: 20b710da2fc5224de8a82b61c2a06712c576784683800e3dd3a851733c189800ab2496dc5bec16e72068d441ff7d28dd9aba6cd29187ac1c3aa0b5a64dfb5444
-  languageName: node
-  linkType: hard
-
-"@fortawesome/free-brands-svg-icons@npm:^5.10.1":
-  version: 5.15.2
-  resolution: "@fortawesome/free-brands-svg-icons@npm:5.15.2"
-  dependencies:
-    "@fortawesome/fontawesome-common-types": ^0.2.34
-  checksum: 1b4c20c907ae825fb8cc124e5765e69cf547ac1a4bc736c1192e6aa6f47305d19c50fc10d87e3eb941658a0e0b5680c50269c2ea960f64f961403db2fd868b68
-  languageName: node
-  linkType: hard
-
-"@fortawesome/free-solid-svg-icons@npm:^5.10.1":
-  version: 5.15.2
-  resolution: "@fortawesome/free-solid-svg-icons@npm:5.15.2"
-  dependencies:
-    "@fortawesome/fontawesome-common-types": ^0.2.34
-  checksum: 6437216c224eede9dd811058fae2fce1f4acdc8d0cfcf866cf8a943ee9f24ad1f391c365c1c1d41241cec3b01bc304a71038e21710912054acc213242967a6ea
-  languageName: node
-  linkType: hard
-
-"@fortawesome/react-fontawesome@npm:^0.1.4":
-  version: 0.1.14
-  resolution: "@fortawesome/react-fontawesome@npm:0.1.14"
-  dependencies:
-    prop-types: ^15.7.2
-  peerDependencies:
-    "@fortawesome/fontawesome-svg-core": ^1.2.32
-    react: ">=16.x"
-  checksum: fba8ee619ac77893fa119fc202d7807f2cc44c7093cb6ac7867a26536a62a6b62b71211bc5224378d48adcaede3d6fdf3e469139fab823717ae4031cec599342
-  languageName: node
-  linkType: hard
-
 "@gar/promisify@npm:^1.1.3":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -12257,10 +12211,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "personal-website@workspace:."
   dependencies:
-    "@fortawesome/fontawesome-svg-core": ^1.2.21
-    "@fortawesome/free-brands-svg-icons": ^5.10.1
-    "@fortawesome/free-solid-svg-icons": ^5.10.1
-    "@fortawesome/react-fontawesome": ^0.1.4
     gatsby: ^2.31.0
     gatsby-plugin-feed: ^2.12.0
     gatsby-plugin-react-helmet: ^3.1.3
@@ -12273,6 +12223,7 @@ __metadata:
     react: ^17.0.1
     react-dom: ^17.0.1
     react-helmet: ^5.2.1
+    react-icons: ^4.3.1
     styled-components: ^5.2.1
     zustand: ^3.3.1
   languageName: unknown
@@ -13329,6 +13280,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-icons@npm:^4.3.1":
+  version: 4.3.1
+  resolution: "react-icons@npm:4.3.1"
+  peerDependencies:
+    react: "*"
+  checksum: 2cc608acdd3e906aa3aaee290b8398220639677c949382d86e554020e5dab6a9f1ed7484418aa5272cb5c5c018e1fc9a323d433d901697a76530029f9ecb1263
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.12.0, react-is@npm:^16.7.0, react-is@npm:^16.8.1":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"