Wrapper component not working

Hi, I’m trying to create a wrapper component as mentioned in #18 in order to get around the limitation of not being able to define a default prefix value, but it is not working. Here it is:

<template functional>
    <font-awesome-icon
            :icon="['far', icon]"
    ></font-awesome-icon>
</template>

<script>
    import FontAwesomeIcon from '@fortawesome/vue-fontawesome'

    export default {
        components: {
            FontAwesomeIcon
        },

        props: {
            icon: {
                type: String,
                default: ''
            }
        },
    }
</script>

It builds fine, but I am getting this error in console:

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

(found in <Anonymous>)

I am registering my wrapper in my main app.js file like this:

// Font Awesome
import {library} from '@fortawesome/fontawesome-svg-core'
import {far} from '@fortawesome/pro-regular-svg-icons';

library.add(far);

Vue.component('fa-icon', require('./components/FontAwesome'));

What am I doing wrong?

[benjivm]

Ah I see… so this works now:

app.js

import {library} from '@fortawesome/fontawesome-svg-core';
import {far} from '@fortawesome/pro-regular-svg-icons';

library.add(far);

import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';

Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.component('fa-icon', require('./components/FontAwesome'));

./components/FontAwesome.vue

<template functional>
    <font-awesome-icon
            :icon="['far', props.icon]"
    ></font-awesome-icon>
</template>

I don’t like having to register the component twice, but if that’s what I gotta do to override the default prefix then I guess it’ll have to stay.

Thanks.

[robmadole]

Try import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'