vue-font-awesome-picker v0.1.2

ahadoo-category

Installation

npm install vue-font-awesome-picker --save

Usage

import Vue
import faIconsModal from 'vue-font-awesome-picker'
Vue.use(faIconsModal)


// and somewhere in your template

       <v-app>
      <fa-icons-modal > 
        <template #pickerSlot> </template>
      </fa-icons-modal>
  </v-app>

When an icon is selected, the value is emitted via 'icon-selected' event. To get the value add an event listener to the component as shown in the snippet below.

<template>
 <fa-icons-modal  @icon-selected="selectedFontAwesomeIcon = $event.icon"> 
 </fa-icons-modal>
</template>
<script>
export default {
  name: 'App',
  data: () => ({
    selectedFontAwesomeIcon: '', // the selected icon value is stored in this variable
  }),
  methods:{
  }
};
</script>

The value emitted by the event could be either the icon class name or Unicode. You can set the 'isUnicode' value to true to receive Unicode values. By default the value is the class name.

// the default is false
 <fa-icons-modal :isUnicode="true"> 
 </fa-icons-modal>

Customization

The component has two slots, #pickerSlot and #dialogSlot. Both have default slots assigned, if those are good enough, you can use them. If not see below for customization guidelines.

pickerSlot

When customizing this slot, make sure to add a trigger to the dialogSlot using the 'on' parameter. See example below.

// 'selectedIcon' is an object with properties; id, svg, unicode.
// 'on' will activate the dialog

 <template #pickerSlot="{selectedIcon, on}" >
          <v-text-field   @click.stop="on" v-model="selectedIcon.id" label="Icon Id">
      <div slot="prepend" style="width: 1.5em;" v-html="selectedIcon.svg"></div>
       </v-text-field>
          </template>

dialogSlot

Customization for this slot can be a little tricky. see example below. If you need to customize colors and some simple properties check out the other customizations section

 <template #dialogSlot="{dialog, searchQuery, filterIcons,onClearClicked, displayedIcons, pickIcon, page,incrementPage,decrementPage, pageLength}">
            <v-dialog
      v-model="dialog">
      <v-card>
        <v-card-title>
          <span class="headline">Font Awesome</span>
        </v-card-title>
        <v-card-text>
          <v-container grid-list-md>
            <v-layout full-width>
                <v-flex sm4>
                    <v-text-field
                        v-model="searchQuery"
                        @keyup="filterIcons()"
                        label="Search icon.."
                        clearable
                        @click:clear="onClearClicked"
                        height="20px"
                        hide-details
                        color="white"
                        flat
                        solo-inverted
                        prepend-inner-icon="search"
                    ></v-text-field>
                </v-flex>
            </v-layout>
               <v-layout wrap>
                <v-flex max-width="60px" v-for="(icon, index) in displayedIcons" :key="index">
                    <v-btn
                        @click.stop="pickIcon(Object.keys(icon)[0])"
                        text outlined class="px-0">
                        <div style="width: 1.5em;" v-html="icon[Object.keys(icon)[0]]['svg'][icon[Object.keys(icon)[0]].styles[0]].raw">
                        </div>
                    </v-btn>
                </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>
      <v-card-actions>
        <v-layout justify-center>
        <v-flex xs8>
          <v-container max-width="300">
            <p>{{page}} of {{pageLength}}</p>
            <v-btn @click="incrementPage">+</v-btn>
            <v-btn @click="decrementPage">-</v-btn>
          </v-container>
        </v-flex>
        </v-layout>
        </v-card-actions>
      </v-card>
    </v-dialog>
          </template>

Other Customizations

you can make simple customizations to the default dialogSlot by setting props in the component.

customDialog

// default values for customDialog prop
{
  headline:"vue-font-awesome picker",
  background:"white",
  iconColor:"grey"
}

customSearchBox

// default values for customSearchbox prop
{
  label:"search...",
  color:"white",
  flat:true,
  dark:false,
  solo_inverted:true
}

customPagination

// default values for customPagination prop
{
  color:"teal",
  dark:false
}

modifying icons per page

you can also modify how many icons are displayed per page using the 'perPage' prop

 <fa-icons-modal :perPage="50"> 
 </fa-icons-modal>