Using FontAwesome 5.1.x for Vue.js

June 1, 2019

Install libraries.

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/vue-fontawesome

NOTE: npm equivalent of yarn add is npm install PACKAGE --save

Initialize

import { library } from '@fortawesome/fontawesome-svg-core';
import { faSpinner, faCheck } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

library.add(faSpinner, faCheck);
Vue.component('font-awesome-icon', FontAwesomeIcon);

Usage in vue Single File Components (.vue)

  • Rotating Spinner
  • Check
<template>
  <div>
    <font-awesome-icon :icon="['fas', 'spinner']" pulse size="lg" />
    <font-awesome-icon :icon="icon" />
    <font-awesome-icon icon="computedIcon" />
  </div>
</template>

<script>
import { faCheck } from '@fortawesome/free-solid-svg-icons';

export default {
  data () {
    return {
      icon: faCheck
    }
  },
  computed: {
    computedIcon () {
      return faCheck
    }
  }
}
</script>

References:

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.