From 6ac3d3b7009c1275bb4b07cb85df37105308ef4d Mon Sep 17 00:00:00 2001 From: Onni Hakala Date: Fri, 1 Nov 2024 11:23:12 +0200 Subject: [PATCH 1/2] @react-icons/all-files hasn't been updated in long time. Replace it with react-icons --- components/Footer.tsx | 11 ++--------- components/NotionPageHeader.tsx | 3 +-- components/PageActions.tsx | 4 ++-- package.json | 2 +- pages/_document.tsx | 2 +- pnpm-lock.yaml | 30 +++++++++++++++--------------- 6 files changed, 22 insertions(+), 30 deletions(-) diff --git a/components/Footer.tsx b/components/Footer.tsx index e927b79606..80b5a4d655 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -1,13 +1,6 @@ -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 { FaEnvelopeOpenText, FaGithub, FaLinkedin, FaMastodon, FaTwitter, FaYoutube, FaZhihu, } from 'react-icons/fa' +import { IoMoonSharp, IoSunnyOutline } from 'react-icons/io5' import * as config from '@/lib/config' import { useDarkMode } from '@/lib/use-dark-mode' 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/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 From bd6ae7f89befb6b712e318b4f3fd138b66da6412 Mon Sep 17 00:00:00 2001 From: Onni Hakala Date: Fri, 1 Nov 2024 11:29:11 +0200 Subject: [PATCH 2/2] Run prettier --write to fix the formatting of icons --- components/Footer.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/components/Footer.tsx b/components/Footer.tsx index 80b5a4d655..fe73f21daf 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -1,5 +1,13 @@ import * as React from 'react' -import { FaEnvelopeOpenText, FaGithub, FaLinkedin, FaMastodon, FaTwitter, FaYoutube, FaZhihu, } from 'react-icons/fa' +import { + FaEnvelopeOpenText, + FaGithub, + FaLinkedin, + FaMastodon, + FaTwitter, + FaYoutube, + FaZhihu +} from 'react-icons/fa' import { IoMoonSharp, IoSunnyOutline } from 'react-icons/io5' import * as config from '@/lib/config'