在 vue 專案中引用 fontawesome ， 按照官方說明如下步驟操作

1、 終端中執行

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/vue-fontawesome

2、src/main.js 中引入註冊對應包（劇透下解決方法之一： 把下面程式碼中的 faUserSecret 都改成 fas 就 ok 了）

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

library.add(faUserSecret)

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

Vue.config.productionTip = false

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

3、src/App.vue 中使用

<template>
  <div id="app">
    <font-awesome-icon icon="user-secret" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

4、ok 執行， 一個小黑人圖示成功顯示。但當我試圖使用別的圖示時

<font-awesome-icon icon="play" />

我喜提了如下報錯 (￣O￣;) 

Could not find one or more icon(s) {
    prefix: "fas",
    iconName: "play"
}

無腦繼續看官網文件，複製貼上了幾個例子進去，都是報錯。於是跟進原始碼到這段：

function findIconDefinition(iconLookup) {
    var _iconLookup$prefix = iconLookup.prefix,
        prefix = _iconLookup$prefix === void 0 ? 'fa' : _iconLookup$prefix,
        iconName = iconLookup.iconName;
    if (!iconName) return;
    return iconFromMapping(library.definitions, prefix, iconName) || iconFromMapping(namespace.styles, prefix, iconName);
}

根據傳入的 icon 屬性， 會去 library.definitions 裡面找圖示資料， 這時候能看到  library.definitions 的值是： 

{
    "fas": {
        "user-secret": [448, 512, [], "f21b", "M383.9 308.3l23.9-62.6...babalabala..."]
    }
}

才恍然大悟，真是被自己蠢哭了。一開始從官網複製貼上的太順手，忽略了這裡

import {faUserSecret} from '@fortawesome/free-solid-svg-icons'

我只引用了 faUserSecret 一個圖示，同時 library 裡也只加了這一個

library.add(faUserSecret)

上面原因找到了，解決就簡單了。

解決方案

方案一：每次按需引入，只添加當前頁面需要使用的圖示

import {faUserSecret,faPlay} from '@fortawesome/free-solid-svg-icons'
ibrary.add(faUserSecret,faPlay)
 <font-awesome-icon icon="user-secret" 

方案二：一次性引入整個圖示庫，後面想用哪個用哪個，不用反覆的去添加註冊

import {fas} from '@fortawesome/free-solid-svg-icons'
ibrary.add(fas)
 <font-awesome-icon icon="user-secret" />
 <font-awesome-icon icon="play" />

以上兩種方案，各有千秋沒有對錯，看實際情況用就是了。

（ ps： 點進 /@fortawesome/free-solid-svg-icons/ 在 index.d.ts 裡面可以找到所有可引用的圖示定義