[Vue.js] Font Awesome 아이콘 라이브러리

1. 코어 설치

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

Free SVG Icon Package 추가 설치

Set Up with Vue

When using Font Awesome with Vue.js, you can put our official vue-fontawesome component to work to make everything just right.

https://docs.fontawesome.com/web/use-with/vue

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

Vue Component 추가

# Vue 3.x 선택
npm i --save @fortawesome/vue-fontawesome@latest-3

2. main.js에 라이브러리 등록

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

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

// 사용할 아이콘 불러오기
import { faBarsStaggered, faLocationDot } from '@fortawesome/free-solid-svg-icons'

// 아이콘 등록하기(여러 개 가능)
library.add(faBarsStaggered, faLocationDot);

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

• main.js에 추가할 때 하이픈( - ) 은 사용 불가
• ['fas', 'bars-staggered'] → faBarsStaggered

3. 검색으로 아이콘 태그 이름 확인

Find Icons with the Perfect Look & Feel | Font Awesome

Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new Sharp Solid icons, available in Font Awesome 6 Pro.

https://fontawesome.com/icons

<font-awesome-icon :icon="['fas', 'bars-staggered']" />

4. 활용

<template>
    <nav class="navbar">
        <button class="toggle">
            <font-awesome-icon class="icon" :icon="['fas', 'bars-staggered']" style="color: #000;" />
        </button>
    </nav>
</template>