itslit-tech / vue-icon-picker

A FontAwesome Icon Picker for Vue.js

Vue Icon Picker

A Vue.js icon picker component to easily pick FontAwesome 5 Icons. Currently, only the free version of FontAwesome5 is available.

Table of contents

• Installation
• Usage
• Configuration
  • Options
• Events

Installation

Install using npm

npm install --save @aalicki/vue-icon-picker

Then Register The Component Globally:

import Vue from 'vue';
import VueIconPicker from '@aalicki/vue-icon-picker';

Vue.component('vue-icon-picker', VueIconPicker)

OR use it in a Component:

import VueIconPicker from '@rightbraintechbd/vue-icon-picker';

export default {
    name: 'YourFeatureComponent',
    components: {
        'vue-icon-picker': VueIconPicker
    },
}

Usage

Usage:

<vue-icon-picker />

Configuration

You can also pass Options as props in the vue-icon-picker component as you can see the example below

<vue-icon-picker :icon-preview="false" />

Options

/**
 * The Text which will be shown to the Button
 */
button: {
    type: String,
    default: 'Pick A Icon'
},

/**
 * Button Background Color
 */
bgColor: {
    type: String,
    default: '#212121'
},

/**
 * Button Text Color
 */
txtColor: {
     type: String,
     default: '#e1e1e1'    
}

/**
 * Whether the Icon should be displayed after selection
 */
iconPreview: {
    type: Boolean,
    default: true
}

Example for setting the background color (note that the hexidecimal codes can be short or long form):

<vue-icon-picker bgColor="#fff" txtColor="#000000"/>

Events

VueIconPicker will emit a selected(icon) event when user selects an icon.

<vue-icon-picker @selected="onIconSelected" />

{
    methods: {
        onIconSelected(icon) {
            // your code here
        }
    }
}

It will emit an Object containing icon data like { type, name }

{ type: 'fab', name: 'facebook' }

Roadmap & Plans

• Clean up SASS
• Optimize picker to be more responsive
• Night mode
• Allow you to easily clear the icon if preview is enable with a triggered event.
• Allow you to limit types of icon results (Branding, Regular, Solid, etc...)

This is my first Open Source project, I'll happily take in feedback, requests and issues.

MIT