free-regular-svg-icons of vue-fontawesome not working

Question

I am using Webpack + Vue + vue-fontawesome.

The code below works fine and display icons.

import @fortawesome/free-solid-svg-icons

But this one doesn't display icons.

import faCalendarCheck component in @fortawesome/free-regular-svg-icons 

Similary, other components in @fortawesome/free-regular-svg-icons are not working. Component do render comment line of HTML <\!---->.

Why @fortawesome/free-regular-svg-icons is not working?

main.js

// Font Awesome
import { library } from '@fortawesome/fontawesome-svg-core';
import {
    faThLarge,
    // faCalendarCheck,
    faBell,
    faAddressBook,
    faCalculator,
    faSitemap,
    faEnvelope,
    faWindowMaximize,
    faFileAlt,
    faNewspaper,
} from '@fortawesome/free-solid-svg-icons';
import {
    faCalendarCheck,
} from '@fortawesome/free-regular-svg-icons';

library.add(faThLarge);
library.add(faCalendarCheck);
library.add(faBell);
library.add(faAddressBook);
library.add(faCalculator);
library.add(faSitemap);
library.add(faEnvelope);
library.add(faWindowMaximize);
library.add(faFileAlt);
library.add(faNewspaper);

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
Vue.component('font-awesome-icon', FontAwesomeIcon);

app.vue

<template>
    <font-awesome-icon icon="calendar-check" />
</template>

package.json

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.2",
    "@fortawesome/free-brands-svg-icons": "^5.2.0",
    "@fortawesome/free-regular-svg-icons": "^5.2.0",
    "@fortawesome/free-solid-svg-icons": "^5.2.0",
    "@fortawesome/vue-fontawesome": "^0.1.1"
}

Answer 1

You need to specify a prefix for using non solid icons.

In your example this should work:

  <font-awesome-icon :icon="['far', 'calendar-check']" />

More info can be found here.