Font Awesome Component For Vue.js

A Vue.js component allows you to insert Font Awesome icons using inline SVG.

How to use it:

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 icons as components:

<v-icon name="flag" />

4. Available props.

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]

Preview:

Changelog:

v4.3.1 (05/20/2020)

• Fix that single icon imports wasn’t working since 4.2.0.

Download Details:

Author: Justineo

Live Demo: https://justineo.github.io/vue-awesome/demo/

Download Link: https://github.com/Justineo/vue-awesome/archive/master.zip

Official Website: https://github.com/Justineo/vue-awesome

Install & Download:

$ npm install vue-awesome