https://github.com/shakilahmed0369/ez-tabler-icon-picker

A simple, intuitive icon picker for Tabler Icons, perfect for quick integration and effortless customization.
https://github.com/shakilahmed0369/ez-tabler-icon-picker

iconpicker javascript tabler tabler-icons

Last synced: 3 months ago
JSON representation

A simple, intuitive icon picker for Tabler Icons, perfect for quick integration and effortless customization.

• Host: GitHub
• URL: https://github.com/shakilahmed0369/ez-tabler-icon-picker
• Owner: shakilahmed0369
• Created: 2024-11-13T03:01:24.000Z (11 months ago)
• Default Branch: master
• Last Pushed: 2025-01-08T07:52:07.000Z (9 months ago)
• Last Synced: 2025-04-04T07:24:57.828Z (6 months ago)
• Topics: iconpicker, javascript, tabler, tabler-icons
• Language: JavaScript
• Homepage: https://shakilahmed0369.github.io/ez-tabler-Icon-picker/
• Size: 7.67 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# EZ Tabler Icon Picker

A flexible, easy-to-use icon picker for Tabler Icons.

![banner](https://github.com/user-attachments/assets/883a042f-43f7-45ec-92ae-312aac6b4107)

## Installation

Setup is straightforward:

1. Add **Tabler Icons** to your project.

2. Add **EZ Icon Picker** to your project.

3. Initialize EZ Icon Picker.

### Add the Required Files

Include the following links in your HTML file to load Tabler Icons and EZ Icon Picker:

```html

```

### Load EZ Icon Picker JavaScript

Add the following to load EZ Icon Picker:

```html

```

### Setup the Icon Picker

1.Add a div with a selector class, e.g., .icon-picker.

```html



```


2.Initialize the picker by adding the following JavaScript:

``` javascript

    document.addEventListener('DOMContentLoaded', () => {

        new EzIconPicker({

            selector: '.icon-picker'

        });

    });

```

### Full Example Code

Here’s the complete HTML setup for the EZ Tabler Icon Picker:

``` html

    

    

    

    

    Tabler Icon Picker

    

    


    

    

    

        document.addEventListener('DOMContentLoaded', () => {

            new EzIconPicker({

                selector: '.icon-picker'

            });

        });

    

```

### Properties

`data-name` - Specifies the name of the input field, useful for form submissions.

`data-icon` - Allows pre-selecting an icon by specifying its class name

## Example Usage

To create an icon picker with a default icon, use the following code:

``` html



```