Why so explicit (the :icon="['far', 'coffee']" syntax)?

I would like to suggest an improvement over the icon style (or understand why not). The way it currently works is very complicated (and ugly, visually).

The documentation explains some reasons why we can’t use some style with some syntaxes, but I believe the way below can solve the problem:

<font-awesome-icon icon="fas user" />

This syntax, when used, will throw an error:

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

If it’s for performance reasons (eg having to break the string into spaces, similar to using :icon="[ 'fas', 'user' ]"), I believe that the string break could only occur a moment before this error is thrown, as a fallback. Even so, if that’s really the case, breaking a string for space wouldn’t actually generate any kind of performance problem, I believe.

In my vision, some could be done at this part:

https://github.com/FortAwesome/vue-fontawesome/blob/6cbcf0c536396f7211edbcd6328931d85ec86873/src/components/FontAwesomeIcon.js#L29-L31

Something like:

  if (typeof icon === 'string') {
    const [ prefix, iconName ] = icon.split(/\s+/); 

    return iconName ? { prefix, iconName } : { prefix: 'fas', iconName: prefix }
  }

[jasonlundien]

@christhofer

We added the string format ("fa-solid fa-user-secret") to the Vue 3 component mainly because our Vue 2 component allowed us to call icons that way, so seemed only natural and quite frankly not a huge fix.

Currently, the other ways in which you can add icons using a shortened syntax would be: <font-awesome-icon icon="fas fa-alien" size="5x"/> <font-awesome-icon :icon="['fas', 'alien']" size="3x"/>

We do not have the "fas user-secret" option at this time. Once the the Sharp family style has been released we can explore alternatives to calling the icons.

[jasonlundien]

Update:

We have released updated components for both Vue 2 and Vue 3. You can now use the array and/or the string format for either component.

String <font-awesome-icon icon="fa-solid fa-user-secret" />

Array <font-awesome-icon :icon="['fas', 'user-secret']" />

To get our official Vue 3.x component: $ npm i --save @fortawesome/vue-fontawesome@latest-3 ** the prerelease has been deprecated.