How to add an icon in VueJS?
January 12, 2023Hi 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 👍.