Font Awesome

Font Awesome contains a variety of resizable svg images for integrating into your site. They currently also have an npm package targetting Vue applications specifically. Below are some steps for getting started with Vue and Font Awesome.

1) Install Font Awesome packages with npm

Execute these commands from the root directory of your project to install the npm packages:

npm i --save @fortawesome/vue-fontawesome
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons

2) Import and use individually in a component

First import the FontAwesomeIcon component from the main vue-fontawesome package. Then import the specific icons that you want to use (search for the icon names on the Font Awesome page here).

Make sure to register FontAwesomeIcon as a component dependency in your Vue file, as well as assigning variables for your desired icons in the data-return section. Finally, use the <font-awesome-icon> tags in your html where desired with the icon props pointing to the correct variables.

<template>
  <div class="collapse">
    <div @click="show=!show;" class="header">
      <slot name="header"></slot>
      <font-awesome-icon v-if="!show" :icon="chevronDown" size="1x" />
      <font-awesome-icon v-else :icon="chevronUp" size="1x" />
    </div>
    <transition>
      <div v-if="show" class="collapse-content">
        <slot name="content"></slot>
      </div>
    </transition>
  </div>
</template>

<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faChevronUp } from '@fortawesome/free-solid-svg-icons'
import { faChevronDown } from '@fortawesome/free-solid-svg-icons'

export default {
  name: 'Collapse',
  components: {FontAwesomeIcon},
  data () {
    return {
      show: false,
      chevronUp: faChevronUp,
      chevronDown: faChevronDown,
    }
  },
}
</script>

3) OR add to library to use across the whole application

Assuming you are using a standard Vue.js SPA, this would go in your main.js file in your project's src directory. First, import library from the fontawesome-svg-core package. Then import the rest of the desired icons and add them to the library. This example also shows the free-brands-svg-icons package, which is a separate npm import and contains logo icons from various companies.

Next, register the font-awesome-icon component with Vue. This allows you to use the <font-awesome-icon> tag in any component's html directly without having to import or register any components there.

import { library } from '@fortawesome/fontawesome-svg-core'
import { faEnvelope, faChevronLeft, faChevronRight, faChevronUp, faChevronDown, faCircle, faTimes, faTools } from '@fortawesome/free-solid-svg-icons'
import { faGithub } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faEnvelope, faChevronLeft, faChevronRight, faChevronUp, faChevronDown, faCircle, faGithub, faTimes, faTools)

Vue.component('font-awesome-icon', FontAwesomeIcon)