vue 引入 fontawesome 报错 Could not find one or more icon(s) 解决
- 2019 年 10 月 7 日
- 筆記
在 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 里面可以找到所有可引用的图标定义 ）
