Merge pull request #13970 from TylerAPfledderer/refactor/icons-to-IconBase

[ShadCN] refactor(icons): use react-icons `IconBase` composition

Author: pettinarip

src/components/ExpandableCard.tsx

@@ -12,11 +12,13 @@ import {
   AccordionTrigger,
 } from "../../tailwind/ui/accordion"
 
+import type { IconBaseType } from "./icons/icon-base"
+
 export type ExpandableCardProps = {
   children?: ReactNode
   contentPreview?: ReactNode
   title: ReactNode
-  svg?: React.ElementType
+  svg?: IconBaseType
   eventAction?: string
   eventCategory?: string
   eventName?: string

src/components/FindWallet/WalletFilterFeature.tsx

@@ -182,7 +182,7 @@ const WalletFilterFeature = ({
                           }
                         >
                           <GridItem>
-                            <LabelIcon boxSize={7} mt={0.5} aria-hidden />
+                            <LabelIcon className="mt-0.5 size-7" aria-hidden />
                           </GridItem>
 
                           <GridItem as="span" lineHeight="1.1rem">

src/components/Quiz/QuizWidget/AnswerIcon.tsx

@@ -18,7 +18,7 @@ type AnswerIconProps = {
  */
 export const AnswerIcon = ({ answerStatus }: AnswerIconProps) => {
   const commonProps = {
-    color: "neutral",
+    className: "text-body-inverse",
   }
 
   const IconWrapper = (props: ChildOnlyProp) => {

src/components/Quiz/QuizWidget/QuizConfetti.tsx

@@ -1,23 +1,14 @@
-import * as React from "react"
-import { IconProps } from "@chakra-ui/react"
+import { StarConfettiIcon } from "@/components/icons/quiz/StarConfettiIcon"
 
-import { StarConfettiIcon } from "../../icons/quiz"
+import { cn } from "@/lib/utils/cn"
 
 export const QuizConfetti = () => {
-  const commonProps: IconProps = {
-    fontSize: "184px",
-    position: "absolute",
-    top: 0,
-  }
+  const commonClasses = "h-[119px] absolute top-0"
   return (
     <>
-      <StarConfettiIcon {...commonProps} insetInlineStart={0} />
+      <StarConfettiIcon className={cn(commonClasses, "left-0")} />
 
-      <StarConfettiIcon
-        {...commonProps}
-        insetInlineEnd={0}
-        transform="scaleX(-100%)"
-      />
+      <StarConfettiIcon className={cn(commonClasses, "right-0 -scale-x-100")} />
     </>
   )
 }

src/components/Quiz/QuizzesStats.tsx

@@ -117,7 +117,7 @@ const QuizzesStats = ({
                 justify={{ base: "center", lg: "flex-start" }}
               >
                 <Circle size="64px" bg="primary.base">
-                  <TrophyIcon color="neutral" w="35.62px" h="35.62px" />
+                  <TrophyIcon className="w-[35.62px] text-body-inverse" />
                 </Circle>
                 <Text as="span" fontWeight="bold" fontSize="5xl">
                   <Highlight

src/components/Staking/StakingComparison.tsx

@@ -46,7 +46,9 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => {
       eventName: "clicked solo staking",
     },
     color: stakingGold,
-    glyph: <StakingGlyphCPUIcon color="stakingGold" boxSize="50px" />,
+    glyph: (
+      <StakingGlyphCPUIcon className="h-[50px] w-[50px]" color="stakingGold" />
+    ),
   }
   const saas: DataType = {
     title: "page-staking-saas-with-abbrev",
@@ -58,7 +60,12 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => {
       eventName: "clicked staking as a service",
     },
     color: stakingGreen,
-    glyph: <StakingGlyphCloudIcon color="stakingGreen" w="50px" h="28px" />,
+    glyph: (
+      <StakingGlyphCloudIcon
+        className="h-[28px] w-[50px]"
+        color="stakingGreen"
+      />
+    ),
   }
   const pools: DataType = {
     title: "page-staking-dropdown-pools",
@@ -71,7 +78,10 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => {
     },
     color: stakingBlue,
     glyph: (
-      <StakingGlyphTokenWalletIcon color="stakingBlue" w="50px" h="39px" />
+      <StakingGlyphTokenWalletIcon
+        className="h-[39px] w-[50px]"
+        color="stakingBlue"
+      />
     ),
   }
   const data: {

src/components/icons/Icons.stories.tsx

@@ -8,6 +8,7 @@ import { HighlightDarkIcon } from "./HighlightDarkIcon"
 import { HighlightIcon } from "./HighlightIcon"
 import {
   CorrectIcon,
+  GreenTickIcon,
   IncorrectIcon,
   StarConfettiIcon,
   TrophyIcon,
@@ -31,15 +32,20 @@ import {
   AuditedIcon,
   AvadoGlyphIcon,
   BattleTestedIcon,
+  BedrockGlyphIcon,
   BugBountyIcon,
   CautionProductGlyphIcon,
+  ChainLaboGlyphIcon,
+  ConsensysStakingGlyphIcon,
   DefaultOpenSourceGlyphIcon,
   DockerGlyphIcon,
   EconomicalIcon,
   EthpoolGlyphIcon,
+  EverstakeGlyphIcon,
   FigmentGlyphIcon,
   GreenCheckProductGlyphIcon,
   KilnGlyphIcon,
+  LaunchnodesGlyphIcon,
   LidoGlyphIcon,
   LiquidityTokenIcon,
   MultiClientIcon,
@@ -49,6 +55,8 @@ import {
   RocketPoolGlyphIcon,
   RockXGlyphIcon,
   SelfCustodyIcon,
+  SenseiNodeGlyphIcon,
+  SquidGlyphIcon,
   StafiGlyphIcon,
   StakefishGlyphIcon,
   StakewiseGlyphIcon,
@@ -98,6 +106,7 @@ export default meta
 const iconsDefinitions = [
   CorrectIcon,
   IncorrectIcon,
+  GreenTickIcon,
   StarConfettiIcon,
   TrophyIcon,
   DappnodeIcon,
@@ -116,17 +125,22 @@ const iconsDefinitions = [
   AuditedIcon,
   AvadoGlyphIcon,
   BattleTestedIcon,
+  BedrockGlyphIcon,
   BugBountyIcon,
   CautionProductGlyphIcon,
+  ChainLaboGlyphIcon,
+  ConsensysStakingGlyphIcon,
   StakingDappnodeGlyphIcon,
   DefaultOpenSourceGlyphIcon,
   DockerGlyphIcon,
   EconomicalIcon,
   EthpoolGlyphIcon,
+  EverstakeGlyphIcon,
   FigmentGlyphIcon,
   GreenCheckProductGlyphIcon,
   P2PGlyphIcon,
   KilnGlyphIcon,
+  LaunchnodesGlyphIcon,
   LidoGlyphIcon,
   LiquidityTokenIcon,
   MultiClientIcon,
@@ -135,6 +149,7 @@ const iconsDefinitions = [
   RocketPoolGlyphIcon,
   RockXGlyphIcon,
   SelfCustodyIcon,
+  SenseiNodeGlyphIcon,
   StafiGlyphIcon,
   StakefishGlyphIcon,
   StakewiseGlyphIcon,
@@ -144,6 +159,7 @@ const iconsDefinitions = [
   StakingGlyphEtherCircleIcon,
   StakingGlyphTokenWalletIcon,
   StereumGlyphIcon,
+  SquidGlyphIcon,
   TrustlessIcon,
   UnknownProductGlyphIcon,
   WagyuGlyphIcon,
@@ -178,9 +194,9 @@ const iconsDefinitions = [
 iconsDefinitions.sort((a, b) =>
   (a?.displayName || "") > (b?.displayName || "") ? 1 : -1
 )
-const items = iconsDefinitions.map((IconDef) => (
+const items = iconsDefinitions.map((IconDef, idx) => (
   <Flex
-    key={IconDef.displayName}
+    key={idx}
     direction="column"
     gap={4}
     p={4}
@@ -189,7 +205,12 @@ const items = iconsDefinitions.map((IconDef) => (
     borderColor="background.highlight"
   >
     <Center>
-      <IconDef w="50px" h="50px" />
+      <IconDef
+        className="h-[50px] w-[50px]"
+        // TODO: remove the following two props when migrations are complete
+        w="50px"
+        h="50px"
+      />
     </Center>
     <Center>{IconDef.displayName}</Center>
   </Flex>

src/components/icons/icon-base.tsx

@@ -0,0 +1,43 @@
+import { IconBase as ReactIconBase, type IconBaseProps } from "react-icons"
+
+import { cn } from "@/lib/utils/cn"
+
+/**
+ * Wrapper to generate an icon component, using the react-icons `IconBase` component.
+ * Requires setting `displayName` and `children` props.
+ *
+ * **NOTE:** Setting SVG attributes in the `options` object become default values, which are overriden when passing props on render.
+ */
+export const createIconBase = (
+  options: IconBaseProps & {
+    displayName: string
+  }
+) => {
+  const {
+    children,
+    displayName,
+    className: defaultClassName,
+    ...defaultProps
+  } = options
+
+  const Comp = ({ className, ...props }: IconBaseProps) => {
+    return (
+      <ReactIconBase
+        className={cn(defaultClassName, className)}
+        // Remove default props that come from `ReactIconBase` with `undefined`
+        strokeWidth={undefined}
+        stroke={undefined}
+        {...defaultProps}
+        {...props}
+      >
+        {children}
+      </ReactIconBase>
+    )
+  }
+
+  Comp.displayName = displayName
+
+  return Comp
+}
+
+export type IconBaseType = ReturnType<typeof createIconBase>

src/components/icons/quiz/CorrectIcon.tsx

@@ -1,11 +1,10 @@
-import { createIcon } from "@chakra-ui/react"
+import { createIconBase } from "../icon-base"
 
-export const CorrectIcon = createIcon({
+export const CorrectIcon = createIconBase({
   displayName: "CorrectIcon",
   viewBox: "0 0 20 16",
-  defaultProps: {
-    width: "20px",
-    height: "16px",
-  },
-  d: "M8 16L0 9.05375L2.75437 7.06313L7.49875 11.4325L16.8531 0L20 2L8 16Z",
+  className: "h-auto w-[20px]",
+  children: (
+    <path d="M8 16L0 9.05375L2.75437 7.06313L7.49875 11.4325L16.8531 0L20 2L8 16Z" />
+  ),
 })

src/components/icons/quiz/GreenTickIcon.tsx

@@ -1,10 +1,11 @@
 import * as React from "react"
-import { createIcon } from "@chakra-ui/react"
 
-export const GreenTickIcon = createIcon({
+import { createIconBase } from "../icon-base"
+
+export const GreenTickIcon = createIconBase({
   displayName: "GreenTickIcon",
   viewBox: "0 0 16 16",
-  path: (
+  children: (
     <g>
       <rect width={16} height={16} fill="#c8f7d8" rx={8} />
       <path