Vue fontawesome 사용하기

vue에서 fontawesome을 활용해서 편하게 아이콘을 추가해서 쓰려고 했는데,

이것저것 해줘야 하는 게 있길래 정리할 겸 공유한다.

(참고로 vue 3.X 기준으로 작성되었다)

 

vue 프로젝트 파일을 만들면서 같이 만들어진 main.js에 최하단에 첨부한 링크 속 설명을 참고해서 작성했다.

<코드 전문>

/* Set up using Vue 3 */

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

/* 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 {

  faGear,

  faToggleOn,

  faToggleOff

} from '@fortawesome/free-solid-svg-icons'

/* add icons to the library */

library.add(faGear, faToggleOn, faToggleOff)

createApp(App)

  .use(store)

  .use(router)

  .component('font-awesome-icon', FontAwesomeIcon)

  .mount('#app')

위에 5줄은 원래 작성되어 있던 것이다.

밑에 코드들을 추가해준 것인데, 여기서 다른 것들은 그대로 사용하고

/* import specific icons */

import {

  faGear,

  faToggleOn,

  faToggleOff

} from '@fortawesome/free-solid-svg-icons'

/* add icons to the library */

library.add(faGear, faToggleOn, faToggleOff)

위의 세가지(faGear, faToggleOn, faToggleOff)는 

https://fontawesome.com/icons 에서 그때그때 필요한 아이콘을 검색해서 추가해주면 된다.

예를 들어서 gear를 치면 여러 검색 결과가 뜨고 그 중 마음에 드는 걸 클릭하면

이런 식으로 뜨는데, 여기서 가운데 짙은 청록색 박스 속 Vue를 클릭하면, vue에서 template에 그대로 복붙해서 쓰면 되는 코드가 친절하게 제공된다.

 

그러면 그걸 보고 위에처럼 main.js에다가 faGear를 위의 두군데(import 하는 곳에 하나, library에 add 해주는 곳에 하나 <= @매번 할 때마다 얘를 자꾸 빼먹는다. 혹시 내가 이 작업을 해준 것 같은데 아이콘이 안 뜬다면 add 해줬는지 확인해주자@)에 추가해준다.

 

이때 Kebab case(-로 여러 단어를 이어서 표기)인 fa-gear를 camel case(두번째 단어부터 첫글자를 대문자로 표기)으로 고쳐서 쓰면 되는 듯하다.

 

그리고 내가 쓰려는 vue 파일로 가서, 위의 사진 속 코드를 template 속에 입력하면 아이콘이 잘 나온다.

 

참고 : https://fontawesome.com/docs/web/use-with/vue/add-icons