How to import fontawsome in vue.js

How to import fontawesome in Vue.js

Installation

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

How to import(in main.js)

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

Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.component('font-awesome-layers', FontAwesomeLayers)
Vue.component('font-awesome-layers-text', FontAwesomeLayersText)

Three types of free icon:

• solid

import { faEye,faEyeSlash } from '@fortawesome/free-solid-svg-icons'

• brand

import { faQq, faWeixin, faGoogle, faFacebookF,faTwitter } from '@fortawesome/free-brands-svg-icons'

• regular

import {faTimesCircle} from '@fortawesome/free-regular-svg-icons'

import as you want

library.add(`  
 `faTimesCircle,`  
 `faGoogle, faFacebookF,faTwitter, faQq, faWeixin,`  
 `faEye,faEyeSlash`
)

How to use in the .vue file

• solid icon:(<i class="fas fa-eye"></i>)
  <font-awesome-icon icon="eye" aria-hidden="true" transform="shrink-1"/>
  or
  <font-awesome-icon :icon="[ 'fas', 'qq' ]" aria-hidden="true" transform="shrink-1"/>

• brand icon:(<i class="fab fa-qq"></i>)
  <font-awesome-icon :icon="[ 'fab', 'qq' ]" size="2x" class="mr-3"/>

• regular icon: ( <i class="far fa-times-circle"></i>you can find it on fontawsome official website, eg. https://fontawesome.com/icons/times-circle?style=regular )
  <font-awesome-icon :icon="['far', 'times-circle']" aria-hidden="true" transform="shrink-1"/>

Becare of the :icon, not the icon