Font Awesome Icon Picker For Vue.js

Install & Download:

# Yarn 
$ yarn add vfa-picker 
# NPM 
$ npm install vfa-picker --save

Description:

A Font Awesome icon picker which enables the user to select Font Awesome icons from a searchable picker popup and insert the CSS class and/or Unicode into the input field.

Work with the latest Font Awesome Iconic Font (5+).

How to use it:

To get started, make sure you have the latest Font Awesome Iconic Font loaded.

<link rel="stylesheet" href="/path/to/fontawesome/all.css" />

Install and import the Font Awesome Icon Picker.

import Vue from "vue";
import VueFontAwesomePicker from "vfa-picker";

Regist the component.

Vue.use(VueFontAwesomePicker);

Use the component.

<template>
  <vfa-picker is-both="true" v-bind.sync="category">
    <template v-slot:activator="{ on }">
      <input v-model="category.class" @click="on" placeholder="Icon Class" type="text" />
      <input v-model="category.unicode" @click="on" placeholder="Icon Unicode" type="text" />
    </template>
  </vfa-picker>
</template>
<script>
export default {
    name: "BasicBothExample",
    data() {
      return {
          category: {
              class: undefined,
              unicode: undefined
          }
      }
    }
}
</script>

Props.

{
isUnicode: {
  type: [Boolean, String],
  required: false,
  default: false
},
isBoth: {
  type: [Boolean, String],
  required: false,
  default: false
},
itemsPerPage: {
  type: Number,
  required: false,
  default: 36
},
closeOnContainerClick: {
  type: Boolean,
  required: false,
  default: true
},
width: {
  type: String,
  default: "80%"
},
height: {
  type: String,
  default: "70%"
},
value: {
  type: String
},
only: {
  type: Array,
  default() {
    return ["solid", "regular", "brands"];
  }
},
searchable: {
  type: [Boolean, String],
  default: true
}

Trigger an event when the icon changes.

this.$emit("input", {
  class: icon.class,
  unicode: icon.unicode
});

Preview: