DEV Community

Cover image for Vue 3: Add font-awsome icons
Du Hoang
Du Hoang

Posted on

Vue 3: Add font-awsome icons

Tech detail:

  • Ubuntu 22.04
  • VueJS 3
  • Font-awsome
  • TypeScript

URLs:
https://www.npmjs.com/package/@fortawesome/vue-fontawesome
https://fontawesome.com/icons

Install

Your package.json should looked like this



"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/vue-fontawesome": "^3.0.0-5",


Enter fullscreen mode Exit fullscreen mode

Run these commands (these might have more than what you need)



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@prerelease

Enter fullscreen mode Exit fullscreen mode




Update main.js

Your src/main.ts should looked like this



import { createApp } from "vue";
import { createPinia } from "pinia";

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

import { library } from "@fortawesome/fontawesome-svg-core";
import { faTrashCan } from "@fortawesome/free-solid-svg-icons"; <--- Add any icons you need here
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

const app = createApp(App);

library.add(faTrashCan);
app.component("font-awesome-icon", FontAwesomeIcon);

app.use(createPinia());
app.use(router);

app.mount("#app");

Enter fullscreen mode Exit fullscreen mode




Usage

A file which uses the trash icon will looked like this



<template>
<div class="delete-item">
<slot id="id"><font-awesome-icon :icon="['fas', 'trash-can']" /></slot>
</div>
</template>

<style scoped>
.delete-item {
margin: 1rem;
padding: 0.5rem;
}
</style>

Enter fullscreen mode Exit fullscreen mode




Result

Image description

Top comments (0)