[VUE + TYPESCRIPT] font-awesome 설치

VUE.JS 목록

 

설치

## vue 2.x
$ npm i --save @fortawesome/vue-fontawesome@latest

## vue 3.x
$ npm i --save @fortawesome/vue-fontawesome@prerelease

## free 버전
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save @fortawesome/free-regular-svg-icons

## pro 버전
$ npm i --save @fortawesome/pro-solid-svg-icons
$ npm i --save @fortawesome/pro-regular-svg-icons
$ npm i --save @fortawesome/pro-light-svg-icons
$ npm i --save @fortawesome/pro-duotone-svg-icons

 

main.ts

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faAngleDown, faAngleUp } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faAngleDown, faAngleUp)

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

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

 

<template>
  <div>
    <font-awesome-icon icon="fa-angle-down" />
    <font-awesome-icon icon="fa-angle-up" />
  </div>
</template>

 

https://fontawesome.com/search?m=free&s=brands%2Csolid 

Font Awesome

 

VUE.JS 목록