Support for Vue FontAwesome

[makingDigital]

The markup for Vue Fontawesome is a little different, it would be great to have automcomplete for it:

https://github.com/FortAwesome/vue-fontawesome

[Janne252]

It appears that the main difference between vue-fontawesome's syntax and standard Font Awesome is the missing fa- prefix on icon names:

<font-awesome-icon icon="address-book" /> (fas is the default assumed prefix)

vs.

<i class="fas fa-address-book"></i>

Meaning that a configuration option for this extension that enables/disables the inclusion of the fa- prefix should be enough to provide a compatible experience?

Unfortunately it also appears that prefixes are provided in an array:

<font-awesome-icon :icon="['fas', 'spinner']" />

@makingDigital Do you know if this is the only way of providing the prefix? i.e. if vue-font-awesome-icon supports icon="fas spinner"?

[makingDigital]

Apologies for the late reply, at the moment no it has to be provided in an array to specify the library you want I believe, but if you just have one type included you can just say icon="coffee" and it'll default to the first one. The config part for autocompleting the icon attribute would probably do the job, would be cool to have autocomplete on the tag itself, typing out is tiresome haha!

[Janne252]

I think this can be solved by supporting an insertion template per file type:

{
    "insertionTemplate": {
        "**/*.vue": "<font-awesome-icon :icon=\"['{style}', '{name}']\" />"
    }
}

Where

• {style} is replaced with the icon style prefix, e.g. far
• {name} is replaced with the icon's name without fa- prefix, e.g. user.

Default template for any file type would be {style} fa-{name}.

This woud allow maximum support for customizing the output.

[50l3r]

I think this can be solved by supporting an insertion template per file type:

{
    "insertionTemplate": {
        "**/*.vue": "<font-awesome-icon :icon=\"['{style}', '{name}']\" />"
    }
}

Where

• {style} is replaced with the icon style prefix, e.g. far
• {name} is replaced with the icon's name without fa- prefix, e.g. user.

Default template for any file type would be {style} fa-{name}.

This woud allow maximum support for customizing the output.

I think this can be solved by supporting an insertion template per file type:

{
    "insertionTemplate": {
        "**/*.vue": "<font-awesome-icon :icon=\"['{style}', '{name}']\" />"
    }
}

Where

• {style} is replaced with the icon style prefix, e.g. far
• {name} is replaced with the icon's name without fa- prefix, e.g. user.

Default template for any file type would be {style} fa-{name}.

This woud allow maximum support for customizing the output.

Where i need to put the insertionTemplate config? It says that is config unavailable as insertionTemplate and fontAwesomeAutocomplete.insertionTemplate too

[Janne252]

@50l3r The insertion template proposed in this issue was a sugguestion. It is not implemented yet but as it appears to have some demand I'll implement it for the next release.

[50l3r]

Great. I use vue as one of my main languages and font awesome with the vue-font-awesome library. This plugin matches so great

[Janne252]

Version 1.0.0 is now available on the marketplace, with the new setting insertionTemplate implemented. In addition to supporting the insertion format, the mouse-over documentation popup also supports the custom insertionTemplate configurations.