react-fa-picker/README.md

A reusable React Icon Picker component, bundled with its own Tailwind CSS build.

# React Font Awesome Icon Picker

A reusable React Icon Picker component, bundled with its own Tailwind CSS build.

---

## Installation

```bash
npm install react-fa-picker
pnpm add react-fa-picker
# also install peer dependencies:
npm install react react-dom tailwindcss postcss autoprefixer
```

---

## Usage

1. **Import the CSS** (from the `dist` folder):

   ```ts
   import "react-fa-picker/dist/style.css";
   ```

2. **Import and render** the component:

   ```tsx
   import React from "react";
   import { IconPicker } from "react-fa-picker";

   function App() {
     return (
       <div className='h-screen flex items-center justify-center p-4'>
         <IconPicker
           defaultSize=16
           defaultColor=#ffffff
           defaultValue='house-icon'
           onChange={(icon) => console.log(icon)}
           className='max-w-md'
         />
       </div>
     );
   }

   export default App;
   ```

---

## Props

The `IconPicker` component accepts the following props:

```ts
interface IconPickerProps {
  /**
   * Initial icon name to select (e.g. "faBeer").
   * @default ""
   */
  defaultValue?: string;

  /**
   * Called when the user selects an icon.
   * Receives the selected `IconType`.
   */
  onChange?: (icon: IconType) => void;

  /**
   * Additional CSS classes to apply to the container.
   * @default ""
   */
  className?: string;
}
```

---

## Types

You can import `IconType` for full icon metadata:

```ts
import { IconType } from "fc-react-icon-picker";

// IconType shape:
// {

//   name: string;
//   unicode: string;
//   class: string;
// }
```

---

## Tailwind Configuration

No changes to your `tailwind.config.js` are required. This package ships a precompiled `style.css` that includes all necessary Tailwind styles.

---

## License

MIT