[vue.js] fortawesome 사용하기

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

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

@fortawesome/vue-fontawesome

 

<npm 설치>

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/vue-fontawesome@latest

 

 

 

<src/main.js>

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

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

library.add(faUserSecret, faSearch, faUser)

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

Vue.config.productionTip = false

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

-----------------------------------------------------------------------------------------------

※ import 빨간색 표시부분 아이콘을 추가 

 

<페이지 사용>

<font-awesome-icon icon="user-secret" />
<font-awesome-icon icon="user" /> 
<font-awesome-icon icon="search" />

 

 

----------------------------------------------------------------------------------------------

<아이콘명 참조>

https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid 

Font Awesome

https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=brands 

Font Awesome