How to add an icon in VueJS?

Hi Friends 👋,

Welcome To SortoutCode! ❤️

Today, I am going to show you How do you add an icon in VueJS?

Table of Content

• Setup the Vue (Optional)
• Create FirstComponent.vue and import it into App.js
• Setup fortawesome libraries
• Call icon in the component

This article will guide you to how do I add icon in vueJS.

Setup the Vue (Optional)

First, we have to install the Vue project, I had installed the vueJS in my system. If you haven’t installed or have any problem with installation you can follow this article, it will show you step by step process of installation.

How to Install the VueJS project?

Create FirstComponent.vue and import it into App.js

Create the new component in the src/components/ components folder. the component name is FirstComponent.vue and imported into the App.js file:

App.js

<template>
  <div id="app">
    <FirstComponent />
  </div>
</template>

<script>
import FirstComponent from "./components/FirstComponent.vue";
export default {
  name: "App",
  components: {
    FirstComponent,
  },
};
</script>

Setup fortawesome libraries

First, we have to install these three libraries @fortawesome/fontawesome-svg-core , @fortawesome/vue-fontawesome and @fortawesome/free-solid-svg-icons in our project.

`npm i @fortawesome/fontawesome-svg-core`

`npm i @fortawesome/vue-fontawesome`

`npm i @fortawesome/free-solid-svg-icons`

After the installation of these libraries is finished. We have to register the libraries into the main.js file. We are need to import the font awesome core. After that import the fontawesome component. At last import the fontawesome specific icons which is we are going to use in our project.

After that add the icons to a library that is faUserSecret, faHeart.And register the FontAwesomeIcon component. Let’s see the code:

import Vue from "vue";
import App from "./App";

/* import the fontawesome core */
import { library } from "@fortawesome/fontawesome-svg-core";

/* import font awesome icon component */
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

/* import specific icons */
import { faUserSecret, faHeart } from "@fortawesome/free-solid-svg-icons";

/* add icons to the library */
library.add(faUserSecret,faHeart);

/* add font awesome icon component */
Vue.component("font-awesome-icon", FontAwesomeIcon);

Vue.use(BootstrapVue);

Vue.config.productionTip = false;

new Vue({
  el: "#app",
  components: { App },
  template: "<App/>"
});

Call icon in the component

Now you can call the icons using these syntax icon="fa-solid fa-user-secret" in your font-awesome-icon component. You can add these icons where you want in your project. Let’s see the code example of two icons that is fa-user-secret and the second one is fa-heart:

FirstComponent.js

<template>
  <div>
    <font-awesome-icon icon="fa-solid fa-user-secret" />
    <font-awesome-icon icon="fa-solid fa-heart" />
  </div>
</template>
<script>
export default {
  name: "FirstComponent",
};
</script>

For now, let’s check the output.

All the best 👍.