Huge js file generated when used with nuxt3 in ssr mode

[Blakeinstein]

Describe the bug An unminified inlinded css as a js template string is added to built files when using vue-fontawesome with nuxt3.

Reproducible test case https://codesandbox.io/s/compassionate-leavitt-3ehro?file=/plugins/fontawesome.ts Here is a repro of this issue. Simple open the preview window in a new window then check the js files generated in the dev console (in sources/debugger tab). This has been a major hurdle in me getting a decent lighthouse score.

Expected behavior With config.autoAddCss = false no css should exist in the build files.

Desktop (please complete the following information):

• Browser : all
• Version: "@fortawesome/vue-fontawesome": "3.0.0-5"

Additional context I have followed the instructions for nuxt, but that doesnt seem to fix it. Additionally, webpack 5 is being used as the bundler in nuxt3.

[Blakeinstein]

https://zerobin.net/?0eda2a5b3b30b534#Rv0QZyVP5OcmSDtjzkTqyJPih4D2o7nv5JH9qZc7SEs=

here is the js file that is generated and the link i got it from https://3ehro.sse.codesandbox.io/_nuxt/ec0f4ba.js

Do note that the generated js file is 1.4mb in size

[ennioVisco]

Describe the bug An unminified inlinded css as a js template string is added to built files when using vue-fontawesome with nuxt3.

Reproducible test case https://codesandbox.io/s/compassionate-leavitt-3ehro?file=/plugins/fontawesome.ts Here is a repro of this issue. Simple open the preview window in a new window then check the js files generated in the dev console (in sources/debugger tab). This has been a major hurdle in me getting a decent lighthouse score.

Expected behavior With config.autoAddCss = false no css should exist in the build files.

Desktop (please complete the following information):

• Browser : all
• Version: "@fortawesome/vue-fontawesome": "3.0.0-5"

Additional context I have followed the instructions for nuxt, but that doesnt seem to fix it. Additionally, webpack 5 is being used as the bundler in nuxt3.

How did you use it with nuxt3? Is the .component() method available in the nuxtApp.vueApp?

[Blakeinstein]

How did you use it with nuxt3? Is the .component() method available in the nuxtApp.vueApp?

Well in the reproduction, I created a plugin that registers the fontawesome component as Fa

[ghost]

I'm having the same issue when using version 2.14.6`. The example is the same way I use font awesome in my project, and the entry point is 1.11mb.

[ennioVisco]

I'm having the same issue when using version 2.14.6`. The example is the same way I use font awesome in my project, and the entry point is 1.11mb.

I just recommend using https://github.com/antfu/unplugin-icons for a more modern experience.

[P4sca1]

Importing each icon individually should resolve the issue.

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

[jeannen]

Same issue here, it's generating a massive file, that's way too big for production

I use hundreds of icons, so importing them all manually is a no-go. Any way to fix this and only import the modules that were used?