React Font Awesome Icon Picker

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

Installation

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):

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

2. Import and render the component:

   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:

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:

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