Vue and Font Awesome #vue #fontawesome

NPM - Vue and Font Awesome.md

1. Create a .npmrc file in the root of your project (or where you have your package.json file) with the following content:

@fortawesome:registry=https://npm.fontawesome.com/ //npm.fontawesome.com/:_authToken=XXXXXXXXXXX

Install per project

2. yarn add

vue-fontawesome documentation

$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/vue-fontawesome

$ yarn add @fortawesome/pro-solid-svg-icons
$ yarn add @fortawesome/pro-regular-svg-icons
$ yarn add @fortawesome/pro-light-svg-icons
$ yarn add @fortawesome/pro-duotone-svg-icons
$ yarn add @fortawesome/free-brands-svg-icons

3. usage

src/main.js

import Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faTimesCircle } from '@fortawesome/pro-solid-svg-icons'
import { faHome, faInfoCircle, faTh, faThLarge, faThList } from '@fortawesome/pro-regular-svg-icons'
import { faHome, faInfoCircle } from '@fortawesome/pro-light-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faHome)
library.add(faInfoCircle)
library.add(faTimesCircle)
library.add(faTh)
library.add(faThLarge)
library.add(faThList)

Vue.component('font-awesome-icon', FontAwesomeIcon)
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

src/App.vue

<template>
  <div id="app">
    <font-awesome-icon :icon="['far', 'info-circle']" />
  </div>
</template>