icon-selectdeprecated

Have you ever wanted to have an easy to use component that looks exactly (almost) like a select tag with the added benefit of showing icons instead of words? Have you wanted to transform a select tag into a more meaningful drop-down when it comes to have a list of images to pick? If so, then welcome to Icon Select!

Usage no npm install needed!

<script type="module">
  import iconSelect from 'https://cdn.skypack.dev/icon-select';
</script>

README

Welcome to ICon Select!

Have you ever wanted to have an easy to use component that looks exactly (almost) like a select tag with the added benefit of showing icons instead of words? Have you wanted to transform a select tag into a more meaningful drop-down when it comes to have a list of images to pick? If so, then welcome to Icon Select!

NOTE: Starting with version 1.1.0 this library is compatible with Angular 6+.

NOTE: Starting with version 1.2.1 you need to import this library through @sedeh/icon-select.

Live Demo | Source code | Comments/Requests

Dependencies

MODULE:
    ISelectModule

EXPORTS
    ISelect,
    ISelectDirective
    
DEPENDENCIES: 
    "font-awesome": "^4.7.0"

So... How it can be done?

Run npm install icon-select in your application. and do either of the following:

Sample usage through using i-select component or i-select directive.

    <i-select 
      id="backgroundPicker" 
      name="selectedBackground" 
      [size]="6" 
      [multiselect]="false" 
      [entries]="iconpickeData"
      [searchEnabled]="true" 
      (onchange)="updateSelection($event)">
    </i-select>
  
    <select i-select 
        id="overlayPicker1" size="6" name="selectedOverlay"
        [searchEnabled]="false" 
        (change)="updateOverlay($event)" >
      <option *ngFor="let x of iconpickeOverlay" [value]="x.value" [textContent]="x.name"></option>
    </select>

Revision History

Version Description
1.2.1 Updated dependencies.
1.2.0 It was brought to my attention that some users have trouble using my components in their angular 6 environment. Since I had only updated few dependencies when moved to Angular 6, I am thinking dependencies are causing issues. So, for this release, I am updating all dependencies to what Angular 6 applications are expecting to have. Please let me know if this is fixing or not fixing any issues you are facing.
1.1.0 Updated libraries to become compatible with Angular 6+.
1.0.0 Compiled with AOT option and resolved issues.
0.0.1 Initial Release.

It is that simple..!!

Sample view of the component at work! alt text