Noodles, Poodles and More!

    This package has been deprecated

    Author message:

    This Package is not ready for production

    ngx-icon-pickr
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    ngx-icon-pickr

    A icon picker element using all the icons type.

    Prerequisites

    Icon Picker will work in angular projects.

    Table of Contents

    Installation

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

    Import style

    To use scss import it.

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

    To use css import it into angular.json .

    '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.

    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.

     
    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

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

    app.component.ts

    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: ''
          }
        ]
      };
    }

    Install

    npm i ngx-icon-pickr

    DownloadsWeekly Downloads

    28

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    477 kB

    Total Files

    43

    Last publish

    Collaborators

    • akash-gupta