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'


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


Find the reasons above, the solution is simple.



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'


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'


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