font-awesome-picker

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
font-awesome-picker
1512.0.05 years ago5 years agoMinified + gzip package size for font-awesome-picker in KB

Readme

fontAwesomePicker
npm npm vue2
A Vue.js component to easily pick a FontAwesome icon and use it as you wish.
print screen

Table of contents

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