Custom Icons

Overview

This page documents the custom SVG icon components available in the FoodEase registry. These icons are React components, designed for easy use and consistent styling across your app.

Each icon is a .tsx file exporting a React component. They accept all standard SVG props and a className prop for styling (e.g. with Tailwind CSS).

Available Icons

Installation

To get started using these icons,

npx shadcn@latest add https://foodease-dev-registry.cap.reachcinema.io/r/v1/custom-icons.json

How to Use

1. Import the icon:

   import CardIcon from "@/icons/CardIcon";

2. Add to your JSX:

   <CardIcon className="w-6 h-6 text-primary" />

   You can use any Tailwind or custom class for size and color.

Adding More Icons

To add your own icons, create a new .tsx file in the same folder, following the same pattern. Use the className prop for styling flexibility.

Icon Guidelines

• All icons should be SVG, React components, and accept className and SVG props.
• Use currentColor for fill/stroke so icons inherit text color.
• Default size: w-5 h-5 (can be overridden via className).
• Keep SVGs optimized and minimal for performance.

Example: Custom Icon Usage

import CashDrawerIcon from "@/icons/CashDrawerIcon";

export default function Example() {
  return (
    <button className="flex items-center gap-2">
      <CashDrawerIcon className="w-6 h-6 text-green-600" />
      Open Drawer
    </button>
  );
}