[뷰(Vue)] font awesome

html에서 아이콘을 사용할 때 종종 사용했던 font awsome.

검색 아이콘이 필요해서 오랜만에 다시 들어갔더니 vue 버전이 있어서 기록해 둔다.

홈페이지에 친절하게 잘 나와있긴 하지만..

https://fontawesome.com/docs/web/use-with/vue/#_1-add-svg-core

Set Up with Vue

---

먼저 라이브러리를 설치해야 한다.

//core 설치
npm install --save @fortawesome/fontawesome-svg-core

//icon packages 설치
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/free-regular-svg-icons
npm install --save @fortawesome/free-brands-svg-icons

나는 yarn보단 npm install을 주로 하기 때문에 npm install로.

yarn을 사용할 경우 사이트에 명령어가 잘 나와있다.

pro(유료) 버전을 사용할 경우에도 명령어가 다르니 사이트를 꼭 확인하세요..

이제 설치가 끝났..지 않다.

컴포넌트 추가를 위해 또 설치를 해야 한다.

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

나는 현재 vue 2를 사용 중이기 때문에 끝이 2.

3을 사용하게 되면 끝자리만 3으로 바꿔주면 된다.

---

아직 끝이 아니다.

설치가 끝났으면 import해서 사용할 수 있게 설정해야 한다.

/* main.js에 설정 */

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

library.add(faUserSecret)
Vue.component('font-awesome-icon', FontAwesomeIcon)

Vue.config.productionTip = false

참고로 여기서 faUserSecret 부분은 특정 아이콘 명을 말한다.

그대로 따라하지 말기..

내가 쓰려는 아이콘명으로 넣으면 된다.

이제 font awesome에서 원하는 아이콘을 선택한 후 설정하고 vue 코드를 복사한다.

원하는 부분에 붙여 넣으면 쉽게 적용 완료!

---