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" />