React Icon Picker

⚠️⚠️⚠️ Work in Progress ⚠️⚠️⚠️

This repository is currently a work in progress and is not ready for public use. The package should not be downloaded or used in its current state.

We will remove this notice and make the package available once it has been thoroughly tested and all known issues have been resolved.

Thank you for your understanding.

UI component for selecting an icon from a predefined set of icons sourced from @iconify/json. Developers can specify the list of predefined icons that will be displayed in the picker.

Features

• Display a predefined set of icons in a dropdown or modal dialog
• Allow user to select an icon by clicking or tapping
• Reusable component that can be easily integrated into other parts of a React-based application
• Typescript support
• Useful for CMS developers to easily allow users to choose an icon while editing content

Installation

npm install @eszqsc112/react-icon-picker

Usage

import IconPicker from "@eszqsc112/react-icon-picker";

<IconPicker icons={["icon1", "icon2", "icon3"]} onSelect={handleSelect} />;

Props

| Prop | Type | Description | | ---------- | ---------- | -------------------------------------------------------- | | icons | string[] | A list of predefined icons to be displayed in the picker | | onSelect | Function | Callback function to handle the selected icon |

Example

import IconPicker from "@eszqsc112/react-icon-picker";
import { useState } from "react";

function Editor() {
  const [selectedIcon, setSelectedIcon] = useState<string | null>(null);

  const handleSelect = (icon: string) => {
    setSelectedIcon(icon);
  };

  return (
    <div>
      <IconPicker icons={["icon1", "icon2", "icon3"]} onSelect={handleSelect} />
      <div>Selected Icon: {selectedIcon}</div>
    </div>
  );
}

export default Editor;

Development Guide

• The project is built with TypeScript
• The website directory is a workspace that uses Next.js for testing and documentation
• The project uses TurboRepo for easy management of multiple packages in a monorepo
• Uses pnpm for package management

Commands

• pnpm run dev starts the development server
• pnpm run build builds the project for production
• pnpm run test runs tests
• pnpm run lint runs linting