feat: add icons

src/components/safe/steps/investor-details/form.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 { Label } from "@/components/ui/label";
 import {
@@ -164,7 +165,11 @@ export function InvestorDetailsForm({ stakeholders }: InvestorsDetailsProps) {
                     >
                       <div className="flex items-center my-1 gap-x-2">
                         <span>
-                          <RiAddCircleLine className="h-4 w-4" aria-hidden />
+                          <Icon
+                            name="add-circle-line"
+                            className="h-4 w-4"
+                            aria-hidden
+                          />
                         </span>
                         <div>Add a stakeholder</div>
                       </div>

src/components/safe/steps/safe-template.tsx

@@ -37,6 +37,7 @@ import { z } from "zod";
 import { uploadFile } from "@/common/uploads";
 import { Checkbox } from "@/components/ui/checkbox";
 import { LinearCombobox } from "@/components/ui/combobox";
+import { Icon } from "@/components/ui/icon";
 import { Input } from "@/components/ui/input";
 import { invariant } from "@/lib/error";
 import { TAG } from "@/lib/tags";
@@ -348,7 +349,8 @@ function Recipients() {
                   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/securities/options/option-table.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";
@@ -213,7 +214,8 @@ export const columns: ColumnDef<Option[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"
                 />

src/components/securities/shares/share-table.tsx

@@ -34,6 +34,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
+import { Icon } from "@/components/ui/icon";
 import { formatCurrency, formatNumber } from "@/lib/utils";
 import { getPresignedGetUrl } from "@/server/file-uploads";
 import { api } from "@/trpc/react";
@@ -273,7 +274,8 @@ export const columns: ColumnDef<Share[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"
                 />

src/components/securities/shares/steps/general-details.tsx

@@ -12,6 +12,7 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
+import { Icon } from "@/components/ui/icon";
 import { Input } from "@/components/ui/input";
 import {
   MultiSelector,
@@ -161,7 +162,11 @@ export const GeneralDetails = ({ shareClasses = [] }: GeneralDetailsProps) => {
                         >
                           <div className="flex justify-between items-center">
                             <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>

src/components/security/SettingHeader.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "@/components/ui/icon";
 import { cn } from "@/lib/utils";
 import { withServerComponentSession } from "@/server/auth";
 import { RiArrowLeftLine } from "@remixicon/react";
@@ -31,7 +32,10 @@ export const SettingsHeader = async ({
           <div className="flex flex-row items-center justify-start space-x-1">
             {showBackArrow && (
               <Link href={href}>
-                <RiArrowLeftLine className="space-x-3 text-slate-800" />
+                <Icon
+                  name="arrow-left-line"
+                  className="space-x-3 text-slate-800"
+                />
               </Link>
             )}
             <h3 className="text-lg font-medium">{title}</h3>

src/components/security/passkey/user-passkeys-data-table.tsx

@@ -25,6 +25,7 @@ import {
 import { dayjsExt } from "@/common/dayjs";
 import { DataTable } from "@/components/ui/data-table/data-table";
 import { DataTablePagination } from "@/components/ui/data-table/data-table-pagination";
+import { Icon } from "@/components/ui/icon";
 import { api } from "@/trpc/react";
 import { RiMore2Fill } from "@remixicon/react";
 import { useRouter } from "next/navigation";

src/components/settings/settings-sidebar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { NavLink } from "@/components/dashboard/sidebar/nav-link";
+import { Icon } from "@/components/ui/icon";
 import {
   RiAccountCircleFill,
   RiAccountCircleLine,

src/components/stakeholder/stakeholder-dropdown.tsx

@@ -8,14 +8,15 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Icon } from "@/components/ui/icon";
 import { RiAccountCircleFill, RiAddFill, RiGroup2Fill } from "@remixicon/react";
 
 export default function StakeholderDropdown() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button>
-          <RiAddFill className="mr-2 h-5 w-5" />
+          <Icon name="add-fill" className="mr-2 h-5 w-5" />
           Add stakeholders
         </Button>
       </DropdownMenuTrigger>
@@ -43,7 +44,7 @@ export default function StakeholderDropdown() {
               }}
             >
               <>
-                <RiAccountCircleFill className="mr-2 h-4 w-4" />
+                <Icon name="account-circle-fill" className="mr-2 h-4 w-4" />
                 Add one stakeholder
               </>
             </Button>

src/components/stakeholder/stakeholder-table.tsx

@@ -9,6 +9,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 type { RouterOutputs } from "@/trpc/shared";
 import { RiMore2Fill } from "@remixicon/react";
 import {

src/components/stakeholder/stakeholder-uploader.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
 import { parseStrakeholdersCSV } from "@/lib/stakeholders-csv-parser";
 import { api } from "@/trpc/react";
 import type { TypeStakeholderArray } from "@/trpc/routers/stakeholder-router/schema";
@@ -70,7 +71,7 @@ const StakeholderUploader = () => {
         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/template/field-canvas/custom-field-renderer/custom-select-field-renderer.tsx

@@ -5,9 +5,9 @@ import {
   FormItem,
   FormLabel,
 } from "@/components/ui/form";
+import { Icon } from "@/components/ui/icon";
 import { Input } from "@/components/ui/input";
-import { type TemplateFieldForm } from "@/providers/template-field-provider";
-import { RiDeleteBinLine } from "@remixicon/react";
+import type { TemplateFieldForm } from "@/providers/template-field-provider";
 import { nanoid } from "nanoid";
 import { useFieldArray, useFormContext } from "react-hook-form";
 
@@ -62,7 +62,8 @@ export function CustomSelectFieldRenderer({
               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/template/field-canvas/template-field.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
 import { Input } from "@/components/ui/input";
 import {
   Select,
@@ -20,8 +21,8 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { cn } from "@/lib/utils";
-import { type TemplateFieldForm } from "@/providers/template-field-provider";
-import { type RouterOutputs } from "@/trpc/shared";
+import type { TemplateFieldForm } from "@/providers/template-field-provider";
+import type { RouterOutputs } from "@/trpc/shared";
 import { useFormContext, useWatch } from "react-hook-form";
 import { CustomFieldRenderer } from "./custom-field-renderer";
 import { TemplateFieldContainer } from "./template-field-container";
@@ -85,7 +86,10 @@ export function TemplateField({
             handleDelete();
           }}
         >
-          <RiCloseCircleLine className="h-5 w-5 text-red-500/90 group-hover:text-red-500" />
+          <Icon
+            name="close-circle-line"
+            className="h-5 w-5 text-red-500/90 group-hover:text-red-500"
+          />
         </Button>
 
         <FormField

src/components/ui/accordion.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Icon } from "@/components/ui/icon";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { RiArrowDownSLine } from "@remixicon/react";
 import * as React from "react";
@@ -34,7 +35,10 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <RiArrowDownSLine className="h-4 w-4 shrink-0 transition-transform duration-200" />
+      <Icon
+        name="arrow-down-s-line"
+        className="h-4 w-4 shrink-0 transition-transform duration-200"
+      />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));

src/components/ui/button.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 
 import { type VariantProps, cva } from "class-variance-authority";
 
+import { Icon } from "@/components/ui/icon";
 import { cn } from "@/lib/utils";
 import { RiLoader5Fill } from "@remixicon/react";
 

src/components/ui/checkbox.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Icon } from "@/components/ui/icon";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { RiCheckLine } from "@remixicon/react";
 import * as React from "react";
@@ -21,7 +22,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <RiCheckLine className="h-4 w-4" />
+      <Icon name="check-line" className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));

src/components/ui/combobox.tsx

@@ -8,6 +8,7 @@ import {
   CommandList,
   CommandSeparator,
 } from "@/components/ui/command";
+import { Icon } from "@/components/ui/icon";
 import Kbd from "@/components/ui/kbd";
 import {
   Popover,

src/components/ui/command.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { Icon } from "@/components/ui/icon";
 import type { DialogProps } from "@radix-ui/react-dialog";
-import { RiSearchLine } from "@remixicon/react";
 import { Command as CommandPrimitive } from "cmdk";
 import * as React from "react";
 
@@ -42,7 +42,7 @@ const CommandInput = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <RiSearchLine className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <Icon name="search-line" className="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(

src/components/ui/dropdown-button.tsx

@@ -1,12 +1,10 @@
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuLabel,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 
 import { Button } from "@/components/ui/button";
-import { RiAddFill } from "@remixicon/react";
 
 type DropDownButtonProps = {
   icon?: React.ReactNode;

src/components/ui/dropdown-menu.tsx

@@ -3,8 +3,8 @@
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import * as React from "react";
 
+import { Icon } from "@/components/ui/icon";
 import { cn } from "@/lib/utils";
-import { RiArrowRightSLine, RiCheckLine, RiCircleLine } from "@remixicon/react";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
@@ -34,7 +34,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <RiArrowRightSLine aria-hidden className="ml-auto h-4 w-4" />
+    <Icon name="arrow-right-s-line" aria-hidden className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName =
@@ -107,7 +107,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <RiCheckLine aria-hidden className="h-4 w-4" />
+        <Icon name="check-line" aria-hidden className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -130,7 +130,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <RiCircleLine aria-hidden className="h-2 w-2 fill-current" />
+        <Icon name="circle-line" aria-hidden className="h-2 w-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}

src/components/ui/input-otp.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Icon } from "@/components/ui/icon";
 import { RiCrossLine } from "@remixicon/react";
 import { OTPInput, type SlotProps } from "input-otp";
 import * as React from "react";
@@ -55,8 +56,9 @@ const InputOTPSeparator = React.forwardRef<
   React.ElementRef<"div">,
   React.ComponentPropsWithoutRef<"div">
 >(({ ...props }, ref) => (
+  // biome-ignore lint/a11y/useAriaPropsForRole: <explanation>
   <div ref={ref} role="separator" {...props}>
-    <RiCrossLine />
+    <Icon name="cross-line" />
   </div>
 ));
 InputOTPSeparator.displayName = "InputOTPSeparator";