vue.js 에서 icon 설정하기 (font awesome)

1. Install

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

 

2. import 

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

// 사용할 icon
import { faAngleDown } from '@fortawesome/free-solid-svg-icons'

// 사용할 icon 라이브러리에 추가
library.add(faAngleDown)

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

사용할 아이콘을 일일히 import 해줘야한다니.. 

다른 방법도 있지 않을까 담에 알아봐야지

 

3. 사용

<font-awesome-icon icon="angle-down" />

 

 

 

< 참고 URL >

 

https://github.com/FortAwesome/vue-fontawesome

FortAwesome/vue-fontawesome

 

 

font awsome에서 사용할 icon을 찾아볼 수 있다.

https://fontawesome.com/

Font Awesome