fontAwesomePicker

A Vue.js component to easily pick a FontAwesome icon and use it as you wish.

Table of contents

• Installation
• Usage
• Options
• Support for FontAwesome 4

Installation

npm install --save font-awesome-picker

Usage

Make sure you are already using FontAwesome > 5 with SVG with JavaScript(https://fontawesome.com/get-started) option.

Install the component:

import Vue from 'vue';
import { fontAwesomePicker } from 'font-awesome-picker';
 
export default {
    name: 'yourComponent',
    components: {
        'font-awesome-picker': fontAwesomePicker,
    },
}

Instance as a custom element:

<font-awesome-picker></font-awesome-picker>

If you're not using Webpack, import style:

@import 'node_modules/font-awesome-picker/dist/font-awesome-picker';

Options

Searchbox

To change the search box placeholder:

<font-awesome-picker seachbox="search here"></font-awesome-picker>

Result

To get the result from the fontAwesomePicker

<font-awesome-picker v-on:selectIcon="yourFunction"></font-awesome-picker>

{
    methods: {
        yourFunction(selectedIcon) {
            console.log('selected', selectedIcon)
        },
    },
}

It will emit an object as a result:

{
    className: 'fa-home',
    cssValue: 'F015',
}

Support

To support version 4 or less of FontAwesome, please use version 1.1.6

npm install --save font-awesome-picker@1.1.6

MIT