Font Awesome Pro/Alphas

import { library } from '@fortawesome/fontawesome-svg-core';
//don't know for sure if pro includes this ones as well
import { far as farFree } from '@fortawesome/free-regular-svg-icons';
import { fas as fasFree } from '@fortawesome/free-solid-svg-icons';
import { fad } from '@fortawesome/pro-duotone-svg-icons';
import { fat } from '@fortawesome/pro-thin-svg-icons';
import { fal } from '@fortawesome/pro-light-svg-icons';
import { fas } from '@fortawesome/pro-solid-svg-icons';
import { far } from '@fortawesome/pro-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(farFree);
library.add(fasFree);
library.add(fad);
library.add(fat);
library.add(fal);
library.add(fas);
library.add(far);
library.add(fab);

<script>

import { parse as faParse, icon as faIcon } from '@fortawesome/fontawesome-svg-core'
import { objectWithKey, classList } from '@fortawesome/vue-fontawesome/src/utils'
import { h } from "vue";

function normalizeIconArgs (icon) {
    // this has everything that it needs to be rendered which means it was probably imported
    // directly from an icon svg package
    if (icon && typeof icon === 'object' && icon.prefix && icon.iconName && icon.icon) {
        return icon
    }

    if (faParse.icon) {
        return faParse.icon(icon)
    }

    if (icon === null) {
        return null
    }

    if (typeof icon === 'object' && icon.prefix && icon.iconName) {
        return icon
    }

    if (Array.isArray(icon) && icon.length === 2) {
        return { prefix: icon[0], iconName: icon[1] }
    }

    if (typeof icon === 'string') {
        return { prefix: 'fas', iconName: icon }
    }
}

export default {
    name: "font-awesome-icon",

    props: {
        beat: {
            type: Boolean,
            default: false
        },
        border: {
            type: Boolean,
            default: false
        },
        fade: {
            type: Boolean,
            default: false
        },
        fixedWidth: {
            type: Boolean,
            default: false
        },
        flash: {
            type: Boolean,
            default: false
        },
        flip: {
            type: String,
            default: null,
            validator: (value) => ['horizontal', 'vertical', 'both'].indexOf(value) > -1
        },
        icon: {
            type: [Object, Array, String],
            required: true
        },
        mask: {
            type: [Object, Array, String],
            default: null
        },
        listItem: {
            type: Boolean,
            default: false
        },
        pull: {
            type: String,
            default: null,
            validator: (value) => ['right', 'left'].indexOf(value) > -1
        },
        pulse: {
            type: Boolean,
            default: false
        },
        rotation: {
            type: [String, Number],
            default: null,
            validator: (value) => [90, 180, 270].indexOf(parseInt(value, 10)) > -1
        },
        swapOpacity: {
            type: Boolean,
            default: false
        },
        size: {
            type: String,
            default: null,
            validator: (value) => ['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x'].indexOf(value) > -1
        },
        spin: {
            type: Boolean,
            default: false
        },
        spinPulse: {
            type: Boolean,
            default: false
        },
        spinReverse: {
            type: Boolean,
            default: false
        },
        transform: {
            type: [String, Object],
            default: null
        },
        symbol: {
            type: [Boolean, String],
            default: false
        },
        title: {
            type: String,
            default: null
        },
        inverse: {
            type: Boolean,
            default: false
        }
    },

    setup(props) {
        const icon = normalizeIconArgs(props.icon)
        const classes = objectWithKey('classes', classList(props))
        const transform = objectWithKey('transform', (typeof props.transform === 'string') ? faParse.transform(props.transform) : props.transform)
        const mask = objectWithKey('mask', normalizeIconArgs(props.mask))
        const symbol = props.symbol;
        const title = props.title;

        const renderedIcon = faIcon(
            icon,
            { ...classes, ...transform, ...mask, symbol, title }
        )

        const { abstract } = renderedIcon;

        // return the render function
        return () => render(abstract[0])
    }
}

function render(data) {

    let children = [];
    if (data.hasOwnProperty('children')) {
        data.children.forEach(child => {
            children.push(render(child))
        })

    }
    return h(data.tag, data.attributes, children)
}
</script>