@fortawesome/vue-fontawesome

What is @fortawesome/vue-fontawesome?

@fortawesome/vue-fontawesome is a Vue.js component for integrating Font Awesome icons into your Vue applications. It allows you to easily use Font Awesome icons in your Vue components, providing a wide range of icons and customization options.

What are @fortawesome/vue-fontawesome's main functionalities?

Basic Icon Usage

This feature allows you to use Font Awesome icons in your Vue components. You need to import the necessary icons and add them to the library, then use the <font-awesome-icon> component to display the icon.

<template>
  <div>
    <font-awesome-icon :icon="['fas', 'coffee']" />
  </div>
</template>

<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

library.add(faCoffee)

export default {
  components: {
    FontAwesomeIcon
  }
}
</script>

Customizing Icon Size

This feature allows you to customize the size of the icons. You can use the `size` prop to set the size of the icon, such as `1x`, `2x`, `3x`, etc.

<template>
  <div>
    <font-awesome-icon :icon="['fas', 'coffee']" size="3x" />
  </div>
</template>

<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

library.add(faCoffee)

export default {
  components: {
    FontAwesomeIcon
  }
}
</script>

Using Different Icon Styles

This feature allows you to use different styles of icons, such as solid, regular, and light. You need to import the icons from the respective Font Awesome packages and add them to the library.

<template>
  <div>
    <font-awesome-icon :icon="['fas', 'coffee']" />
    <font-awesome-icon :icon="['far', 'coffee']" />
    <font-awesome-icon :icon="['fal', 'coffee']" />
  </div>
</template>

<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee as fasCoffee } from '@fortawesome/free-solid-svg-icons'
import { faCoffee as farCoffee } from '@fortawesome/free-regular-svg-icons'
import { faCoffee as falCoffee } from '@fortawesome/pro-light-svg-icons'

library.add(fasCoffee, farCoffee, falCoffee)

export default {
  components: {
    FontAwesomeIcon
  }
}
</script>

Other packages similar to @fortawesome/vue-fontawesome

vue-awesome

vue-awesome is a Vue.js component for displaying Font Awesome icons. It provides a simple way to use Font Awesome icons in your Vue applications, similar to @fortawesome/vue-fontawesome. However, it may not support the latest Font Awesome features and icons as comprehensively as @fortawesome/vue-fontawesome.

vue-fontawesome-icon

vue-fontawesome-icon is another Vue.js component for integrating Font Awesome icons. It offers similar functionality to @fortawesome/vue-fontawesome, allowing you to use Font Awesome icons in your Vue components. The main difference is in the API and the way icons are imported and used.

README

vue-fontawesome

Font Awesome 5 Vue component

Installation

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/vue-fontawesome

or

$ yarn add @fortawesome/fontawesome
$ yarn add @fortawesome/vue-fontawesome

Usage

The basics

The icon property of the FontAwesomeIcon component can be used in the following way:

Shorthand that assumes a prefix of fas:

<font-awesome-icon icon="spinner" />

Explicit prefix (note the Vue bind shorthand because this uses an array):

<font-awesome-icon :icon="['far', 'spinner']" />

Explicit icon definition (this is pseudo-code, see examples below for more detail):

import { faCoffee } from '@fortawesome/fontawesome-free-solid'

<font-awesome-icon :icon="getIcon" />

function getIcon () {
  return faCoffee
}

Using it with Vue

Using an explicit icon offers the advantage of only bundling the icons that you use in your final bundled file. This allows us to subset Font Awesome's thousands of icons to just the small number that are normally used.

Import the specific icons that you need:

<template>
  <div id="app">
    <font-awesome-icon :icon="icon" />
  </div>
</template>

<script>
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
import { faCoffee } from '@fortawesome/fontawesome-free-solid'

export default {
  name: 'FAExample',

  computed: {
    icon () {
      return faCoffee
    }
  },

  components: {
    FontAwesomeIcon
  }
}
</script>

It can be tedious to always import the icons individually so a library can be configured and shorthand can be used when rendering the icon.

Define a library that can be used without explicit imports:

App.js

import Vue from 'vue'
import Main from './Main.vue'
import fontawesome from '@fortawesome/fontawesome'
import brands from '@fortawesome/fontawesome-free-brands'
import { faSpinner } from '@fortawesome/fontawesome-free-solid'

fontawesome.library.add(brands, faSpinner)

new Vue({
  el: '#app',
  render: h => h(Main)
})

FAExample.vue

<template>
  <div id="app">
    <!-- If you are using the "Solid" style you can simply use the icon name -->
    <font-awesome-icon icon="spinner" />
    <!-- Using another style needs a prefix in the following array format -->
    <font-awesome-icon :icon="['fab', 'font-awesome']" />
  </div>
</template>

<script>
export default {
  name: 'FAExample',

  components: {
    FontAwesomeIcon
  }
}
</script>

Features

Basic

Spin and pulse animation:

<font-awesome-icon icon="spinner" spin />
<font-awesome-icon icon="spinner" pulse />

Fixed width:

<font-awesome-icon icon="spinner" fixed-width />

Border:

<font-awesome-icon icon="spinner" border />

List items:

<font-awesome-icon icon="spinner" list-item />

Flip horizontally, vertically, or both:

<font-awesome-icon icon="spinner" flip="horizontal" />
<font-awesome-icon icon="spinner" flip="vertical" />
<font-awesome-icon icon="spinner" flip="both" />

Size:

<font-awesome-icon icon="spinner" size="xs" />
<font-awesome-icon icon="spinner" size="lg" />
<font-awesome-icon icon="spinner" size="6x" />

Rotate:

<font-awesome-icon icon="spinner" rotate="90" />
<font-awesome-icon icon="spinner" rotate="180" />
<font-awesome-icon icon="spinner" rotate="270" />

Pull left or right:

<font-awesome-icon icon="spinner" pull="left" />
<font-awesome-icon icon="spinner" pull="right" />

Advanced

Power Transforms:

<font-awesome-icon icon="spinner" transform="shrink-6 left-4" />
<font-awesome-icon icon="spinner" :transform="{ rotate: 42 }" />

Masking:

<font-awesome-icon icon="coffee" :mask="['far', 'circle']" />

Symbols:

<font-awesome-icon icon="edit" symbol />
<font-awesome-icon icon="edit" symbol="edit-icon" />