# ngx-icon-pickr

> ngx-icon-pickr A icon picker element using all the icons type.

Latest version **1.1.1** (published 2019-08-29) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install ngx-icon-pickr
pnpm add ngx-icon-pickr
yarn add ngx-icon-pickr
bun add ngx-icon-pickr
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2019-08-29 |
| First published | 2019-08-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 465.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Akash Gupta |
| Maintainers | akashtech |
| Keywords | icon-picker, icon, ngx-icon-picker, ngx-icon-pickr, font-pickr |

## Links

- npm: https://www.npmjs.com/package/ngx-icon-pickr
- Homepage: https://github.com/techaks/ngx-icon-pickr#readme
- Issues: https://github.com/techaks/ngx-icon-pickr/issues
- npm.io page: https://npm.io/package/ngx-icon-pickr

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## 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
- [stockfish](https://npm.io/package/stockfish.md) — 27.0K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2019-08-29
- 1.1.0 — 2019-08-29
- 1.0.8 — 2019-08-29
- 1.0.7 — 2019-08-29
- 1.0.6 — 2019-08-29
- 1.0.5 — 2019-08-27
- 1.0.4 — 2019-08-27
- 1.0.3 — 2019-08-27
- 1.0.2 — 2019-08-27
- 1.0.1 — 2019-08-27
- 1.0.0 — 2019-08-27
- 0.1.6 — 2019-08-27
- 0.1.5 — 2019-08-27
- 0.1.4 — 2019-08-27
- 0.1.3 — 2019-08-27
- … 12 more at https://npm.io/package/ngx-icon-pickr/versions

## README

<h3>ngx-icon-pickr</h3>
A icon picker element using all the icons type.

# Prerequisites

Icon Picker will work in angular projects.

## Table of Contents

- [Installation](#installation)
- [Import Style](#import-style)
- [Import Modules](#import-modules)
- [Pickr Options](#picker-optons)

## Installation

```bash
$ npm i bulma-iconpicker --save
$ npm install ngx-icon-pickr --save
```

## Import style

To use scss import it.

```scss
@import 'node_modules/ngx-icon-pickr/pickr';
```

To use css import it into angular.json .

```scss
'node_modules/ngx-icon-pickr/pickr/pickr.css';
```

## Import modules

To work on form it is require to import `NgxIconPickrModule` which provides advanced/dynamic level validation features. All modules register in the `NgModule` decorator `imports` property.

```js
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { NgxIconPickrModule } from 'ngx-icon-pickr'; // <-- #1 import module

import {AppComponent} from './app.component';

@NgModule({
  declarations:[AppComponent],
  imports:[ BrowserModule,
	NgxIconPickrModule
	]
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

## Pickr Options

Pickr Option is used, when we need to add more or custom font icons.

```Default options

let iconPickerOptions = {
  iconSets: [ {
    name: 'simpleLine', // Name displayed on tab
    css: 'https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css', // CSS url containing icons rules
    prefix: 'icon-', // CSS rules prefix to identify icons
    displayPrefix: ''
  },
  {
    name: 'fontAwesome', // Name displayed on tab
    css: 'https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css', // CSS url containing icons rules
    prefix: 'fa-', // CSS rules prefix to identify icons
    displayPrefix: 'fa fa-icon'
  } ]
};

```

> app.component.html

```html
<ngx-icon-picker [option]="option" [value]="value"></ngx-icon-picker>
```

> app.component.ts

```js
import { Component } from '@angular/core';
import { NgxIconPickerOption } from 'ngx-icon-pickr';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Ngx Icon Picker';
  value = 'fa fa-icon fa-star';
  option: NgxIconPickerOption = {
    iconSets: [
      {
        name: 'mdi',
        css:
          'https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/3.5.95/css/materialdesignicons.css',
        prefix: 'mdi-',
        displayPrefix: ''
      }
    ]
  };
}
```

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