Merge pull request #15680 from ethereum/lucide

feat: migrate to Lucide icons

Author: pettinarip

.eslintrc.json

@@ -24,7 +24,7 @@
             "^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)"
           ],
           // Packages. `react` related packages come first.
-          // Also, put `react-icons` in sorting order not with `react`
+          // Also, put `react-*` in sorting order not with `react`
           ["^react(?!-.)$", "^\\w", "^@\\w"],
           // From the `types` directory.
           ["^@/lib/types", "^@/lib/interfaces"],

CLAUDE.md

@@ -179,7 +179,7 @@ pnpm events-import         # Import community events
 - `@radix-ui/*` - Accessible component primitives
 - `tailwind-variants` - Component variant patterns
 - `framer-motion` - Animation library
-- `react-icons` - Icon library
+- `lucide-react` - Icon library
 
 ### Content & Data
 

app/[locale]/10years/_components/Stories.tsx

@@ -1,8 +1,8 @@
 "use client"
 
 import { useState } from "react"
-import { FaXTwitter } from "react-icons/fa6"
 
+import Twitter from "@/components/icons/twitter.svg"
 import { Button, ButtonLink } from "@/components/ui/buttons/Button"
 
 import { cn } from "@/lib/utils/cn"
@@ -96,7 +96,7 @@ const Stories = ({ stories }: StoriesProps) => {
                             hideArrow
                             className="text-sm"
                           >
-                            <FaXTwitter className="h-5 w-5 text-body" />
+                            <Twitter className="text-xl text-body" />
                           </ButtonLink>
                         </div>
                       )}
@@ -175,7 +175,7 @@ const Stories = ({ stories }: StoriesProps) => {
                             hideArrow
                             className="text-sm"
                           >
-                            <FaXTwitter className="h-5 w-5 text-body" />
+                            <Twitter className="h-5 w-5 text-body" />
                           </ButtonLink>
                         </div>
                       )}

app/[locale]/10years/page.tsx

@@ -348,7 +348,7 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
             />
             <h3>{t("page-10-year-ideas-title")}</h3>
             <p>{t("page-10-year-ideas-description")}</p>
-            <ButtonLink href="mailto:[email protected]" hideArrow>
+            <ButtonLink href="mailto:[email protected]">
               {t("page-10-year-ideas-cta")}
             </ButtonLink>
           </div>

app/[locale]/developers/tutorials/_components/modal.tsx

@@ -1,8 +1,8 @@
 "use client"
 
 import React, { useState } from "react"
-import { FaGithub } from "react-icons/fa"
 
+import Github from "@/components/icons/github.svg"
 import Translation from "@/components/Translation"
 import { Button } from "@/components/ui/buttons/Button"
 import { ButtonLink } from "@/components/ui/buttons/Button"
@@ -46,7 +46,7 @@ const TutorialSubmitModal = ({
               variant="outline"
               href="https://github.com/ethereum/ethereum-org-website/issues/new?assignees=&labels=Type%3A+Feature&template=suggest_tutorial.yaml&title="
             >
-              <FaGithub />
+              <Github />
               <Translation id="page-developers-tutorials:page-tutorial-raise-issue-btn" />
             </ButtonLink>
           </Flex>

app/[locale]/enterprise/page.tsx

@@ -1,11 +1,11 @@
+import { Check } from "lucide-react"
 import dynamic from "next/dynamic"
 import { getTranslations } from "next-intl/server"
 
 import type { Lang, StatsBoxMetric } from "@/lib/types"
 
 import ActivityStats from "@/components/ActivityStats"
 import { HubHero } from "@/components/Hero"
-import Checkmark from "@/components/icons/checkmark.svg"
 import Adidas from "@/components/icons/enterprise/adidas.svg"
 import Azure from "@/components/icons/enterprise/azure.svg"
 import BancoSantander from "@/components/icons/enterprise/banco-santander.svg"
@@ -465,7 +465,13 @@ const Page = async ({ params }: { params: { locale: Lang } }) => {
                 key={header}
                 className="grid h-fit grid-cols-[auto,1fr] gap-x-3"
               >
-                <Checkmark className="text-2xl text-success" />
+                <div className="grid size-6 place-items-center rounded-full bg-success/25 text-2xl text-success">
+                  <Check
+                    strokeLinecap="square"
+                    strokeLinejoin="miter"
+                    className="-mb-0.5 size-3.5 stroke-[5]"
+                  />
+                </div>
                 <h3 className="h-fit text-lg font-bold">{header}</h3>
                 <p className="col-start-2 text-body-medium">{content}</p>
               </div>

app/[locale]/page.tsx

@@ -2,8 +2,6 @@ import { Fragment } from "react"
 import dynamic from "next/dynamic"
 import { notFound } from "next/navigation"
 import { getTranslations, setRequestLocale } from "next-intl/server"
-import { FaDiscord, FaGithub } from "react-icons/fa6"
-import { FaXTwitter } from "react-icons/fa6"
 
 import type {
   AllHomepageActivityData,
@@ -26,11 +24,14 @@ import BlockHeap from "@/components/icons/block-heap.svg"
 import BuildAppsIcon from "@/components/icons/build-apps.svg"
 import Calendar from "@/components/icons/calendar.svg"
 import CalendarAdd from "@/components/icons/calendar-add.svg"
+import Discord from "@/components/icons/discord.svg"
 import EthGlyphIcon from "@/components/icons/eth-glyph.svg"
 import EthTokenIcon from "@/components/icons/eth-token.svg"
 import PickWalletIcon from "@/components/icons/eth-wallet.svg"
+import Github from "@/components/icons/github.svg"
 import TryAppsIcon from "@/components/icons/phone-homescreen.svg"
 import RoadmapSign from "@/components/icons/roadmap-sign.svg"
+import Twitter from "@/components/icons/twitter.svg"
 import Whitepaper from "@/components/icons/whitepaper.svg"
 import { Image } from "@/components/Image"
 import CardImage from "@/components/Image/CardImage"
@@ -376,23 +377,23 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
       eventName: "contribute",
     },
     {
-      Svg: FaGithub,
+      Svg: Github,
       label: "GitHub",
       href: GITHUB_REPO_URL,
       className: "text-accent-a hover:text-accent-a-hover",
       description: t("page-index-join-action-github-description"),
       eventName: "GitHub",
     },
     {
-      Svg: FaDiscord,
+      Svg: Discord,
       label: "Discord",
       href: "/discord/",
       className: "text-primary hover:text-primary-hover",
       description: t("page-index-join-action-discord-description"),
       eventName: "Discord",
     },
     {
-      Svg: FaXTwitter,
+      Svg: Twitter,
       label: "X",
       href: "https://x.com/EthDotOrg",
       className: "text-accent-b hover:text-accent-b-hover",
@@ -750,7 +751,7 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
                     eventName: "discord",
                   }}
                 >
-                  <FaDiscord />
+                  <Discord />
                 </ButtonLink>
                 <ButtonLink
                   href={GITHUB_REPO_URL}
@@ -764,7 +765,7 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
                     eventName: "github",
                   }}
                 >
-                  <FaGithub />
+                  <Github />
                 </ButtonLink>
               </div>
             </div>

app/[locale]/quizzes/_components/quizzes.tsx

@@ -1,12 +1,12 @@
 "use client"
 
 import { useMemo, useState } from "react"
-import { FaGithub } from "react-icons/fa"
 
 import { QuizKey, QuizStatus } from "@/lib/types"
 
 import FeedbackCard from "@/components/FeedbackCard"
 import { HubHero } from "@/components/Hero"
+import Github from "@/components/icons/github.svg"
 import MainArticle from "@/components/MainArticle"
 import QuizWidget from "@/components/Quiz/QuizWidget"
 import QuizzesList from "@/components/Quiz/QuizzesList"
@@ -99,7 +99,7 @@ const QuizzesPage = () => {
                 onClick={handleGHAdd}
               >
                 <HStack className="gap-0">
-                  <FaGithub className="me-2 size-6 text-body" />
+                  <Github className="me-2 text-2xl text-body" />
                   {t("add-quiz")}
                 </HStack>
               </ButtonLink>

app/[locale]/resources/page.tsx

@@ -1,10 +1,10 @@
 import { getTranslations } from "next-intl/server"
-import { FaGithub } from "react-icons/fa6"
 
 import { Lang } from "@/lib/types"
 
 import BannerNotification from "@/components/Banners/BannerNotification"
 import { HubHero } from "@/components/Hero"
+import Github from "@/components/icons/github.svg"
 import StackIcon from "@/components/icons/stack.svg"
 import MainArticle from "@/components/MainArticle"
 import Translation from "@/components/Translation"
@@ -187,7 +187,7 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
                     eventName: "Ethereum.org Github Bug Report",
                   }}
                 >
-                  <FaGithub /> {t("page-resources-found-bug")}
+                  <Github /> {t("page-resources-found-bug")}
                 </ButtonLink>
               </div>
             </Stack>

app/[locale]/roadmap/_components/roadmap.tsx

@@ -43,7 +43,7 @@ const RoadmapPage = () => {
   const changesComingItems = [
     {
       title: "Cheaper transactions",
-      icon: <CheaperTransactionsIcon />,
+      icon: <CheaperTransactionsIcon className="h-auto w-12" />,
       description:
         "Rollups are too expensive and rely on centralized components, causing users to place too much trust in their operators. The roadmap includes fixes for both of these problems.",
       button: {
@@ -53,7 +53,7 @@ const RoadmapPage = () => {
     },
     {
       title: "Extra security",
-      icon: <ExtraSecurityIcon />,
+      icon: <ExtraSecurityIcon className="h-auto w-12" />,
       description:
         "Ethereum is already very secure but it can be made even stronger, ready to withstand all kinds of attack far into the future.",
       button: {
@@ -63,7 +63,7 @@ const RoadmapPage = () => {
     },
     {
       title: "Better user experience",
-      icon: <BetterUserExperienceIcon />,
+      icon: <BetterUserExperienceIcon className="h-auto w-12" />,
       description:
         "More support for smart contract wallets and light-weight nodes will make using Ethereum simpler and safer.",
       button: {
@@ -73,7 +73,7 @@ const RoadmapPage = () => {
     },
     {
       title: "Future-proofing",
-      icon: <FutureProofingIcon />,
+      icon: <FutureProofingIcon className="h-auto w-12" />,
       description:
         "Ethereum researchers and developers are solving tomorrow's problems today, readying the network for future generations.",
       button: {
@@ -85,49 +85,49 @@ const RoadmapPage = () => {
 
   const technicalUpgradesItems = [
     {
-      icon: <DankshardingIcon />,
+      icon: <DankshardingIcon className="size-7" />,
       title: "Danksharding",
       description:
         "Danksharding makes L2 rollups much cheaper for users by adding “blobs” of data to Ethereum blocks.",
       href: "/roadmap/danksharding",
     },
     {
-      icon: <SingleSlotFinalityIcon />,
+      icon: <SingleSlotFinalityIcon className="size-7" />,
       title: "Single slot finality",
       description:
         "Instead of waiting for fifteen minutes, blocks could get proposed and finalized in the same slot. This is more convenient for apps and difficult to attack.",
       href: "/roadmap/single-slot-finality",
     },
     {
-      icon: <ProposerBuilderSeparationIcon />,
+      icon: <ProposerBuilderSeparationIcon className="size-7" />,
       title: "Proposer-builder separation",
       description:
         "Splitting the block building and block proposal tasks across separate validators creates a fairer, more censorship resistant and efficient way for Ethereum to come to consensus.",
       href: "/roadmap/pbs",
     },
     {
-      icon: <SecretLeaderElectionIcon />,
+      icon: <SecretLeaderElectionIcon className="size-7" />,
       title: "Secret leader election",
       description:
         "Clever cryptography can be used to ensure that the identity of the current block proposer is not made public, protecting them from certain types of attack.",
       href: "/roadmap/secret-leader-election",
     },
     {
-      icon: <AccountAbstractionIcon />,
+      icon: <AccountAbstractionIcon className="size-7" />,
       title: "Account abstraction",
       description:
         "Account abstraction is a class of upgrades that support smart contract wallets natively on Ethereum, rather than having to use complex middleware.",
       href: "/roadmap/account-abstraction",
     },
     {
-      icon: <VerkleTreesIcon />,
+      icon: <VerkleTreesIcon className="size-7" />,
       title: "Verkle trees",
       description:
         "Verkle trees are a data structure that can be used to enable stateless clients on Ethereum. These clients will require a small amount of storage space but will still be able to verify new blocks.",
       href: "/roadmap/verkle-trees",
     },
     {
-      icon: <StatelessnessIcon />,
+      icon: <StatelessnessIcon className="size-7" />,
       title: "Statelessness",
       description:
         "Stateless clients will be able to verify new blocks without having to store large amounts of data. This will provide all the benefits of running a node with only a tiny fraction of today’s costs.",