Beautiful Icon Picker In JavaScript – Aesthetic

Preview:

Description:

Aesthetic is a beautiful, responsive icon picker that supports almost all open source icon libraries like Font Awesome (Default), Bootstrap Icons, Material Icons, and much more.

It also provides a Vue.js wrapper that you can easily integrate the icon picker into your Vue.js 3 app. You can download the Icon Picker For Vue.js 3 here.

How to use it:

1. Include an icon library on your page.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/VERSION/css/all.min.css" />

2. Include the Aesthetic Icon Picker’s files on the page.

<link rel="stylesheet" href="assets/css/style.css" />
<script src="assets/js/aesthetic-icon-picker.js"></script>

3. Create the HTML for the icon picker.

<div class="icon-picker-wrap" id="icon-picker-wrap">
  <ul class="icon-picker">
    <!-- Clear Button -->
    <li class="icon-none" title="None"><i class="fas fa-ban"></i></li>
    <!-- Select Button -->
    <li id='select-icon' class="select-icon" title="Icon Library"><i class="fas fa-circle"></i></li>
    <!-- Store The Icon Value You Selected -->
    <input type="hidden" name="icon_value" id="icon_value" value="">
  </ul>
</div>

4. Initialize the icon picker and done.

AestheticIconPicker({
  // must be an ID
  'selector': '#icon-picker-wrap', 
  // must be an ID
  'onClick': '#select-icon',  
});

5. Add an additional icon library to the icon picker as follows:

var newIcon = {
    "customIconLib":{
      "regular":{
        "prefix": "customIcon-",
        "icon-style": "custom-regular",
        "list-icon":"custom",
        "icons":["custom-icon-1", "custom-icon-2", ...]
      },
      "solid":{
        "prefix": "customIcon-",
        "icon-style": "custom-solid",
        "list-icon":"custom",
        "icons":["custom-icon-1", "custom-icon-2", ...]
      },
      // ...
    }
}

AestheticIconPicker({
  // must be an ID
  'selector': '#icon-picker-wrap', 
  // must be an ID
  'onClick': '#select-icon',  
  // register the custom icon library
  'iconLibrary': newIcon
});