# @eszqsc112/react-icon-picker

> UI component for selecting an icon from a predefined set of icons sourced from @iconify/json.

Latest version **0.1.1** (published 2023-01-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install @eszqsc112/react-icon-picker
pnpm add @eszqsc112/react-icon-picker
yarn add @eszqsc112/react-icon-picker
bun add @eszqsc112/react-icon-picker
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2023-01-31 |
| First published | 2023-01-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Purple IO |
| Maintainers | eszqsc112 |
| Keywords | react, picker, icon-picker, icon, ui, iconify |

## Links

- npm: https://www.npmjs.com/package/@eszqsc112/react-icon-picker
- npm.io page: https://npm.io/package/@eszqsc112/react-icon-picker

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2023-01-31
- 0.1.0 — 2023-01-28

## README

# 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](https://www.npmjs.com/package/@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

```bash
npm install @eszqsc112/react-icon-picker
```

## Usage

```ts
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

```tsx
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](https://www.typescriptlang.org/)
- The `website` directory is a workspace that uses [Next.js](https://nextjs.org/) for testing and documentation
- The project uses [TurboRepo](https://turborepo.org/) for easy management of multiple packages in a monorepo
- Uses [pnpm](https://pnpm.js.org/) 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

---
_Source: https://npm.io/package/@eszqsc112/react-icon-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._