Font Awesome 5 as a component for Vue JS
Tags: vue, javascript, typescript
Published: 2020-05-04 18:19:06

# Introduction

Have ever you installed this package?
```
@fortawesome/fontawesome-free
```

And imported those packages like this?
```
import "@fortawesome/fontawesome-free/css/all.css";
import "@fortawesome/fontawesome-free/js/all.js";
```

And somehow, used the icons like this?
```html
<i class="fa fa-image"></i>
```

If you encountered the same problem where the icons are not updating dynamically using these packages, this one is for you.

#Solution
Use **Font Awesome 5 Vue component**
[Full documentation](https://github.com/FortAwesome/vue-fontawesome)

### **Step 1**: Install packages
```
$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save @fortawesome/free-regular-svg-icons
$ npm i --save @fortawesome/vue-fontawesome
```

As you can see, there are different FontAwesome packages available for use.
 1. Solid
 2. Regular
 3. Brands

If you are a Subsriber of Font Awesome Pro, you can install these packages as well.
```
$ npm i --save @fortawesome/pro-solid-svg-icons
$ npm i --save @fortawesome/pro-regular-svg-icons
$ npm i --save @fortawesome/pro-light-svg-icons
$ npm i --save @fortawesome/pro-duotone-svg-icons
```

### **Step 2**: Import
Go to your main js/ts file `src/main.js` or in my case, `src/main.ts` as an entry point file

```typescript
import Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(fab, fas, far);

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

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");
```
This will allow you to use all the icons inside those packages. But the documentation says it's still better to import the icon you just need to use.

#Usage
After you have successfully imported the packages you should now be able to use them in your `Vue` template files.

Solid icons: `@fortawesome/free-solid-svg-icons`
```html
<font-awesome-icon :icon="['fas', 'image']" />
<font-awesome-icon :icon="['fas', 'user']" />
```

Regular icons: `@fortawesome/free-regular-svg-icons`
```html
<font-awesome-icon :icon="['far', 'image']" />
<font-awesome-icon :icon="['far', 'user']" />
```

Branch icons:`@fortawesome/free-brands-svg-icons` 
```html
<font-awesome-icon :icon="['fab', 'twitter']" />
```


#Extra
You can also specify the icon you just want to use.
```typescript
import Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { faUserAstronaut } from '@fortawesome/free-solid-svg-icons'
import { faUser } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faTwitter, faUserAstronaut, faUser);

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

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");
```

Solid icons:
```html
<font-awesome-icon icon="user-astronaut"/>
```

Regular and Brand icons should be implemented the same as the above
```html
<font-awesome-icon :icon="['far', 'user']" />
<font-awesome-icon :icon="['fab', 'twitter']" />
```
The only difference is, you cannot use any icons aside from what icons are imported.

This codes should not show any icons on your page using specific icon imports
```html
<font-awesome-icon :icon="['far', 'user-secret']"/>
<font-awesome-icon :icon="['fab', 'facebook']" />
```

For the full documentation of the installation just click this [link](https://github.com/FortAwesome/vue-fontawesome)

If you have questions, concerns, or additional about this topic, just send me a DM on my [twitter](https://twitter.com/KarloDelaRosa3).

Thank you! Happy coding!