-1
I’m initiating a VUEJ+vuetify project. I implemented the fontawesome package to use the free icons they made available. however, all the components rendered in the browser that use some icon, I’m having the following error in the console.
The configuration was done as follows.
I wrote a.js file called. 'fontawesome.js' where I import the icons I will use.
import Vue from 'vue';
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faHome, faUser, faIdCard, faSignOutAlt, faSignInAlt, faSync, faBan, faLayerGroup, faServer, faUsers, faChartLine } from '@fortawesome/free-solid-svg-icons';
Vue.component('font-awesome-icon', FontAwesomeIcon);
library.add(faHome, faUser, faIdCard, faSignOutAlt, faSignInAlt, faSync, faBan, faLayerGroup, faServer, faUsers, faChartLine);
export default {
home: { component: FontAwesomeIcon, props: { icon: ['fas', 'home'] } },
user: { component: FontAwesomeIcon, props: { icon: ['fas', 'user'] } },
idCard: { component: FontAwesomeIcon, props: { icon: ['fas', 'id-card'] } },
signOutAlt: { component: FontAwesomeIcon, props: { icon: ['fas', 'sign-out-alt'] } },
signInAlt: { component: FontAwesomeIcon, props: { icon: ['fas', 'sign-in-alt'] } },
sync: { component: FontAwesomeIcon, props: { icon: ['fas', 'sync'] } },
ban: { component: FontAwesomeIcon, props: { icon: ['fas', 'ban'] } },
layerGroup: { component: FontAwesomeIcon, props: { icon: ['fas', 'layer-group'] } },
server: { component: FontAwesomeIcon, props: { icon: ['fas', 'server'] } },
users: { component: FontAwesomeIcon, props: { icon: ['fas', 'users'] } },
chartLine: { component: FontAwesomeIcon, props: { icon: ['fas', 'chart-line'] } },
};
Inside my vuetify.js import the fontawesome, along with some theme settings.
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import colors from 'vuetify/lib/util/colors';
import icons from './fontawesome';
Vue.use(Vuetify);
export default new Vuetify({
theme: {
themes: {
light: {
primary: colors.purple.darken1, // #E53935
secondary: colors.blue.lighten1, // #FFCDD2
accent: colors.indigo.base, // #3F51B5
error: colors.red.darken1,
sucess: colors.green.lighten2,
},
},
},
icons: {
iconfont: 'faSvg',
values: icons,
},
});
And for the use of incone I do as follows.
<v-btn
small
dark
text
@click="logout"
>
<v-icon v-text="'$vuetify.icons.signInAlt'" />
<span class="ml-2">Sair</span>
</v-btn>
The icons usually appear on the pages, but the amount of errors on the console is huge. Can anyone tell me how to solve this problem ? I tried a few things I saw online about it, but nothing worked... att.