diff --git a/components/Footer.tsx b/components/Footer.tsx
index e927b79606..5d8a42fe7b 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,16 +1,10 @@
-import { FaEnvelopeOpenText } from '@react-icons/all-files/fa/FaEnvelopeOpenText'
-import { FaGithub } from '@react-icons/all-files/fa/FaGithub'
-import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin'
-import { FaMastodon } from '@react-icons/all-files/fa/FaMastodon'
-import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter'
-import { FaYoutube } from '@react-icons/all-files/fa/FaYoutube'
-import { FaZhihu } from '@react-icons/all-files/fa/FaZhihu'
-import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
-import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
import * as React from 'react'
+import cs from 'classnames'
+import { IoMoonSharp, IoSunnyOutline } from 'react-icons/io5'
import * as config from '@/lib/config'
import { useDarkMode } from '@/lib/use-dark-mode'
+import { PageSocialButtons } from './PageSocial'
import styles from './styles.module.css'
@@ -54,88 +48,7 @@ export function FooterImpl() {
- {config.twitter && (
-
-
-
- )}
-
- {config.mastodon && (
-
-
-
- )}
-
- {config.zhihu && (
-
-
-
- )}
-
- {config.github && (
-
-
-
- )}
-
- {config.linkedin && (
-
-
-
- )}
-
- {config.newsletter && (
-
-
-
- )}
-
- {config.youtube && (
-
-
-
- )}
+
)
diff --git a/components/NotionPageHeader.tsx b/components/NotionPageHeader.tsx
index 5fbb087ce3..36a6658c1f 100644
--- a/components/NotionPageHeader.tsx
+++ b/components/NotionPageHeader.tsx
@@ -1,8 +1,7 @@
import type * as types from 'notion-types'
-import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
-import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
import cs from 'classnames'
import * as React from 'react'
+import { IoMoonSharp, IoSunnyOutline } from 'react-icons/io5'
import { Breadcrumbs, Header, Search, useNotionContext } from 'react-notion-x'
import { isSearchEnabled, navigationLinks, navigationStyle } from '@/lib/config'
diff --git a/components/PageActions.tsx b/components/PageActions.tsx
index 755c60880c..e6ec96cf6b 100644
--- a/components/PageActions.tsx
+++ b/components/PageActions.tsx
@@ -1,5 +1,5 @@
-import { AiOutlineRetweet } from '@react-icons/all-files/ai/AiOutlineRetweet'
-import { IoHeartOutline } from '@react-icons/all-files/io5/IoHeartOutline'
+import { AiOutlineRetweet } from 'react-icons/ai'
+import { IoHeartOutline } from 'react-icons/io5'
import styles from './styles.module.css'
diff --git a/components/PageSocial.module.css b/components/PageSocial.module.css
index c82a8ee9a9..5761a0c720 100644
--- a/components/PageSocial.module.css
+++ b/components/PageSocial.module.css
@@ -6,6 +6,19 @@
color: var(--fg-color);
}
+.socialLink:hover {
+ color: var(--hover-color);
+}
+
+.pageSocial .actionBgPane {
+ background: var(--hover-color);
+}
+
+.pageSocial .socialLink:hover {
+ color: var(--fg-color);
+ border-color: var(--hover-color);;
+}
+
.action {
position: relative;
border-radius: 50%;
@@ -72,62 +85,6 @@
fill: var(--fg-color);
}
-.facebook .actionBgPane {
- background: #3b5998;
-}
-.facebook:hover {
- border-color: #3b5998;
-}
-
-.twitter .actionBgPane {
- background: #2795e9;
-}
-.twitter:hover {
- border-color: #2795e9;
-}
-
-.linkedin .actionBgPane {
- background: #0077b5;
-}
-.linkedin:hover {
- border-color: #0077b5;
-}
-
-.github .actionBgPane {
- background: #c9510c;
-}
-.github:hover {
- border-color: #c9510c;
-}
-
-.youtube .actionBgPane {
- background: #ff0000;
-}
-.youtube:hover {
- border-color: #ff0000;
-}
-
-.medium .actionBgPane {
- background: #00ab6c;
-}
-.medium:hover {
- border-color: #00ab6c;
-}
-
-.newsletter .actionBgPane {
- background: #777777;
-}
-.newsletter:hover {
- border-color: #777777;
-}
-
-.email .actionBgPane {
- background: #777;
-}
-.email:hover {
- border-color: #777;
-}
-
@media only screen and (max-width: 768px) {
.links {
position: relative;
diff --git a/components/PageSocial.tsx b/components/PageSocial.tsx
index 5301c06656..f232bb3529 100644
--- a/components/PageSocial.tsx
+++ b/components/PageSocial.tsx
@@ -4,90 +4,111 @@ import cs from 'classnames'
import * as config from '@/lib/config'
import styles from './PageSocial.module.css'
+import { FaGithub, FaLinkedin, FaTwitter, FaYoutube } from 'react-icons/fa'
+import { FaEnvelopeOpenText } from 'react-icons/fa6'
interface SocialLink {
name: string
title: string
- icon: React.ReactNode
+ icon: ({ size }: { size: number }) => React.ReactNode
+ color: string
href?: string
}
-const socialLinks: SocialLink[] = [
+export const socialLinks: SocialLink[] = [
config.twitter && {
name: 'twitter',
href: `https://twitter.com/${config.twitter}`,
title: `Twitter @${config.twitter}`,
- icon: (
-
- )
+ color: "#2795e9",
+ icon: FaTwitter
+ },
+
+ config.mastodon && {
+ name: 'mastodon',
+ href: config.mastodon,
+ title: 'Mastodon',
+ color: "#5a4be1",
+ icon: FaMastodon
},
config.github && {
name: 'github',
href: `https://github.com/${config.github}`,
title: `GitHub @${config.github}`,
- icon: (
-
- )
+ color: "#c9510c",
+ icon: FaGithub
},
config.linkedin && {
name: 'linkedin',
href: `https://www.linkedin.com/in/${config.linkedin}`,
title: `LinkedIn ${config.author}`,
- icon: (
-
- )
+ color: "#0077b5",
+ icon: FaLinkedin
},
config.newsletter && {
name: 'newsletter',
href: `${config.newsletter}`,
title: `Newsletter ${config.author}`,
- icon: (
-
- )
+ color: "#777",
+ icon: FaEnvelopeOpenText
},
config.youtube && {
name: 'youtube',
href: `https://www.youtube.com/${config.youtube}`,
title: `YouTube ${config.youtube}`,
- icon: (
-
- )
- }
+ color: "#ff0000",
+ icon: FaYoutube
+ },
].filter(Boolean)
export function PageSocial() {
return (
-
+ >
)
}
diff --git a/components/styles.module.css b/components/styles.module.css
index bea8ff1ed9..900c19bde7 100644
--- a/components/styles.module.css
+++ b/components/styles.module.css
@@ -90,34 +90,6 @@
color: #2795e9;
}
-.twitter:hover {
- color: #2795e9;
-}
-
-.mastodon:hover {
- color: #5a4be1;
-}
-
-.zhihu:hover {
- color: #0066ff;
-}
-
-.github:hover {
- color: #c9510c;
-}
-
-.youtube:hover {
- color: #ff0000;
-}
-
-.linkedin:hover {
- color: #0077b5;
-}
-
-.newsletter:hover {
- color: #777777;
-}
-
.comments {
width: 100%;
margin-top: 2em;
diff --git a/package.json b/package.json
index 11c066255e..f59569ad5a 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
"@fisch0920/use-dark-mode": "^2.4.0",
"@keyvhq/core": "^1.6.9",
"@keyvhq/redis": "^1.6.10",
- "@react-icons/all-files": "^4.1.0",
+ "react-icons": "^5.3.0",
"@vercel/og": "^0.6.3",
"classnames": "^2.5.1",
"date-fns": "^2.30.0",
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 28cc023758..1b0f437ce3 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,5 +1,5 @@
-import { IconContext } from '@react-icons/all-files'
import Document, { Head, Html, Main, NextScript } from 'next/document'
+import { IconContext } from 'react-icons'
export default class MyDocument extends Document {
render() {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5f3290c0f8..5eea58c91e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,9 +17,6 @@ importers:
'@keyvhq/redis':
specifier: ^1.6.10
version: 1.6.28
- '@react-icons/all-files':
- specifier: ^4.1.0
- version: 4.1.0(react@18.3.1)
'@vercel/og':
specifier: ^0.6.3
version: 0.6.3
@@ -74,6 +71,9 @@ importers:
react-dom:
specifier: ^18.2.0
version: 18.3.1(react@18.3.1)
+ react-icons:
+ specifier: ^5.3.0
+ version: 5.3.0(react@18.3.1)
react-notion-x:
specifier: ^7.0.1
version: 7.0.1(@babel/runtime@7.26.0)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -388,11 +388,6 @@ packages:
'@polka/url@1.0.0-next.28':
resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
- '@react-icons/all-files@4.1.0':
- resolution: {integrity: sha512-hxBI2UOuVaI3O/BhQfhtb4kcGn9ft12RWAFVMUeNjqqhLsHvFtzIkFaptBJpFDANTKoDfdVoHTKZDlwKCACbMQ==}
- peerDependencies:
- react: '*'
-
'@resvg/resvg-wasm@2.4.0':
resolution: {integrity: sha512-C7c51Nn4yTxXFKvgh2txJFNweaVcfUPQxwEUFw4aWsCmfiBDJsTSwviIF8EcwjQ6k8bPyMWCl1vw4BdxE569Cg==}
engines: {node: '>= 10'}
@@ -1929,6 +1924,11 @@ packages:
react: '>=16.8.1'
react-dom: '>=16.8.1'
+ react-icons@5.3.0:
+ resolution: {integrity: sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==}
+ peerDependencies:
+ react: '*'
+
react-image@4.1.0:
resolution: {integrity: sha512-qwPNlelQe9Zy14K2pGWSwoL+vHsAwmJKS6gkotekDgRpcnRuzXNap00GfibD3eEPYu3WCPlyIUUNzcyHOrLHjw==}
peerDependencies:
@@ -2758,10 +2758,6 @@ snapshots:
'@polka/url@1.0.0-next.28': {}
- '@react-icons/all-files@4.1.0(react@18.3.1)':
- dependencies:
- react: 18.3.1
-
'@resvg/resvg-wasm@2.4.0': {}
'@rtsao/scc@1.1.0': {}
@@ -3386,7 +3382,7 @@ snapshots:
debug: 4.3.7
enhanced-resolve: 5.17.1
eslint: 8.57.1
- eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
+ eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)
fast-glob: 3.3.2
get-tsconfig: 4.8.1
is-bun-module: 1.2.1
@@ -3399,7 +3395,7 @@ snapshots:
- eslint-import-resolver-webpack
- supports-color
- eslint-module-utils@2.12.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
+ eslint-module-utils@2.12.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1):
dependencies:
debug: 3.2.7
optionalDependencies:
@@ -3421,7 +3417,7 @@ snapshots:
doctrine: 2.1.0
eslint: 8.57.1
eslint-import-resolver-node: 0.3.9
- eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
+ eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)
hasown: 2.0.2
is-core-module: 2.15.1
is-glob: 4.0.3
@@ -4452,6 +4448,10 @@ snapshots:
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
+ react-icons@5.3.0(react@18.3.1):
+ dependencies:
+ react: 18.3.1
+
react-image@4.1.0(@babel/runtime@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
'@babel/runtime': 7.26.0