Categories
Uncategorized

vue introduced fontawesome error Could not find one or more icon (s) resolved

In reference fontawesome vue projects, the steps described below in accordance with official

1, the terminal performs

$ 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 introduced the corresponding packet registered (one method of the spoilers solution: The following code faUserSecret fas have gone on 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: ''
})

 

3, src / App.vue used



 

4, ok to run a successful small black icon display. But when I tried to use other icon

I like to mention the following error (¯O¯;)

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

Tell me what network without brain continues to document, copy and paste into a few examples are given. Then follow up to this source:

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);
}

According to incoming icon property, go inside to find library.definitions icon data, this time to see the value library.definitions are:

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

Came before, and really by their own stupid crying. Beginning too easily copy and paste from the official website, ignored here

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

I only quoted faUserSecret an icon, while the library was also just add this one

library.add(faUserSecret)

Find the reasons above, the solution is simple.

 

solution

Option One: Every time the introduction of on-demand, only add the icon you want to use the current page

import {faUserSecret,faPlay} from '@fortawesome/free-solid-svg-icons'
ibrary.add(faUserSecret,faPlay)
 

 

Option Two: a one-time introduction of the entire icon libraries, which later would like to use with which, not repeated to add registration

import {fas} from '@fortawesome/free-solid-svg-icons'
ibrary.add(fas)
 
 

 

More than two options, each has its advantages no right or wrong, it wants to see the actual situation.

(Ps: click-through / @ fortawesome / free-solid-svg-icons / icons can find all the definitions can be referenced in index.d.ts inside)

Leave a Reply