Solid icons are loading but Brand icons are not. Any ideas if this is a bug?

nuxt.config.js file

...
buildModules: [
    '@nuxtjs/fontawesome',
],
...
fontawesome: {
    icons: {
        brands: [
            'faFacebookSquare',
            'faGithubSquare',
            'faInstagram',
            'faLinkedin',
            'faPinterestSquare',
            'faTelegram',
            'faTwitterSquare',
            'faVimeoSquare',
            'faWhatsappSquare',
        ],
        solid: [
            'faCircle',
            'faDesktop',
            'faFilePdf',
            'faMobileAlt',
            'faPhoneSquareAlt',
            'faPencilRuler',
            'faServer',
        ],
    },
},

package.json

...
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-regular-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/vue-fontawesome": "^2.0.2",
"@nuxtjs/fontawesome": "^1.1.2",
...

just tried to generate my nuxt site with npx nuxi generate

using nuxt rc-3

getting this warning:

WARN                                                                          15:54:43
(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

ℹ Client built in 15227ms                                                      15:54:43
ℹ Building server...                                                           15:54:43

 WARN  @fortawesome/fontawesome-pro doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update all non-major dependencies (@fortawesome/fontawesome-svg-core, @fortawesome/free-brands-svg-icons, @fortawesome/free-solid-svg-icons, @fortawesome/vue-fontawesome)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update devdependency @nuxtjs/eslint-config to v12
• chore(deps): update font awesome (major) (@fortawesome/fontawesome-svg-core, @fortawesome/free-brands-svg-icons, @fortawesome/free-solid-svg-icons, @fortawesome/vue-fontawesome)

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Solid icons comes both in a free as pro variant, currently only free is supported.

nuxt.config.js

Jest test case

pages/order/index.vue

error message.

//package.json
{
  "name": "XXXXX",
  "version": "1.0.0",
  "type": "module",
  "description": "XXXX",
  "author": "XXX",
  "private": true,
  "scripts": {
    "dev": "HOST=0.0.0.0 PORT=3232 nuxt",
    "dev:debug": "node --inspect node_modules/.bin/nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "test": "jest",
    "test:unit": "jest --watch",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
    "lint:dryrun": "eslint --fix-dry-run --ext .js,.ts,.vue --ignore-path .gitignore .",
    "heroku-postbuild": "npm run build",
    "lint-staged": "lint-staged",
    "commitlint": "commitlint",
    "commit": "git-cz"
  },
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  },
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": [
      "eslint --cache --fix",
      "git add ."
    ]
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "pre-commit": "lint-staged"
    }
  },
  "dependencies": {
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/axios": "^5.13.1",
    "@nuxtjs/google-analytics": "^2.4.0",
    "jquery": "^3.6.0",
    "nuxt-edge": "^2.16.0-26936677.9247190c",
    "vue-flex-waterfall": "^1.0.7",
    "vue-instagram": "^1.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.10",
    "@commitlint/cli": "^11.0.0",
    "@commitlint/config-conventional": "^11.0.0",
    "@fortawesome/fontawesome-free": "^5.15.3",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@nuxt/types": "^2.15.3",
    "@nuxt/typescript": "^2.8.1",
    "@nuxtjs/fontawesome": "^1.1.2",
    "@nuxtjs/tailwindcss": "^4.0.1",
    "@types/jest": "^26.0.20",
    "@vue/test-utils": "^1.1.3",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.3",
    "commitizen": "^4.2.3",
    "eslint": "^7.22.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-html": "^6.1.2",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-promise": "^4.3.1",
    "eslint-plugin-standard": "^5.0.0",
    "fibers": "^5.0.0",
    "husky": "^5.1.3",
    "iview": "^3.5.4",
    "iview-loader": "^1.0.0-beta.4",
    "jest": "^26.6.3",
    "jest-transform-stub": "^2.0.0",
    "lint-staged": "^10.5.4",
    "mutationobserver-shim": "^0.3.7",
    "postcss": "^8.2.8",
    "prettier": "^2.2.1",
    "sass": "^1.32.8",
    "sass-loader": "^10.1.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^4.3.3",
    "ts-jest": "^26.5.3",
    "vue": "^2.4.4",
    "vue-agile": "^0.2.6",
    "vue-awesome": "^2.3.3",
    "vue-gallery": "^2.0.1",
    "vue-i18n": "^8.24.1",
    "vue-jest": "^3.0.7",
    "vue-waterfall": "^1.0.6"
  }
}

Hi, I'm running into the following error with this module with my jest tests.

    [Vue warn]: Unknown custom element: <fa> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
    
    found in

I also see that another issue similar to mine is open but didn't provide a definitive answer.
#21

Hello,

Are you planning on supporting the new FontAwesome 6 version (which is still in Beta, but accessible to subscribers)?

Thanks

I have this html code

<fa :icon="['fas', 'arrow-next']" />

nuxt.config.js

...
fontawesome: {
   icons: {
      solid: [ ..., 'fasArrowNext']
   }
}
...

and I am having an error in console

./.nuxt/fontawesome.js 10:105-124"export 'fasArrowLeft' (imported as 'freeFasFasArrowLeft') was not found in '@fortawesome/free-solid-svg-icons'./.nuxt/fontawesome.js 10:83-103"export 'fasArrowRight' (imported as 'freeFasFasArrowRight') was not found in '@fortawesome/free-solid-svg-icons'

I've already added @fortawesome/free-solid-svg-icons. How do I fix this? Thanks in advance 😄

Version:
nuxt: 2.15.8
tailwindcss: ^3.0.22 *Note that in tailwindcss v3, Purgecss is no longer supported

hi guys, i got this error and i did everything that you said in the docs

Im using the latest version of nuxt.js

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Pages/index.vue> at pages/index.vue

<Layouts/default.vue> at layouts/default.vue

Any tougths ?

Hi,

I saw the library support @nuxtjs/storybook but it seems that the latest release doesn't correspond with the code in the repository.
I also saw a pull request for Typescript support that haven't been merged.

Is it normal or this is just a missing update on the NPM side ? Is the repos is abandoned ?

My suggestion is to not deprecate this option, but tweak it for a slightly different use.

For those that aren't aware all those that had the license for Font Awesome 5, can no longer install Font Awesome from their official npm repository. The license is not longer valid, but there's also a guide in the official docs where it is shown that you can download the .tar and host it somewhere privately for your personal use.

Since this breaks one of my projects and I do not wish to pay $100/y for Font Awesome v6, my only option is to follow that guide.

Hosting Font Awesome myself under my private Git repository of a project, under different scope. So without this imports option, I wouldn't be able to provide a set of the pro icons (v5) that are still valid.

I hope I was able to provide valuable information here. Please keep this option for such purposes.

For example, this is the config that I'm currently using:

fontawesome: {
    component: 'Fa',
    suffix: false,
    useLayers: false,
    useLayersText: false,
    icons: {
      brands: [
        'faCcVisa',
        'faCcMastercard',
        'faCcDiscover',
        'faCcAmex',
        'faCcPaypal',
        'faLinkedinIn',
        'faInstagram',
        'faTwitter'
      ]
    },
    imports: [
      {
        set: '@xxx/xxx-xxx-xxx',
        icons: [
          'faUsersCrown',
          // ...
        ]
      }
    ]
}

Using Fontawesome Pro I installed the package @fortawesome/fontawesome-pro as their documentation recommends. When using a duotone icon (premium), e.g. stars, I am told by the Nuxt development server to install @fortawesome/pro-duotone-svg-icons. Doing so removes the error message, but I'm not sure if this was really necessary:
I found the desired svg file contained in the only package that the official documentation told me to install: node_modules/@fortawesome/fontawesome-pro/svgs/duotone/stars.svg
Is this something I misunderstand, like a missing additional file contained in the other package, or should the extension support loading from the full package as well? It appeared to me that while you're able too install certain styles only, the (currently) recommended package contains all the styles already.
I've seen some documentations suggest that the general package only installs the regular style, but that turned out to be incorrect in my case.

AFAIK there are no type definitions; or are they in a different module?

In the nuxt config example imports are used.

I can't get it to work at all and it would be helpful with a working example?

i have created a custom kit in font awesome but i cant add the icon to my project.
using package.json:
"nuxt-fontawesome": "^0.4.0",
"nuxt": "^2.15.8",
"@fortawesome/fontawesome-pro": "^6.1.1",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-brands-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/pro-duotone-svg-icons": "^6.1.1",
"@fortawesome/pro-light-svg-icons": "^6.1.1",
"@fortawesome/pro-regular-svg-icons": "^6.1.1",
"@fortawesome/pro-solid-svg-icons": "^6.1.1",

in nuxt.config.js
modules: [
[
"nuxt-fontawesome",
{
imports: [...]
]

what set should i use?

thanks!

Version

@nuxt/cli v2.15.6
node v14.17.0

Config

Usage

<fa :icon="['fab', 'github']"/>

• Take a buefy component like input
• It has the option to set an icon to it
• How do I use these icons in place of those as they dont render currently
  EDIT 1
  Codesandbox illustrating my problem

Are there any examples or suggestions for the nuxt.config setup if using self-hosted fontAwesome packages? I noticed that if purchasing a pro license and not renewing, the icons will no longer be available via .npmrc and the app will break.

Is there any known solution for this?

Hi guys, i am getting error,
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

nuxt.config.js

buildModules: [
    '@nuxtjs/fontawesome',
  ],

fontawesome: {
    icons: {
      solid: true
    }
  }

Used in template like this
<font-awesome-icon icon="cog"/>

Thanks!

https://codesandbox.io/s/sharp-faraday-jy3oi?file=/components/Tutorial.vue

Just tried to reproduce the example in a sandbox using the nuxt template.

 ERROR  Could not find one or more icon(s) {                          17:00:13
  prefix: 'fas',
  iconName: 'calendar'
} {}

Unknown custom element: font-awesome-icon - did you register the component correctly? For recursive components, make sure to provide the "name" option.

how can i fix it?

I want to add icons like content to :before element, it's posible?

After correctly using tree shaking (I'm using about 20 icons, no layers) and setting:

    addCss: false,
    useLayers: false,
    useLayersText: false,

in module config, my top size in bundle is fontawesome-svg-core which includes some unuseful code for my needs and it seems there's no way to limit its size. Am I missing something? thanks

Got issue when npm run build,
anyone encounter this? thanks

Nuxi 3.0.0 15:36:26
Nuxt 3.0.0 with Nitro 1.0.0 15:36:26

ERROR Cannot read properties of undefined (reading 'fontawesome') 15:36:26

at module (node_modules/nuxt-fontawesome/lib/module.js:9:56)
at installModule (node_modules/@nuxt/kit/dist/index.mjs:416:9)
at async initNuxt (node_modules/nuxt/dist/index.mjs:1823:7)
at async loadNuxt (node_modules/nuxt/dist/index.mjs:1857:5)
at async loadNuxt (node_modules/@nuxt/kit/dist/index.mjs:493:19)
at async Object.invoke (node_modules/nuxi/dist/chunks/build.mjs:34:18)
at async _main (node_modules/nuxi/dist/cli.mjs:50:20)

I've installed this package plus the fortawesome ones and everything works OK.

this is my config:

  buildModules: [
    ....
    ['nuxt-fontawesome', {
      component: 'fa',
      imports: [
        {
          set: '@fortawesome/free-solid-svg-icons',
          icons: ['fas']
        },
        {
          set: '@fortawesome/free-regular-svg-icons',
          icons: ['far']
        }
      ]
    }]
  ],

when I run tests jest complaining about:

 [Vue warn]: Unknown custom element: <fa> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

how can I stub it?

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (@nuxtjs)

I believe my issue is similar to this one here: FortAwesome/vue-fontawesome#14

I am using Nuxt.js to build and deploy on netlify. I run npm run generate there to generate the statically generated site and deploy the dist folder to the server. While in "dev mode" with npm run dev, all icons are displayed correctly and tailwindcss font-styles are applied. On prod they are massively oversized.

Expected:

Current state:

I tried to apply the nuxt.js instructions from the old repo (link above), but to no avail.

// nuxt.config.js
...
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    // Doc: https://github.com/nuxt-community/nuxt-tailwindcss
    '@nuxtjs/tailwindcss',
    // Docs: https://github.com/nuxt-community/fontawesome-module
    '@nuxtjs/fontawesome'
  ],
  tailwindcss: {
    configPath: '~/tailwind.config.js',
    cssPath: '~/assets/css/tailwind.css',
    purgeCSSInDev: false
  },
  fontawesome: {
    suffix: true,
    icons: {
      solid: ['faRss'],
      brands: ['faGitlab', 'faGithub', 'faDocker', 'faTwitter', 'faXing']
    }
  },
...

// index.vue
<template>
  <main class="flex flex-1 flex-col md:flex-row md:justify-center pt-10">
    <section class="w-full md:w-5/8 mb-16 md:mb-0">
      <Slogan
        class="text-2xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl pt-0 md:pt-12 mb-6 sm:mb-8 md:mb-12 font-hairline "
      />
      <ul class="flex flex-row flex-wrap">
        <li v-for="(link, index) in links" :key="index" class="mr-6 mb-6 sm:mr-8 md:mr-6 lg:mr-6">
          <a :href="link.href" target="_blank" rel="noopener noreferrer"
            ><FontAwesomeIcon
              :icon="link.icon"
              class="text-xl sm:text-2xl md:text-xl lg:text-3xl xl:text-4xl cursor-pointer transform transition duration-300 ease-in-out hover:scale-125"
              :class="'hover:' + link.hover"
          /></a>
        </li>
      </ul>
    </section>
    <section class="w-full md:w-3/8 p-12 md:p-0">
      <img
        src="~/assets/img/home.svg"
        alt="A man builds a website on an oversized screen surrounded by nature."
        class="transform  transition duration-500 ease-in-out hover:opacity-90"
      />
    </section>
  </main>
</template>

<script>
import Slogan from '~/components/Slogan.vue'

export default {
  components: {
    Slogan
  },
  data() {
    return {
      links: [
        {
          href: 'https://gitlab.com/m.dirim',
          icon: ['fab', 'gitlab'],
          hover: 'text-orange-500'
        },
        {
          href: 'https://github.com/leeniu',
          icon: ['fab', 'github'],
          hover: 'text-indigo-500'
        },
        {
          href: 'https://hub.docker.com/u/malikdirim',
          icon: ['fab', 'docker'],
          hover: 'text-blue-500'
        },
        {
          href: 'https://malikdirim.me',
          icon: ['fas', 'rss'],
          hover: 'text-red-500'
        },
        {
          href: 'https://twitter.com/malikdirim',
          icon: ['fab', 'twitter'],
          hover: 'text-blue-500'
        },
        {
          href: 'https://www.xing.com/profile/Malik_Dirim/',
          icon: ['fab', 'xing'],
          hover: 'text-green-500'
        }
      ]
    }
  }
}
</script>

<style lang="scss"></style>

I tried to followed all the step as mentioned here: https://www.npmjs.com/package/@nuxtjs/fontawesome

My nuxt.config.js

buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
    ['@nuxtjs/fontawesome',{
      component: 'fa',
      suffix: true,
    },],
  ],
fontawesome: {
    icons: {
      solid: ['faHome'],
      regular: ['faUserSecret'],
      brands: ['faGithub'],
    }
  },

My usage of the component

<fa :icon="['fab', 'github']"/>

Expected outcome:
Works out of the box

Actual Outcome:
App crashes with the following error on the console

I've did everything the Readme told me to, but I can't get any icons to work if I try to import them in my nuxt.config.js, only when I import them directly in a component.

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

buildModules: [
    [
      '@nuxtjs/fontawesome',
      {
        component: 'fa',
      },
    ],
  ],
fontawesome: {
  icons: {
    brands: ['faGithub'],
  },
},

<fa icon="faGithub" />

Hi, does someone having this problem:

fontawesome: { component: 'fa', icons: { solid: true, brands: true, }, },

<fa :icon="['fab', 'linkedin']"/>

The icons is loaded in dev mode but not in build. The SVG tag is there but not showing the icon.

I've been using your package for a while and everything was working fine. However, after updating last week the Icons turned huge (as in 640 x 562 px) when in production mode. when in development mode everything is fine. I cant figure out what is causing this.. any idea?

Hello,
it is possible to not list all icons used on a whole site in nuxt.config.js, but benefit from tree shaking (load only icons used on the page)?

Ideally without strange technique using computed property.

I've added the fontawesome token to be able to download the pro icons and I've added this packages as dev dependencies:

    "@fortawesome/fontawesome-pro": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/pro-duotone-svg-icons": "^5.13.0",
    "@fortawesome/pro-light-svg-icons": "^5.13.0",
    "@fortawesome/pro-regular-svg-icons": "^5.13.0",
    "@fortawesome/pro-solid-svg-icons": "^5.13.0",
    "@nuxtjs/fontawesome": "^1.1.2",

but this error appears when trying to use a light icon (PRO icon)

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                  

This dependency was not found:                                                                                                                                                                                          

* @fortawesome/free-light-svg-icons in ./.nuxt/fontawesome.js                                                                                                                                                            

To install it, you can run: npm install --save @fortawesome/free-light-svg-icons 

This is the fontawesome config in nuxt.config

  fontawesome: {
    icons: {
      light: ['faAbacus']
    }
  },

Loads fine on local dev, but not loading on a SSR build on live server.

The markup in my vue page component is:

<fa-icon class="copy-icon" :icon="['far', 'copy']" />

Inspecting page code on the live site I can see the html has the fa-icon markup as follows, instead of svg:

<fa-icon icon="far,copy" class="copy-icon"></fa-icon>

Any help greatly appreciated.

Nuxt 2.15.8
@nuxtjs/fontawesome: ^1.1.2
@fortawesome/free-regular-svg-icons: ^6.1.1
@fortawesome/vue-fontawesome: 0.1.10 (via @nuxtjs/fontawesome)

nuxt.config.js:

buildModules: [
    ['@nuxtjs/fontawesome', {
      component: 'fa',
      icons: {
        regular: [ 'faCopy' ],
      },
    }],
]

The current build (1.1.2) misses the following:

• peer dependency declaration for vue, as @fortawesome/vue-fontawesome has one declared.
• consola dependency (not declared in package.json)

I can open a PR, just react/answer :)