🔥

components/Icon.tsx

@@ -1,4 +1,3 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import toast, { Toaster } from 'react-hot-toast';
 import copy from 'copy-to-clipboard'
 
@@ -8,11 +7,11 @@ const Icon = ({icon, reference, copy = false} : {icon: any, reference: any, copy
             { 
                 copy ? (
                     <a onClick={() => doThings(reference)}>
-                        <FontAwesomeIcon icon={icon} />
+                        {icon}
                     </a>
                 ) : (
                     <a href={reference} target='_blank' rel='noopener noreferrer' aria-label="Icon">
-                        <FontAwesomeIcon icon={icon} />
+                        {icon}
                     </a>
                 )
             }

components/Time.tsx

@@ -1,4 +1,4 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { FaClock } from 'react-icons/fa';
 import { useEffect, useState } from 'react'
 import styles from 'styles/Home.module.scss'
 
@@ -14,7 +14,7 @@ const Timer = () => {
 
     return(
         <div className={styles.time}>
-            <p><FontAwesomeIcon icon={['fas', 'clock']} /> {date.toLocaleDateString('en-GB', { dateStyle: 'short' }) + ' • ' + date.toLocaleTimeString('en-GB', { timeStyle: 'medium', hour12: true,  timeZone: 'Europe/Budapest'}).toUpperCase()}</p>
+            <p><FaClock /> {date.toLocaleDateString('en-GB', { dateStyle: 'short' }) + ' • ' + date.toLocaleTimeString('en-GB', { timeStyle: 'medium', hour12: true,  timeZone: 'Europe/Budapest'}).toUpperCase()}</p>
         </div>
     )
 }

components/Weather.tsx

@@ -1,25 +1,26 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import styles from 'styles/Home.module.scss'
+import { FaSun, FaMoon, FaCloudSun, FaCloudMoon, FaCloud, FaCloudShowersHeavy } from 'react-icons/fa'
+import { BsCloudDrizzleFill, BsCloudsFill, BsCloudLightningFill, BsCloudSnowFill, BsCloudFogFill } from 'react-icons/bs' 
 
 const Weather = ({data}: {data: any}) => {
     const { temp: temperature } = data.main
     const { icon: weatherIcon, description: weatherDescription} = data.weather[0]
 
     const icons: any = {
-        _01d: ['fas', 'sun'], _01n: ['fas', 'moon'],
-        _02d: ['fas', 'cloud-sun'], _02n: ['fas', 'cloud-moon'],
-        _03d: ['fas', 'cloud'], _03n: ['fas', 'cloud'],
-        _04d: ['fas', 'clouds'], _04n: ['fas', 'clouds'],
-        _09d: ['fas', 'cloud-drizzle'], _09n: ['fas', 'cloud-drizzle'],
-        _10d: ['fas', 'cloud-showers-heavy'], _10n: ['fas', 'cloud-showers-heavy'],
-        _11d: ['fas', 'cloud-bolt-sun'], _11n: ['fas', 'cloud-bolt-moon'],
-        _13d: ['fas', 'snow-flake'], _13n: ['fas', 'snow-flake'],
-        _50d: ['fas', 'cloud-fog'], _50n: ['fas', 'cloud-fog']
+        _01d: <FaSun />, _01n: <FaMoon />,
+        _02d: <FaCloudSun />, _02n: <FaCloudMoon />,
+        _03d: <FaCloud />, _03n: <FaCloud />,
+        _04d: <BsCloudsFill />, _04n: <BsCloudsFill />,
+        _09d: <BsCloudDrizzleFill />, _09n: <BsCloudDrizzleFill />,
+        _10d: <FaCloudShowersHeavy />, _10n: <FaCloudShowersHeavy />,
+        _11d: <BsCloudLightningFill />, _11n: <BsCloudLightningFill />,
+        _13d: <BsCloudSnowFill />, _13n: <BsCloudSnowFill />,
+        _50d: <BsCloudFogFill />, _50n: <BsCloudFogFill />
     }
 
     return (
         <div className={styles.weather}>
-            <FontAwesomeIcon icon={icons[`_${weatherIcon}`]}/> <p>It&apos;s currently <b>{parseInt(temperature)} °C</b> <span>({weatherDescription})</span> in <a href='https://weather.com/en-GB/weather/today/l/b979f874d2f515646f37e2bb434a85cc04869c5a35c6bdf1c6fba26f659313f0' target="_blank" rel='noopener noreferrer'><b>Budapest</b></a></p>
+            {icons[`_${weatherIcon}`]} <p>It&apos;s currently <b>{parseInt(temperature)} °C</b> <span>({weatherDescription})</span> in <a href='https://weather.com/en-GB/weather/today/l/b979f874d2f515646f37e2bb434a85cc04869c5a35c6bdf1c6fba26f659313f0' target="_blank" rel='noopener noreferrer'><b>Budapest</b></a></p>
         </div>
     )
 }

package.json

@@ -9,18 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-brands-svg-icons": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@fortawesome/react-fontawesome": "^0.1.18",
     "@swc/core": "^1.2.160",
     "copy-to-clipboard": "^3.3.1",
+    "csstype": "^3.0.10",
+    "goober": "2.1.8",
     "next": "12.1.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-hot-toast": "^2.2.0",
-    "goober": "2.1.8",
-    "csstype": "^3.0.10",
+    "react-icons": "^4.3.1",
     "sass": "^1.49.9",
     "use-last-fm": "^0.6.1"
   },

pages/_app.tsx

@@ -1,14 +1,5 @@
-import { fas } from '@fortawesome/free-solid-svg-icons';
-import { fab } from '@fortawesome/free-brands-svg-icons';
-import { config, library } from '@fortawesome/fontawesome-svg-core';
-
 import type { AppProps } from 'next/app'
-
 import 'styles/globals.scss'
-import '@fortawesome/fontawesome-svg-core/styles.css'
-
-library.add(fab, fas)
-config.autoAddCss = false
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
   return <Component {...pageProps} />

pages/index.tsx

@@ -8,6 +8,9 @@ import MainLayout from 'components/MainLayout'
 import Spotify from 'components/Spotify'
 import Time from 'components/Time'
 import Weather from 'components/Weather'
+import { FaSteam, FaGithub, FaEnvelope } from 'react-icons/fa'
+import { RiInstagramFill } from 'react-icons/ri'
+import { SiDiscord } from 'react-icons/si' 
 
 const Home = ({data}: any) => {
     return(
@@ -18,11 +21,11 @@ const Home = ({data}: any) => {
             <Body>
                 <MainLayout />
                 <IconLayout>
-                    <Icon icon={['fab', 'discord']} reference={'albert#8838'} copy={true} />
-                    <Icon icon={['fab', 'steam']} reference={'https://steamcommunity.com/id/_albert'} copy={false} />
-                    <Icon icon={['fab', 'github']} reference={'https://github.com/skidoodle'} copy={false} />
-                    <Icon icon={['fa', 'envelope']} reference={'hello@albrt.hu'} copy={true} />
-                    <Icon icon={['fab', 'instagram']} reference={'https://instagram.com/albertadam_'} copy={false} />
+                    <Icon icon={<FaGithub />} reference={'https://github.com/skidoodle'} copy={false} />
+                    <Icon icon={<FaSteam />} reference={'https://steamcommunity.com/id/_albert'} copy={false} />
+                    <Icon icon={<FaEnvelope />} reference={'hello@albrt.hu'} copy={true} />
+                    <Icon icon={<RiInstagramFill />} reference={'https://instagram.com/albertadam_'} copy={false} />
+                    <Icon icon={<SiDiscord />} reference={'albert#8838'} copy={true} />
                 </IconLayout>
                 <Time />
                 <Weather data={data}/>

styles/Home.module.scss

@@ -27,7 +27,7 @@
     margin-bottom: 5%;
 
     svg {
-        font-size: 1.2em;
+        font-size: 1.4em;
         cursor: pointer;
         margin-right: 7%;
         margin-bottom: 1em;
@@ -53,7 +53,7 @@
 .weather {
     opacity: 0;
     animation-delay: 0.5s;
-
+    
     img {
         float: left;
     }
@@ -62,9 +62,10 @@
         display: inline;
     }
 
-    a {
-        font-size: 1em;
+    span {
+        font-size: .8rem;
     }
+    
     a:hover {
         text-decoration: none;
         color: #C7D2FE;

yarn.lock

@@ -1573,6 +1573,11 @@ react-hot-toast@^2.2.0:
   dependencies:
     goober "^2.1.1"
 
+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"