Vue 에서 FontAwesome 사용하기(npm 설치)

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

 

@fortawesome/vue-fontawesome

참고한 사이트

 

 

 

1. FontAwsome 설치

vscode 하위 터미널에서 아래의 명령어를 사용하여 설치를 진행해준다.

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons

나는 2.x 버전의 Vue를 사용하여 아래의 명령어를 사용하여 추가로 설치를 진행해 주었다.

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

 

 

2.설정

src/main.js 에 가서 아래의 코드를 넣어준다.

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

library.add(faUserSecret)

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

 

여기서 

 

import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

library.add(faUserSecret)

 

이 두 줄을 보면 fontawesome에서 faUserSecret이라는 아이콘을 불러와서 라이브러리에 추가해주었다.

이 과정을 거쳐야지 vue에서 적용하였을 때 보이게 된다.

 

이런식으로  icon을 적용해주면

아래와 같이 아이콘이 뜨는 것을 볼 수 있다.

 

 

3. 아이콘 찾기

https://fontawesome.com/icons

Font Awesome

아래의 사이트에 접속하여 사용하고자 하는 아이콘을 골라주면 된다.

 

search 아이콘을 사용하기 위해 검색 후 상세정보를 보면

이렇게 뜨는 것을 확인할 수 있다.

여기서 fas fa-search에서 fa-search를 가져오면 된다. 단 가져올 시 fa-sarch -> faSearch 가 됨에 주의하면된다.

케밥표기법을 파스칼표기법으로 바꾸어주면 되는 것 같다. 단 첫글자는 소문자로!