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 裏面可以找到所有可引用的圖標定義 ）
