Use lucide for all site icons

client/src/components/Autocomplete.tsx

@@ -1,6 +1,6 @@
 import { Combobox, Transition } from '@headlessui/react';
+import { ChevronDown } from 'lucide-react';
 import { useState } from 'react';
-import { ChevronDown } from 'react-feather';
 import { twMerge } from 'tailwind-merge';
 
 type AutocompleteProps<T extends string> = {

client/src/components/CourseAverages.tsx

@@ -1,7 +1,7 @@
 import { produce } from 'immer';
 import _ from 'lodash';
+import { ChevronDown } from 'lucide-react';
 import { Fragment, useEffect, useState } from 'react';
-import { ChevronDown } from 'react-feather';
 import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';
 import { Link } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';

client/src/components/CourseInfo.tsx

@@ -1,6 +1,5 @@
+import { Bell, BellOff, ExternalLink } from 'lucide-react';
 import { useEffect, useState } from 'react';
-import { ExternalLink } from 'react-feather';
-import { VscBell, VscBellSlash } from 'react-icons/vsc';
 import { toast } from 'sonner';
 
 import { useAuth } from '../hooks/useAuth';
@@ -72,16 +71,16 @@ export const CourseInfo = ({ course, allReviews }: CourseInfoProps) => {
           <div className='flex items-center gap-2'>
             {user &&
               (isSubscribed ? (
-                <VscBellSlash
+                <BellOff
                   size={20}
                   onClick={unsubscribe}
-                  className='my-auto ml-1 cursor-pointer stroke-[0.5] transition-colors duration-300 hover:stroke-red-600 dark:text-gray-200'
+                  className='my-auto ml-1 cursor-pointer transition-colors duration-300 hover:stroke-red-600 dark:text-gray-200'
                 />
               ) : (
-                <VscBell
+                <Bell
                   size={20}
                   onClick={subscribe}
-                  className='my-auto ml-1 cursor-pointer stroke-[0.5] transition-colors duration-300 hover:stroke-red-600 dark:text-gray-200'
+                  className='my-auto ml-1 cursor-pointer transition-colors duration-300 hover:stroke-red-600 dark:text-gray-200'
                 />
               ))}
             {course.url ? (

client/src/components/CourseReview.tsx

@@ -1,8 +1,8 @@
 import { Transition } from '@headlessui/react';
 import { format } from 'date-fns';
+import { Edit, Tag } from 'lucide-react';
+import { Pin } from 'lucide-react';
 import { Fragment, useEffect, useState } from 'react';
-import { Edit, Tag } from 'react-feather';
-import { BsPinFill } from 'react-icons/bs';
 import { LuFlame, LuThumbsDown, LuThumbsUp } from 'react-icons/lu';
 import { Link } from 'react-router-dom';
 import { toast } from 'sonner';
@@ -233,7 +233,12 @@ export const CourseReview = ({
                   <Tag className='ml-2 mt-1 w-4 text-red-600' />
                 </Tooltip>
               )}
-              {canModify && <BsPinFill className='ml-2 mt-2 text-red-600' />}
+              {canModify && (
+                <Pin
+                  size={15}
+                  className='ml-2 mt-2 fill-rose-600 text-red-600'
+                />
+              )}
               <div className='grow' />
               <div className='flex w-64 flex-col items-end rounded-lg p-2'>
                 <div className='flex items-center gap-x-2'>

client/src/components/CourseSearchBar.tsx

@@ -1,5 +1,5 @@
+import { Layers, Telescope, User } from 'lucide-react';
 import { useState } from 'react';
-import { Layers, User } from 'react-feather';
 import { Link, useNavigate } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 
@@ -84,7 +84,7 @@ const ExploreButton = () => {
           isHovering ? highlightResultStyle : 'bg-gray-100 dark:bg-neutral-800'
         )}
       >
-        <Layers className='dark:text-gray-200' />
+        <Telescope className='dark:text-gray-200' />
         <div className='z-50 ml-2 dark:text-gray-200'>Explore all courses</div>
       </div>
     </Link>

client/src/components/CourseTerms.tsx

@@ -1,9 +1,7 @@
 import { produce } from 'immer';
+import { ChevronDown } from 'lucide-react';
+import { Leaf, Snowflake, Sun, X } from 'lucide-react';
 import { useEffect, useState } from 'react';
-import { ChevronDown } from 'react-feather';
-import { BsSun } from 'react-icons/bs';
-import { FaLeaf, FaRegSnowflake } from 'react-icons/fa';
-import { GoX } from 'react-icons/go';
 import { Link } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 
@@ -30,10 +28,11 @@ const SeasonIcon = ({ variant, term }: SeasonIconProps) => {
   const season = term.split(' ')[0].toLowerCase();
 
   const icons: Record<string, JSX.Element> = {
-    fall: <FaLeaf size={size} color='brown' />,
-    winter: <FaRegSnowflake size={size} color='skyblue' />,
-    summer: <BsSun size={size} color='orange' />,
+    fall: <Leaf size={size} color='brown' />,
+    winter: <Snowflake size={size} color='skyblue' />,
+    summer: <Sun size={size} color='orange' />,
   };
+
   const icon = icons[season];
 
   if (variant === 'large') {
@@ -86,9 +85,9 @@ export const CourseTerms = ({ course, variant, query }: CourseTermsProps) => {
       <div className='my-1.5 w-fit text-sm'>
         <div className='rounded-xl bg-gray-200 p-1 dark:bg-neutral-700'>
           <div className='flex items-center space-x-1'>
-            <GoX
+            <X
               size={variantToSize(variant)}
-              className='fill-gray-700 dark:fill-gray-200'
+              className='text-gray-700 dark:text-gray-200'
             />
             <div className='pr-1 font-medium text-gray-800 dark:text-gray-200'>
               Not Offered

client/src/components/DarkModeToggle.tsx

@@ -1,4 +1,4 @@
-import { MoonIcon, SunIcon } from '@heroicons/react/24/outline';
+import { Moon, Sun } from 'lucide-react';
 
 import { useDarkMode } from '../hooks/useDarkMode';
 
@@ -15,9 +15,9 @@ export const DarkModeToggle = () => {
       className='rounded-2xl p-1 hover:bg-gray-50 dark:hover:bg-neutral-700'
     >
       {darkMode ? (
-        <SunIcon className='size-6 fill-gray-400 stroke-gray-400 stroke-2' />
+        <Sun className='size-6 fill-gray-400 stroke-gray-400 stroke-2' />
       ) : (
-        <MoonIcon className='size-6 stroke-neutral-500 stroke-2' />
+        <Moon className='size-6 stroke-neutral-500 stroke-2' />
       )}
     </button>
   );

client/src/components/DeleteButton.tsx

@@ -1,6 +1,6 @@
 import { Dialog, Transition } from '@headlessui/react';
+import { Trash2 } from 'lucide-react';
 import { Fragment, useState } from 'react';
-import { Trash2 } from 'react-feather';
 import { twMerge } from 'tailwind-merge';
 
 import { useDarkMode } from '../hooks/useDarkMode';

client/src/components/ExploreFilter.tsx

@@ -1,6 +1,5 @@
+import { Leaf, Snowflake, Sun } from 'lucide-react';
 import { useState } from 'react';
-import { BsSun } from 'react-icons/bs';
-import { FaLeaf, FaRegSnowflake } from 'react-icons/fa';
 import { twMerge } from 'tailwind-merge';
 
 import courseCodes from '../assets/courseCodes.json';
@@ -97,11 +96,11 @@ export const ExploreFilter = ({ variant }: ExploreFilterProp) => {
   const termToIcon = (term: CourseTerm) => {
     switch (term) {
       case 'Fall':
-        return <FaLeaf color='brown' />;
+        return <Leaf size={15} color='brown' />;
       case 'Winter':
-        return <FaRegSnowflake color='skyblue' />;
+        return <Snowflake size={15} color='skyblue' />;
       case 'Summer':
-        return <BsSun color='orange' />;
+        return <Sun size={15} color='orange' />;
     }
   };
 

client/src/components/MultiSelect.tsx

@@ -1,6 +1,6 @@
 import { Combobox, Transition } from '@headlessui/react';
+import { Check, ChevronDown, X } from 'lucide-react';
 import { useState } from 'react';
-import { Check, ChevronDown, X } from 'react-feather';
 import { twMerge } from 'tailwind-merge';
 
 type MultiSelectProps = {

client/src/components/NotificationDropdown.tsx

@@ -1,8 +1,8 @@
 import { Menu, Transition } from '@headlessui/react';
+import { Bell } from 'lucide-react';
 import React, { Fragment, useEffect, useState } from 'react';
 import { FaTrash } from 'react-icons/fa';
 import { GoDotFill } from 'react-icons/go';
-import { VscBell } from 'react-icons/vsc';
 import { Link } from 'react-router-dom';
 import { toast } from 'sonner';
 
@@ -105,8 +105,8 @@ export const NotificationDropdown = ({
               <div>
                 <Menu.Button className='m-2 inline-flex justify-center text-sm font-medium text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white'>
                   <div className='relative'>
-                    <VscBell
-                      className='-mr-1 ml-2 size-5 stroke-[0.5] text-neutral-500 dark:text-gray-400'
+                    <Bell
+                      className='-mr-1 ml-2 size-5 text-neutral-500 dark:text-gray-400'
                       aria-hidden='true'
                     />
                     {notifications.filter((notification) => !notification.seen)

client/src/components/ProfileDropdown.tsx

@@ -1,6 +1,6 @@
 import { Menu, Transition } from '@headlessui/react';
+import { ChevronRight, User } from 'lucide-react';
 import { Fragment } from 'react';
-import { ChevronRight, User } from 'react-feather';
 import { Link } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 

client/src/components/ResetButton.tsx

@@ -1,4 +1,4 @@
-import { RefreshCw } from 'react-feather';
+import { RefreshCw } from 'lucide-react';
 import { twMerge } from 'tailwind-merge';
 
 type ResetButtonProps = {

client/src/components/SearchBar.tsx

@@ -1,4 +1,4 @@
-import { Search } from 'react-feather';
+import { Search } from 'lucide-react';
 import { twMerge } from 'tailwind-merge';
 
 export const SearchBar = ({

client/src/pages/About.tsx

@@ -1,11 +1,9 @@
 import { Disclosure } from '@headlessui/react';
 import { AnimatePresence, motion } from 'framer-motion';
+import { ChevronDown, Github, Mail } from 'lucide-react';
 import React from 'react';
 import { Helmet } from 'react-helmet-async';
-import { AiOutlineGithub } from 'react-icons/ai';
 import { FaDiscord } from 'react-icons/fa';
-import { FiMail } from 'react-icons/fi';
-import { IoIosArrowDown } from 'react-icons/io';
 import { Link } from 'react-router-dom';
 
 import { Layout } from '../components/Layout';
@@ -33,7 +31,7 @@ const Questions = ({ input }: QuestionsProps) => {
                   animate={{ rotate: open ? 180 : 0 }}
                   transition={{ duration: 0.3 }}
                 >
-                  <IoIosArrowDown className='size-5 text-gray-900 dark:text-gray-300' />
+                  <ChevronDown className='size-5 text-gray-900 dark:text-gray-300' />
                 </motion.div>
               </Disclosure.Button>
               <AnimatePresence initial={false}>
@@ -328,7 +326,7 @@ export const About = () => {
           >
             {[
               {
-                icon: AiOutlineGithub,
+                icon: Github,
                 href: 'https://www.github.com/terror/mcgill.courses',
                 label: 'GitHub',
               },
@@ -338,7 +336,7 @@ export const About = () => {
                 label: 'Discord',
               },
               {
-                icon: FiMail,
+                icon: Mail,
                 href: 'mailto:[email protected]',
                 label: 'Email',
               },

client/src/pages/Instructor.tsx

@@ -1,6 +1,6 @@
 import _ from 'lodash';
+import { ExternalLink } from 'lucide-react';
 import { Fragment, useEffect, useState } from 'react';
-import { ExternalLink } from 'react-feather';
 import { Helmet } from 'react-helmet-async';
 import { Link, useParams } from 'react-router-dom';
 import { toast } from 'sonner';

client/src/pages/Profile.tsx

@@ -1,9 +1,7 @@
 import { Tab } from '@headlessui/react';
+import { Bell, FileText, User } from 'lucide-react';
 import { useEffect, useState } from 'react';
-import { User } from 'react-feather';
 import { Helmet } from 'react-helmet-async';
-import { LuFileText } from 'react-icons/lu';
-import { VscBell } from 'react-icons/vsc';
 import { Link } from 'react-router-dom';
 import { toast } from 'sonner';
 import { twMerge } from 'tailwind-merge';
@@ -106,7 +104,7 @@ export const Profile = () => {
                 Your Profile
               </h1>
               <div className='flex items-center gap-x-1'>
-                <LuFileText
+                <FileText
                   className='text-neutral-500 dark:text-gray-400'
                   aria-hidden='true'
                   size={20}
@@ -117,8 +115,8 @@ export const Profile = () => {
                 </p>
               </div>
               <div className='flex items-center gap-x-1'>
-                <VscBell
-                  className='stroke-[0.2] text-neutral-500 dark:text-gray-400'
+                <Bell
+                  className='text-neutral-500 dark:text-gray-400'
                   aria-hidden='true'
                   size={20}
                 />
@@ -188,7 +186,7 @@ export const Profile = () => {
                   })
                 ) : (
                   <div className='flex w-full items-center justify-center gap-x-2'>
-                    <LuFileText
+                    <FileText
                       className='stroke-[1.25] text-gray-400 dark:text-gray-600'
                       size={40}
                     />
@@ -229,7 +227,7 @@ export const Profile = () => {
                   ))
                 ) : (
                   <div className='flex w-full items-center justify-center gap-x-1'>
-                    <VscBell
+                    <Bell
                       className='text-gray-400 dark:text-gray-600'
                       aria-hidden='true'
                       size={32}

package.json

@@ -29,10 +29,10 @@
     "framer-motion": "^11.11.9",
     "immer": "^10.1.1",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.469.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
-    "react-feather": "^2.0.10",
     "react-helmet-async": "^2.0.5",
     "react-icons": "^4.12.0",
     "react-infinite-scroll-component": "^6.1.0",