migrate all icon to lucide

website/src/components/CallToAction.tsx

@@ -2,9 +2,9 @@ import { Box, Link, Text, useColorMode } from "@chakra-ui/react";
 import { Github } from "lucide-react";
 import { useTranslation } from "next-i18next";
 import { useId } from "react";
-import { FaDiscord } from "react-icons/fa";
 
 import { Container } from "./Container";
+import { Discord } from "./Icons/Discord";
 
 const CIRCLE_HEIGHT = 558;
 const CIRCLE_WIDTH = 558;
@@ -71,7 +71,7 @@ export function CallToAction() {
                 type="button"
                 className="mb-2 ml-6 flex items-center rounded-md border border-transparent bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
               >
-                <FaDiscord size={25} />
+                <Discord size={25} />
                 <Text as="span" className="text-lg ml-3">
                   {t("discord")}
                 </Text>

website/src/components/DataTable.tsx

@@ -25,8 +25,8 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { Filter } from "lucide-react";
 import { ChangeEvent, ReactNode } from "react";
-import { FaFilter } from "react-icons/fa";
 import { useDebouncedCallback } from "use-debounce";
 
 export type DataTableColumnDef<T> = ColumnDef<T> & {
@@ -148,7 +148,7 @@ const FilterModal = ({
     <Popover isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
       <PopoverTrigger>
         <Button variant={"unstyled"} ml="2">
-          <FaFilter></FaFilter>
+          <Filter size="1em"></Filter>
         </Button>
       </PopoverTrigger>
       <PopoverContent w="fit-content">

website/src/components/FlaggableElement.tsx

@@ -22,8 +22,8 @@ import {
 } from "@chakra-ui/react";
 import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import clsx from "clsx";
+import { AlertCircle } from "lucide-react";
 import { useEffect, useReducer } from "react";
-import { FiAlertCircle } from "react-icons/fi";
 import { get, post } from "src/lib/api";
 import { colors } from "src/styles/Theme/colors";
 import { Message } from "src/types/Conversation";
@@ -154,7 +154,7 @@ export const FlaggableElement = (props: FlaggableElementProps) => {
           <Box>
             <PopoverTrigger>
               <Box as="button" display="flex" alignItems="center" justifyContent="center" borderRadius="full" p="1">
-                <FiAlertCircle size="20" className="text-red-400" aria-hidden="true" />
+                <AlertCircle size="20" className="text-red-400" aria-hidden="true" />
               </Box>
             </PopoverTrigger>
           </Box>

website/src/components/Icons/Discord.tsx

@@ -0,0 +1,16 @@
+import { LucideIcon } from "lucide-react";
+
+export const Discord: LucideIcon = ({ size = 24, ...rest }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 127.14 96.36"
+      fill="currentColor"
+      height={size}
+      width={size}
+      {...rest}
+    >
+      <path d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z" />
+    </svg>
+  );
+};

website/src/components/UserTable.tsx

@@ -1,8 +1,8 @@
 import { IconButton } from "@chakra-ui/react";
 import { createColumnHelper } from "@tanstack/react-table";
+import { Pencil } from "lucide-react";
 import Link from "next/link";
 import { memo, useState } from "react";
-import { FaPen } from "react-icons/fa";
 import { get } from "src/lib/api";
 import { FetchUsersResponse } from "src/lib/oasst_api_client";
 import type { User } from "src/types/Users";
@@ -49,7 +49,7 @@ const columns: DataTableColumnDef<User>[] = [
         as={Link}
         href={`/admin/manage_user/${getValue()}`}
         aria-label="Manage"
-        icon={<FaPen></FaPen>}
+        icon={<Pencil size="1em"></Pencil>}
       ></IconButton>
     ),
     header: "Update",