vue 引入 fontawesome 报错 Could not find one or more icon(s) 解决

在 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 里面可以找到所有可引用的图标定义）