Switch to Lucide icons

Author: couvq

apps/flourish-rapid/src/components/ThemeToggle/index.tsx

@@ -14,7 +14,6 @@ const ThemeToggle = () => {
   )
 
   const toggleTheme = () => {
-    // theme === Theme.LIGHT ? setTheme(Theme.DARK) : setTheme(Theme.LIGHT)
     if (theme === Theme.LIGHT) {
       setTheme(Theme.DARK)
       localStorage.setItem('theme', Theme.DARK)

package-lock.json

@@ -36,6 +36,7 @@
     "flourish-release": "npm version patch"
   },
   "dependencies": {
+    "lucide-react": "^0.536.0",
     "react-aria-components": "^1.4.0"
   },
   "devDependencies": {

packages/flourish-ui/package.json

@@ -1,18 +1,18 @@
-import { faXmark } from '@fortawesome/free-solid-svg-icons'
 import '@testing-library/jest-dom'
-import { render, screen, fireEvent, createEvent } from '@testing-library/react'
+import { createEvent, fireEvent, render, screen } from '@testing-library/react'
+import { X } from 'lucide-react'
 import React from 'react'
-import IconBtn, { getFontawesomeIconForIconType } from '..'
+import IconBtn, { getLucidIconComponent } from '..'
 
 describe('<IconBtn />', () => {
   it('renders without error', () => {
     const wrapper = render(<IconBtn label="close the modal" />)
     expect(wrapper).not.toBeNull()
   })
 
-  it('getFontawesomeIconForIconType function works', () => {
-    const resultWithCloseInput = getFontawesomeIconForIconType('close')
-    expect(resultWithCloseInput).toEqual(faXmark)
+  it('getLucidIconComponent function works', () => {
+    const resultWithCloseInput = getLucidIconComponent('close')
+    expect(resultWithCloseInput).toEqual(<X />)
   })
 
   it('should fire click event provided to onClick prop when icon button is clicked', () => {

packages/flourish-ui/src/components/Button/variants/IconBtn/__tests__/IconBtn.test.tsx

@@ -1,13 +1,5 @@
-import {
-  faXmark,
-  faBars,
-  faLightbulb,
-  faSun,
-  IconDefinition,
-  faMoon
-} from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import React from 'react'
+import { X, Menu, Lightbulb, Sun, Moon } from 'lucide-react'
+import React, { ReactNode } from 'react'
 import { CommonButtonProps } from '../..'
 import {
   classMerge,
@@ -38,22 +30,22 @@ interface IconBtnProps {
   label: string
 }
 
-export const getFontawesomeIconForIconType = (
+export const getLucidIconComponent = (
   iconType: IconBtnProps['icon']
-): IconDefinition => {
+): ReactNode => {
   switch (iconType) {
     case 'close':
-      return faXmark
+      return <X />
     case 'bars':
-      return faBars
+      return <Menu />
     case 'light bulb':
-      return faLightbulb
+      return <Lightbulb />
     case 'sun':
-      return faSun
+      return <Sun />
     case 'moon':
-      return faMoon
+      return <Moon />
     default:
-      return faXmark
+      return <X />
   }
 }
 
@@ -66,6 +58,7 @@ const IconBtn = ({
   style,
   'data-testId': testId
 }: CommonButtonProps & IconBtnProps) => {
+  const lucidIconComponent = getLucidIconComponent(icon)
   return (
     <button
       className={classMerge('f-button', 'f-button-icon', className)}
@@ -81,7 +74,7 @@ const IconBtn = ({
       aria-label={label}
       disabled={disabled}
     >
-      <FontAwesomeIcon icon={getFontawesomeIconForIconType(icon)} />
+      {lucidIconComponent}
     </button>
   )
 }

packages/flourish-ui/src/components/Button/variants/IconBtn/index.tsx

@@ -5,11 +5,14 @@ a {
   font:
     calc($f-typography-fs-p * 1px) $f-typography-font-secondary,
     serif;
+    display: flex;
+    align-items: center;
 }
 
 .#{$prefix}icon-external {
     color: $f-color-secondary-light;
     margin-left: toRem($f-spacing-3);
+    margin-top: toRem($f-spacing-3);
 }
 
 .#{$prefix}dark-mode {

packages/flourish-ui/src/components/Link/Link.scss

@@ -1,5 +1,4 @@
-import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { ExternalLink } from 'lucide-react'
 import React, { ReactNode } from 'react'
 import { Customizable, Testable } from '../../common-props'
 import { classMerge } from '../../utils'
@@ -37,7 +36,7 @@ export const Link = ({
     >
       {children}
       <span className="f-icon-external">
-        <FontAwesomeIcon icon={faUpRightFromSquare} />
+        <ExternalLink width={20} height={20} />
       </span>
     </a>
   ) : (

packages/flourish-ui/src/components/Link/index.tsx

@@ -1,5 +1,4 @@
-import { faCaretDown } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { ChevronDown } from 'lucide-react'
 import React, {
   FocusEvent,
   KeyboardEvent,
@@ -177,10 +176,9 @@ export const Select = ({
           }}
         >
           {value}
-          <FontAwesomeIcon
+          <ChevronDown
             data-testid={`${testId}-caret`}
             className="f-select-caret"
-            icon={faCaretDown}
           />
         </button>
         <div