vue-material-design-icon-picker

VueMaterialDesignIconPicker

A Vue.js icon picker component to easily pick a MaterialDesignIcon & use it.

Table of contents

• Installation
• Usage
• Configuration
  • Options
• Events

Installation

Install using npm

npm install --save vue-material-design-icon-picker

OR use it via cdn

<script src="https://unpkg.com/vue-material-design-icon-picker@1.0.0/dist/vue-material-design-icon-picker.min.js"></script>

Then Register The Component Globally:

import Vue from 'vue';
import VueMaterialDesignIconPicker from 'vue-material-design-icon-picker';

Vue.component('vue-material-design-icon-picker', VueMaterialDesignIconPicker)

OR use it in a Component:

import VueMaterialDesignIconPicker from 'vue-material-design-icon-picker';

export default {
    name: 'YourMaterialDesignComponent',
    components: {
        'vue-material-design-icon-picker': VueMaterialDesignIconPicker
    },
}

Usage

Use it like:

<vue-material-design-icon-picker />

Configuration

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

<vue-material-design-icon-picker :icon-preview="false" :colorMdi="32C3BC" :iconPlaceholder="bone-off" />

Remember that all options are optional and you can check the default values below:

Options

/**
 * The Text which will be shown to the Select Icon Button
 */
button: {
    type: String,
    default: 'Escolha um ícone'
},
/**
 * Header Title
 */
title: {
    type: String,
    default: 'Escolha um ícone'
},
/**
 * Whether the Icon should displayed or not
 */
iconPreview: {
    type: Boolean,
    default: true
}

Events

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

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

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