icon weight prefix not working in Vuejs

[glutjenkossink]

Describe the bug When trying to import a font other then solid it will give you a prefix error. Could not find one or more icon(s) Object { prefix: "fas", iconName: "rocket" }

To Reproduce Create a Vue 3 project (mine is with Vite) and add font-awesome and the pro fonts etc. Try importing an icon from the library other then pro-solid. Try displaying the font and it will give the error above. For example:

main.ts

app.vue

The first 'bicycle' icon will work because its from the solid library.

Will not work and give you the prefix error.

<font-awesome-icon :icon="['fa-light', 'rocket']" size="3x" /> Is the only way to get fonts other then solid to work.

Expected behavior When not using the same icon in different weights you should be able to just add them normally and not as an array. At the very least the code you get from the website should be working.

Screenshots

Version and implementation Version:

Browser and version: Chrome: 98.0.4758.80 Firefox Developer: 98.0b1

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community and thanks for reporting this.

@robmadole is it possible that the official VUE component needs to be updated?

[robmadole]

We haven't updated the pre-release yet to support the new syntax for Vue 3. This is on the todo list but hasn't been completed.

[christhofer]

This is incorrect <font-awesome-icon :icon="['fa-light', 'rocket']" size="3x" />

It should be <font-awesome-icon :icon="['fal', 'rocket']" size="3x" />

[glutjenkossink]

@christofer In the time when I was writing it that 'fal' was not working but 'fa-light' was. Could be that an update changed this. I wouldn't know what the syntax is because I'm simply not using FontAwesome in my projects currently as this is just poor implementation.

I find it kinda odd that the new FA6 is released nearly 4 months ago already and this issue still isn't fixed. Its especially odd if you think about that this impacts the actual paying users the most and the documentation is still not updated either.

[jasonlundien]

Hey @glutjenkossink ---

We have updated our Vue 2 and Vue 3 docs on the proper usage of our icons.

In the case of the fa-rocket icon (and for the fa-bicycle icon as well) you can choose to do the following:

• string syntax: <font-awesome-icon icon="fa-light fa-rocket" />
• array syntax: <font-awesome-icon :icon="['fal', 'rocket']" />

As far as the fa-bicycle working without a style -- this is because we have defaulted "solid" for users that do NOT select a style. You can always change the default style if you prefer.

I have tested the string and array syntax with Vue 3 using typescript and all seems to be working well so I am going to go go ahead and close this issue. If you feel it should be re-opened just let us know.