feat: add icons

src/app/(unauthenticated)/new/components/LoginWithGoogle.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { RiGoogleFill as GoogleIcon } from "@remixicon/react";
+import { Icon } from "@/components/ui/icon";
 import { signIn } from "next-auth/react";
 
 async function signInWithGoogle() {
@@ -16,7 +16,7 @@ const LoginWithGoogle = () => {
       onClick={signInWithGoogle}
       className="rounded-xl"
     >
-      <GoogleIcon className="mr-2 h-6 w-6" />
+      <Icon name="google-fill" className="mr-2 h-6 w-6" />
       <span className="text-lg">
         Continue with <span className="font-bold">Google</span>
       </span>

src/app/updates/[publicId]/page.tsx

@@ -3,6 +3,7 @@
 import { dayjsExt } from "@/common/dayjs";
 import { SharePageLayout } from "@/components/share/page-layout";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Icon } from "@/components/ui/icon";
 import UpdateRenderer from "@/components/update/renderer";
 import { type JWTVerifyResult, decode } from "@/lib/jwt";
 import { UpdateStatusEnum } from "@/prisma/enums";

src/components/common/file-icon.tsx

@@ -1,16 +1,7 @@
 "use client";
 import { fileType } from "@/lib/mime";
 
-import {
-  RiFileCloudFill,
-  RiFileExcelFill,
-  RiFileImageFill,
-  RiFileMusicFill,
-  RiFilePdf2Fill,
-  RiFilePptFill,
-  RiFileVideoFill,
-  RiFileWordFill,
-} from "@remixicon/react";
+import { Icon } from "@/components/ui/icon";
 
 type FileIconProps = {
   type: string;
@@ -23,56 +14,56 @@ const FileIcon = ({ type }: FileIconProps) => {
     case "image":
       return (
         <div className="flex h-8 w-8 items-center justify-center rounded-md bg-pink-100">
-          <RiFileImageFill className="h-5 w-5 text-pink-500" />
+          <Icon name="file-image-fill" className="h-5 w-5 text-pink-500" />
         </div>
       );
 
     case "audio":
       return (
         <div className="flex h-8 w-8 items-center justify-center rounded-md bg-indigo-100">
-          <RiFileMusicFill className="h-5 w-5 text-indigo-500" />
+          <Icon name="file-music-fill" className="h-5 w-5 text-indigo-500" />
         </div>
       );
 
     case "video":
       return (
         <div className="flex h-8 w-8 items-center justify-center rounded-md bg-rose-100">
-          <RiFileVideoFill className="h-5 w-5 text-rose-500" />
+          <Icon name="file-video-fill" className="h-5 w-5 text-rose-500" />
         </div>
       );
 
     case "powerpoint":
       return (
         <div className="flex h-8 w-8 items-center justify-center rounded-md bg-orange-100">
-          <RiFilePptFill className="h-5 w-5 text-orange-500" />
+          <Icon name="file-ppt-fill" className="h-5 w-5 text-orange-500" />
         </div>
       );
 
     case "doc":
       return (
         <div className="flex h-8 w-8 items-center justify-center rounded-md bg-blue-100">
-          <RiFileWordFill className="h-5 w-5 text-blue-500" />
+          <Icon name="file-word-fill" className="h-5 w-5 text-blue-500" />
         </div>
       );
 
     case "excel":
       return (
         <div className="flex h-8 w-8 items-center justify-center rounded-md bg-emerald-100">
-          <RiFileExcelFill className="h-5 w-5 text-emerald-500" />
+          <Icon name="file-excel-fill" className="h-5 w-5 text-emerald-500" />
         </div>
       );
 
     case "pdf":
       return (
         <div className="flex h-8 w-8 items-center justify-center rounded-md bg-red-100">
-          <RiFilePdf2Fill className="h-5 w-5 text-red-500" />
+          <Icon name="file-pdf-2-fill" className="h-5 w-5 text-red-500" />
         </div>
       );
 
     default:
       return (
         <div className="flex h-8 w-8 items-center justify-center rounded-md bg-blue-100">
-          <RiFileCloudFill className="h-5 w-5 text-blue-500" />
+          <Icon name="file-cloud-fill" className="h-5 w-5 text-blue-500" />
         </div>
       );
   }

src/components/common/share-modal.tsx

@@ -6,13 +6,9 @@ import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import MultipleSelector, { type Option } from "@/components/ui/multi-selector";
 
+import { Icon } from "@/components/ui/icon";
 import type { ShareContactType } from "@/schema/contacts";
 import type { DataRoomRecipient, UpdateRecipient } from "@prisma/client";
-import {
-  RiCheckLine as CheckIcon,
-  RiDeleteBin2Line as DeleteIcon,
-  RiLink as LinkIcon,
-} from "@remixicon/react";
 import { Fragment, useState } from "react";
 import { useCopyToClipboard } from "usehooks-ts";
 import { popModal } from "../modals";
@@ -145,7 +141,7 @@ const Share = ({
                           }
                         }}
                       >
-                        <DeleteIcon className="h-4 w-4" />
+                        <Icon name="delete-bin-2-line" className="h-4 w-4" />
                         Remove
                       </Button>
                       <Button
@@ -161,9 +157,12 @@ const Share = ({
                       >
                         <Fragment>
                           {copiedId === recipient.id ? (
-                            <CheckIcon className="h-4 w-4 text-green-500 transition" />
+                            <Icon
+                              name="check-line"
+                              className="h-4 w-4 text-green-500 transition"
+                            />
                           ) : (
-                            <LinkIcon className="h-4 w-4 transition" />
+                            <Icon name="link" className="h-4 w-4 transition" />
                           )}
                           Copy link
                         </Fragment>

src/components/common/tldr.tsx

@@ -1,4 +1,4 @@
-import { RiInformationLine } from "@remixicon/react";
+import { Icon } from "@/components/ui/icon";
 import Link from "next/link";
 
 type TldrProps = {
@@ -14,7 +14,8 @@ const Tldr = ({ message, cta }: TldrProps) => {
     <div className="mt-3 rounded-md bg-teal-50 p-4 text-left">
       <div className="flex">
         <div className="flex-shrink-0">
-          <RiInformationLine
+          <Icon
+            name="information-line"
             className="h-5 w-5 text-teal-600"
             aria-hidden="true"
           />

src/components/dashboard/navbar/mobile-drawer.tsx

@@ -1,9 +1,10 @@
 import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import { RiMenuLine } from "@remixicon/react";
 import { SideBar } from "../sidebar";
 
-import { type TGetCompanyList } from "@/server/company";
+import type { TGetCompanyList } from "@/server/company";
 
 interface SideBarProps {
   publicId: string;
@@ -20,7 +21,7 @@ export function MobileDrawer({ publicId, companies }: SideBarProps) {
             className="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 lg:hidden"
           >
             <span className="sr-only">Open sidebar</span>
-            <RiMenuLine className="h-4 w-4" aria-hidden="true" />
+            <Icon name="menu-line" className="h-4 w-4" aria-hidden="true" />
           </Button>
         </SheetTrigger>
         <SheetContent side="left" className="px-0">

src/components/dashboard/overview/activities-card.tsx

@@ -6,8 +6,8 @@ import {
   CardDescription,
   CardHeader,
 } from "@/components/ui/card";
+import { Icon } from "@/components/ui/icon";
 import { api } from "@/trpc/server";
-import { RiAccountCircleFill } from "@remixicon/react";
 import Link from "next/link";
 
 type Props = {
@@ -43,7 +43,8 @@ const ActivityCard = async ({ className, publicId }: Props) => {
                         <div>
                           <div className="relative px-1">
                             <div className="flex h-8 w-8 items-center justify-center rounded-full bg-teal-100 ring-8 ring-white">
-                              <RiAccountCircleFill
+                              <Icon
+                                name="account-circle-fill"
                                 className="h-5 w-5 text-teal-500"
                                 aria-hidden="true"
                               />

src/components/dashboard/overview/empty.tsx

@@ -1,6 +1,6 @@
 import EmptyState from "@/components/common/empty-state";
 import { Button } from "@/components/ui/button";
-import { RiArrowRightLine, RiPieChartFill } from "@remixicon/react";
+import { Icon } from "@/components/ui/icon";
 import Link from "next/link";
 
 type EmptyOverviewProps = {
@@ -11,7 +11,7 @@ type EmptyOverviewProps = {
 const EmptyOverview = ({ firstName, publicCompanyId }: EmptyOverviewProps) => {
   return (
     <EmptyState
-      icon={<RiPieChartFill />}
+      icon={<Icon name="pie-chart-fill" />}
       title={`Welcome to Captable, Inc. ${firstName && `, ${firstName}`} 👋`}
       subtitle={
         <span className="text-muted-foreground">
@@ -22,7 +22,7 @@ const EmptyOverview = ({ firstName, publicCompanyId }: EmptyOverviewProps) => {
       <Button size="lg">
         <Link href={`/${publicCompanyId}/stakeholders`}>
           Let{`'`}s get started
-          <RiArrowRightLine className="ml-5 inline-block h-4 w-5" />
+          <Icon name="arrow-right-line" className="ml-5 inline-block h-4 w-5" />
         </Link>
       </Button>
     </EmptyState>

src/components/dashboard/sidebar/company-switcher.tsx

@@ -10,6 +10,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 
+import { Icon } from "@/components/ui/icon";
 import type { TGetCompanyList } from "@/server/company";
 import { api } from "@/trpc/react";
 import * as SelectPrimitive from "@radix-ui/react-select";
@@ -77,7 +78,7 @@ export function CompanySwitcher({ companies, publicId }: CompanySwitcherProps) {
           className={SelectItemStyle}
         >
           <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-            <RiAddCircleLine className="h-4 w-4" aria-hidden />
+            <Icon name="add-circle-line" className="h-4 w-4" aria-hidden />
           </span>
 
           <SelectPrimitive.ItemText>Create Company</SelectPrimitive.ItemText>