Vue FontAwesome Components Made Simple

Fontawesome is an incredible icon library that allows devs to quickly utilize and display small graphics for decoration, design, and functionality. When I first began development, I would save these icons as svgs and then load them into my projects as images. While this approached works, there is a much better, much simpler, much faster way to use FontAwesome icons in Vue projects.

Photo by Andras Vas on Unsplash

Step 1: Install fontawesome packages

First we need to install the relevant packages. The first and last package in this list are non-negotiable. The 3 packages in the middle can be ommitted or substituted depending on your needs. If you have the pro versin of fontawesome, feel free to use the pro packages. If you only want the solid-svg package (the most popular free package), remove the other two. I personally install all three free packages, but to each their own.

# Fontawesome Core Package
npm i --save @fortawesome/fontawesome-svg-core

# Free Icon Packages
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

# Fontawesome Vue Component
npm i --save @fortawesome/vue-fontawesome@latest-3

Step 2: Import Fontawesome Into Main.js