feat: add icons

src/components/file/preview.tsx

@@ -1,6 +1,7 @@
 import EmptyState from "@/components/common/empty-state";
 import { OfficeViewer } from "@/components/file/office-viewer";
 import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
 import { PdfViewer } from "@/components/ui/pdf-viewer";
 import { fileType } from "@/lib/mime";
 import { RiFileUnknowFill as UnknownFileIcon } from "@remixicon/react";

src/components/member/member-bulk-import-modal.tsx

@@ -2,6 +2,7 @@
 import Modal from "@/components/common/modal";
 import TeamMemberUploader from "@/components/member/member-uploader";
 import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
 import { RiGroup2Fill } from "@remixicon/react";
 import { useState } from "react";
 

src/components/member/member-table.tsx

@@ -31,6 +31,7 @@ import { api } from "@/trpc/react";
 
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
 
+import { Icon } from "@/components/ui/icon";
 import { getRoleId } from "@/lib/rbac/access-control-utils";
 import type { RouterOutputs } from "@/trpc/shared";
 import { RiMore2Fill } from "@remixicon/react";

src/components/member/member-uploader.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
 import { parseInviteMembersCSV } from "@/lib/invite-team-members-csv-parser";
 import { api } from "@/trpc/react";
 import type { TypeZodInviteMemberArrayMutationSchema } from "@/trpc/routers/member-router/schema";
@@ -81,7 +82,7 @@ const TeamMemberUploader = ({ setOpen }: TeamMemberUploaderType) => {
         className="flex h-24 cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-gray-300"
         onClick={() => fileInputRef.current?.click()}
       >
-        <RiUploadLine className="h-7 w-7 text-neutral-500" />
+        <Icon name="upload-line" className="h-7 w-7 text-neutral-500" />
         <span className="text-sm text-neutral-500">
           {csvFile.length !== 0 ? csvFile[0]?.name : "Click here to import"}
         </span>

src/components/member/verify-member-form.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { Icon } from "@/components/ui/icon";
 import {
   type TypeZodAcceptMemberMutationSchema,
   ZodAcceptMemberMutationSchema,
@@ -45,7 +46,7 @@ export function VerifyMemberForm({ memberId, token }: VerifyMemberFormProps) {
     },
   });
 
-  async function onSubmit(values: TypeZodAcceptMemberMutationSchema) {
+  function onSubmit(values: TypeZodAcceptMemberMutationSchema) {
     acceptMember.mutate(values);
   }
 
@@ -103,7 +104,10 @@ export function VerifyMemberForm({ memberId, token }: VerifyMemberFormProps) {
               type="submit"
             >
               Complete onboarding
-              <RiArrowRightLine className="ml-2 inline-block h-5 w-5" />
+              <Icon
+                name="arrow-right-line"
+                className="ml-2 inline-block h-5 w-5"
+              />
             </Button>
           </form>
         </Form>

src/components/modals/equity-pan/equity-plan-form.tsx

@@ -3,6 +3,7 @@
 import Tldr from "@/components/common/tldr";
 import { popModal, pushModal } from "@/components/modals";
 import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/trpc/react";
@@ -240,7 +241,11 @@ export const EquityPlanForm = ({
                         >
                           <div className="flex justify-between items-center my-1">
                             <span>
-                              <RiAddFill className="h-4 w-4" aria-hidden />
+                              <Icon
+                                name="add-fill"
+                                className="h-4 w-4"
+                                aria-hidden
+                              />
                             </span>
 
                             <div>Create new share class</div>
@@ -271,7 +276,7 @@ export const EquityPlanForm = ({
                           });
                         }}
                       >
-                        <RiAddFill className="mr-2 h-5 w-5" />
+                        <Icon name="add-fill" className="mr-2 h-5 w-5" />
                         Create a share class
                       </Button>
                     )}

src/components/modals/esign-doc/steps/add-recepients-step.tsx

@@ -10,6 +10,7 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
+import { Icon } from "@/components/ui/icon";
 import { Input } from "@/components/ui/input";
 import {
   StepperModalContent,
@@ -156,7 +157,8 @@ export function AddRecipientStep({ companyPublicId }: AddRecipientStepProps) {
                           size="sm"
                           className="group h-8 w-8 p-2"
                         >
-                          <RiDeleteBinLine
+                          <Icon
+                            name="delete-bin-line"
                             aria-hidden
                             className="h-8 w-8 text-red-500/70 group-hover:text-red-500"
                           />

src/components/onboarding/check-email/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
 import { api } from "@/trpc/react";
 import { RiMailLine } from "@remixicon/react";
 import { useSearchParams } from "next/navigation";
@@ -37,7 +38,7 @@ const CheckEmailComponent = () => {
         <div className="flex flex-col gap-y-2 text-center">
           <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-teal-100">
             <span className="text-teal-500">
-              <RiMailLine className="h-6 w-auto" />
+              <Icon name="mail-line" className="h-6 w-auto" />
             </span>
           </div>
           <h1 className="text-2xl font-semibold tracking-tight">

src/components/onboarding/company-form.tsx

@@ -9,6 +9,7 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
+import { Icon } from "@/components/ui/icon";
 import { Input } from "@/components/ui/input";
 import {
   Select,
@@ -509,7 +510,10 @@ export const CompanyForm = ({ type, data }: CompanyFormProps) => {
               {type === "onboarding" || type === "create" ? (
                 <>
                   Complete Setup
-                  <RiArrowRightLine className="ml-2 inline-block h-5 w-5" />
+                  <Icon
+                    name="arrow-right-line"
+                    className="ml-2 inline-block h-5 w-5"
+                  />
                 </>
               ) : (
                 "Save"

src/components/onboarding/email-sent/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
 import { RiMailLine } from "@remixicon/react";
 import Link from "next/link";
 
@@ -9,7 +10,7 @@ const EmailSent = () => {
     <div className="flex h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-white to-cyan-100">
       <div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-white p-10 shadow">
         <div className="flex flex-col gap-y-2 text-center">
-          <RiMailLine className="mb-1 h-10 w-auto" />
+          <Icon name="mail-line" className="mb-1 h-10 w-auto" />
           <h1 className="text-2xl font-semibold tracking-tight">Email sent!</h1>
         </div>
         <div className="text-center">

src/components/onboarding/signin/index.tsx

@@ -9,6 +9,7 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
+import { Icon } from "@/components/ui/icon";
 import { Input } from "@/components/ui/input";
 import { PasswordInput } from "@/components/ui/password-input";
 import { api } from "@/trpc/react";
@@ -119,7 +120,7 @@ const SignInForm = ({ isGoogleAuthEnabled }: LoginFormProps) => {
             type="button"
             onClick={onSignInWithPasskey}
           >
-            <RiDoorLockLine className="h-5 w-5" />
+            <Icon name="door-lock-line" className="h-5 w-5" />
             Login with <span className="font-bold">Passkey</span>
           </Button>
 
@@ -129,7 +130,7 @@ const SignInForm = ({ isGoogleAuthEnabled }: LoginFormProps) => {
               type="button"
               onClick={signInWithGoogle}
             >
-              <RiGoogleFill className="mr-2 h-4 w-4" />
+              <Icon name="google-fill" className="mr-2 h-4 w-4" />
               Login with <span className="font-bold">Google</span>
             </Button>
           )}

src/components/onboarding/signup/index.tsx

@@ -9,6 +9,7 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
+import { Icon } from "@/components/ui/icon";
 import { Input } from "@/components/ui/input";
 import { PasswordInput } from "@/components/ui/password-input";
 import { api } from "@/trpc/react";
@@ -79,7 +80,7 @@ const SignUpForm = ({ isGoogleAuthEnabled }: SignUpFormProps) => {
                 type="button"
                 onClick={signInWithGoogle}
               >
-                <RiGoogleFill className="mr-2 h-4 w-4" />
+                <Icon name="google-fill" className="mr-2 h-4 w-4" />
                 Signup with <span className="font-bold">Google</span>
               </Button>
 

src/components/onboarding/verify-email/index.tsx

@@ -1,12 +1,9 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
 import { api } from "@/trpc/react";
-import {
-  RiArrowRightLine,
-  RiMailCheckLine,
-  RiMailCloseLine,
-} from "@remixicon/react";
+
 import Link from "next/link";
 import { useCallback, useEffect, useState } from "react";
 
@@ -16,7 +13,7 @@ const VerifyEmail = ({ token }: { token: string }) => {
   const [success, setSuccess] = useState<string | undefined>("");
 
   const { mutateAsync } = api.auth.verifyEmail.useMutation({
-    onSuccess: async ({ message }) => {
+    onSuccess: ({ message }) => {
       setLoading(false);
       setSuccess(message);
     },
@@ -26,7 +23,7 @@ const VerifyEmail = ({ token }: { token: string }) => {
     },
   });
 
-  const onSubmit = useCallback(async () => {
+  const onSubmit = async () => {
     if (success || error) return;
 
     if (!token) {
@@ -42,7 +39,7 @@ const VerifyEmail = ({ token }: { token: string }) => {
       setLoading(false);
       setError("Something went wrong! Please try again.");
     }
-  }, [token, success, error]);
+  };
 
   useEffect(() => {
     void onSubmit();
@@ -70,7 +67,7 @@ const VerifyEmail = ({ token }: { token: string }) => {
             <>
               <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-teal-100">
                 <span className="text-teal-500">
-                  <RiMailCheckLine className="h-6 w-auto" />
+                  <Icon name="mail-check-line" className="h-6 w-auto" />
                 </span>
               </div>
               <h1 className="text-2xl font-semibold tracking-tight">
@@ -82,7 +79,7 @@ const VerifyEmail = ({ token }: { token: string }) => {
             </>
           ) : (
             <>
-              <RiMailCloseLine className="mb-1 h-10 w-auto" />
+              <Icon name="mail-close-line" className="mb-1 h-10 w-auto" />
               <h1 className="text-2xl font-semibold tracking-tight">
                 Verification Failed
               </h1>
@@ -96,14 +93,14 @@ const VerifyEmail = ({ token }: { token: string }) => {
             <Link href="/signin" className="mt-4">
               <Button size="lg">
                 Continue to Login page
-                <RiArrowRightLine className="ml-2 h-4 w-4" />
+                <Icon name="arrow-right-line" className="ml-2 h-4 w-4" />
               </Button>
             </Link>
           ) : (
             <Link href="/signup" className="mt-4">
               <Button size="lg">
                 Try signing up again
-                <RiArrowRightLine className="ml-2 h-4 w-4" />
+                <Icon name="arrow-right-line" className="ml-2 h-4 w-4" />
               </Button>
             </Link>
           )}

src/components/rbac/role-table.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Icon } from "@/components/ui/icon";
 import { ADMIN_PERMISSION } from "@/lib/rbac/constants";
 import type { TPermission } from "@/lib/rbac/schema";
 import { api } from "@/trpc/react";

src/components/safe/safe-actions.tsx

@@ -4,6 +4,7 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Icon } from "@/components/ui/icon";
 import { RiAddFill, RiSafe2Fill, RiSafeFill } from "@remixicon/react";
 import { pushModal } from "../modals";
 
@@ -12,7 +13,7 @@ export function SafeActions() {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button>
-          <RiAddFill className="mr-2 h-5 w-5" />
+          <Icon name="add-fill" className="mr-2 h-5 w-5" />
           Manage SAFE
         </Button>
       </DropdownMenuTrigger>
@@ -32,7 +33,7 @@ export function SafeActions() {
                 });
               }}
             >
-              <RiSafeFill className="mr-2 h-4 w-4" />
+              <Icon name="safe-fill" className="mr-2 h-4 w-4" />
               Create a new SAFE
             </Button>
           </li>

src/components/safe/safe-table/index.tsx

@@ -35,6 +35,7 @@ import { SortButton } from "@/components/ui/data-table/data-table-buttons";
 import { DataTableContent } from "@/components/ui/data-table/data-table-content";
 import { DataTableHeader } from "@/components/ui/data-table/data-table-header";
 import { DataTablePagination } from "@/components/ui/data-table/data-table-pagination";
+import { Icon } from "@/components/ui/icon";
 import { getPresignedGetUrl } from "@/server/file-uploads";
 import type { RouterOutputs } from "@/trpc/shared";
 import { RiFileDownloadLine, RiMore2Fill } from "@remixicon/react";
@@ -216,7 +217,8 @@ export const columns: ColumnDef<Safe[number]>[] = [
                     await openFileOnTab(doc.bucket.key);
                   }}
                 >
-                  <RiFileDownloadLine
+                  <Icon
+                    name="file-download-line"
                     type={doc.bucket.mimeType}
                     className="mx-3 cursor-pointer text-muted-foreground hover:text-primary/80"
                   />