Font Awesome SVG Icons Component for Vue.js

Awesome SVG icon plugin for Vue.js, with Font Awesome icons, included. Font Awesome 5 has separated all the icons into several packages. Vue-Awesome is built on all free icons, which includes all free icons from 3 icon packs: regular, solid, and branding. Since the solid pack contains the largest number of icons, we organize all the Vue-Awesome icons.

font awesome icons, font awesome npm, font awesome vue, font awesome cdn, vue font awesome icons list, how to use font awesome icons

How to make use of it:

Install and download:

$ npm install vue-awesome

1. Import an icon of your choice or all icons as follows:

// import flag icon
import 'vue-awesome/icons/flag'

// import all icons
import 'vue-awesome/icons'

2. Import and register the component.

import Icon from 'vue-awesome/components/Icon'

Vue.component('v-icon', Icon)

// or locally
export default {
  components: {
    'v-icon': Icon
  }
}

3. Use symbols as components:

<v-icon name="flag" />

4. Props available.

name: {
  type: String,
  validator (val) {
    if (val && !(val in icons)) {
      warn(
        `Invalid prop: prop "name" is referring to an unregistered icon "${val}".\n` +
          `Please make sure you have imported this icon before using it.`,
        this
      )
      return false
    }
    return true
  }
},
title: String,
scale: [Number, String],
spin: Boolean,
inverse: Boolean,
pulse: Boolean,
flip: {
  validator (val) {
    return val === 'horizontal' || val === 'vertical' || val === 'both'
  }
},
label: String,
tabindex: [Number, String]

Vue Font Awesome Component Plugin/Github, vue font awesome add all icons