Setup Font Awesome di Vue 3

Programming

Oleh Administrator 05 Mei 2023

Ketika kalian ingin menggunakan Font Awesome untuk project Vue kalian, kalian harus melakukan beberapa installasi library yang dibutuhkan. Kalian bisa menggunakan NPM atau Yarn, untuk melakukan installasinya.

Menambahkan SVG Core

Pertama-tama kalian harus menginstall core package dari Font Awesome agar icon yang terdapat di Font Awesome bisa kalian pakai.

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

yarn add @fortawesome/fontawesome-svg-core

Menambahkan Package Icon

Setelah selesai, kalian harus menginstall package icon yang kalian mau, bisa pake yang bayar atau gratis, disini kita pakai yang gratis aja ya.. karena biar profit kalau kata temen mimin

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

# Free icons styles
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons

Menambahkan ke Dalam Komponen Vue

Yang terakhir, kalian install Font Awesome ke dalam Komponen Vue.

npm i --save @fortawesome/vue-fontawesome@latest-3

npm i --save @fortawesome/vue-fontawesome@latest-3

Setelah itu semua, kita coba menambahkan fa-icon kedalam project vue kita.

Setup Library Vue

Buat library untuk icon-icon yang kalian butuhkan pada project kalian, pada file src/main.js atau src/main.ts seperti ini

import { createApp } from 'vue'
import App from './App.vue'

/* 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 } from '@fortawesome/free-solid-svg-icons'

/* add icons to the library */
library.add(faUserSecret)

createApp(App)
.component('font-awesome-icon', FontAwesomeIcon)
.mount('#app')