You can take Font Awesome with Vue to the next level by learning a little more about the behind-the-scenes stuff that we do to load icons and fine-tuning it to exactly what you need.

Advertisement

Performance

We've worked hard to make Font Awesome as performant and lean as possible - by splitting styles up, using tree shaking, keeping code as light as possible - but you may have specific needs for your project and that's where these tips may come in handy.

Tree shaking

Keeping the bundles small when using import { faCoffee } relies on tree-shaking. If you are not using a tool that supports tree shaking you may end up bundling more icons than you intend.

If the tree shaking isn't automatically working for you, here is an alternative import syntaxes:

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons/faCoffee'
import { faSpinner } from '@fortawesome/pro-light-svg-icons/faSpinner'
 
library.add(faCoffee, faSpinner)

Note that the icon name is added again at the end of each line. How does this work? We have individual icon files like node_modules/@fortawesome/free-solid-svg-icons/faCoffee.js that contain just that specific icon.

Importing an entire style

If you're using a lot of icons all in one style, you can import the entire style - but use with caution as it can be thousands of icons.

import { fa-solid } from '@fortawesome/free-solid-svg-icons'
 
library.add(fa-solid)

This will add the entire set of free solid style icons to your library. Be careful with this approach as it may be convenient in the beginning but your bundle size will be large. We highly recommend that you take advantage of subsetting through tree shaking.

Advertisement

Advanced-Level Adding Icons

Computed property

You can explicitly define an icon through a computed property:

<template>
  <div id="app">
    <font-awesome-icon :icon="appIcon" />
  </div>
</template>
 
<script>
import { faChessQueen } from '@fortawesome/free-solid-svg-icons'
 
export default {
  name: 'App',
 
  computed: {
    appIcon () {
      return faChessQueen
    }
  }
}
</script>

Alternative component prop

With Vue, you can tell your component to resolve another component explicitly.

<template>
  <div>
    <font-awesome-icon :icon="myIcon" />
  </div>
</template>
 
<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faMug } from '@fortawesome/pro-solid-svg-icons'
 
export default {
  name: 'MyComponent',
 
  data () {
    return {
      myIcon: faMug
    }
  },
 
  components: {
    FontAwesomeIcon
  }
}
</script>
Advertisement

The More You Know

Why a library?

Explicitly selecting icons 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 used in an average app or project.

The Font Awesome Javascript API

Are you hungry for more knowledge? You can deep dive into our Font Awesome SVG Core and Javascript API docs.

You're viewing the Version 6 Beta

It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!