vue font awesome icons

1$ npm i --save @fortawesome/fontawesome-svg-core
2$ npm i --save @fortawesome/free-solid-svg-icons
3

1$ yarn add @fortawesome/fontawesome-svg-core
2$ yarn add @fortawesome/free-solid-svg-icons
3

1import Vue from 'vue'
2import App from './App'
3import { library } from '@fortawesome/fontawesome-svg-core'
4import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
5import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
6
7library.add(faUserSecret)
8
9Vue.component('font-awesome-icon', FontAwesomeIcon)
10
11Vue.config.productionTip = false
12
13/* eslint-disable no-new */
14new Vue({
15  el: '#app',
16  components: { App },
17  template: '<App/>'
18})

1<template>
2  <div id="app">
3    <font-awesome-icon icon="user-secret" />
4  </div>
5</template>
6
7<script>
8export default {
9  name: 'App'
10}
11</script>

1import { library } from '@fortawesome/fontawesome-svg-core'
2import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
3
4library.add(faUserSecret)

1<!-- The solid style is implicit -->
2<font-awesome-icon icon="user-secret" />
3
4<!-- It's better to be explicit -->
5<!-- Don't forget to bind the property with ":" (we forget all the time!) -->
6<font-awesome-icon :icon="['fas', 'user-secret']" />