# icon-selector

> A library for fetching fonts based upon text.

Latest version **1.0.0** (published 2017-10-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install icon-selector
pnpm add icon-selector
yarn add icon-selector
bun add icon-selector
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-10-26 |
| First published | 2017-10-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Pritesh Poddar |
| Maintainers | priteshpoddar |

## Links

- npm: https://www.npmjs.com/package/icon-selector
- npm.io page: https://npm.io/package/icon-selector

## Recent versions

- 1.0.0 (latest) — 2017-10-26

## README

# icon-selector

A utility library that picks icon based upon text entered.(Inspired from this library: https://github.com/jaredpalmer/country-fns )

## Demo

![Alt Text](demo.gif)


## Install
```
npm install icon-selector --save
```

## Overview

Each icon in icon-selector is represented by an object with the following keys:

- `name`: Icon name.
- `class`: Complete icon class.
- `iconType`: Icon belongs to which library e.g. 'fa' .
- `iconName`: Name of icon as in font-awesome library.

## Quick Example

<!-- Imagine you need to make a "Select Country" input. -->

```jsx
import React, { Component } from 'react';
import { getIcons } from 'icon-selector'

class IconSelector extends Component {
  constructor(props) {
    super(props);
    this.state = {
      icon: "fa fa-address-book",
      value: ""
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    let icon = getIcons(event.target.value) ? getIcons(event.target.value).class : this.state.icon
    this.setState({
        value: event.target.value,
        icon:  icon
    })
  }

  render() {
    return (
        <div className="header">
            <div>
                <label>Icon : </label>
                <i className={this.state.icon} aria-hidden="true"></i>
            </div>
            <input 
                type="text" 
                value={this.state.value} 
                onChange={this.handleChange}
            />
        </div>
    );
  }
}

export default IconSelector;

```


## Author

- Pritesh Poddar


---

MIT LICENSE.

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