Hello, can you help to resolve this bug ? https://github.com/invictus-codes/nuxt-vuetify/issues

[balmy night]

https://github.com/invictus-codes/nuxt-vuetify/issues/1

[drowsy plinth]

hi

let's discuss

i want to know your problem correctly

[balmy night]

Hello 🙂 thanks

So i'm using Nuxt 3.4.0 with this module https://github.com/invictus-codes/nuxt-vuetify. this module add vuetify into any nuxt project. it's working as expected, and now i'd like to add https://github.com/FortAwesome/vue-fontawesome into my project to use font awesome

<font-awesome-icon icon="fa-solid fa-user-secret" /> is working good but not <v-icon icon="fa-solid fa-user-secret" /> maybe because vuetify is not aware of vue-fontawesome ? I don't really know why it's not working

@drowsy plinth do you need more informations ?

[drowsy plinth]

Well, actually I met this problem before..

v-icon is a vuetify component, not default component in nuxt 3 and v-icon component is based on material design icon.

[balmy night]

I wonder if my font-awesome.ts plugin should be loaded before the vuetify module 🤷

[balmy night]

I have followed this documentation to set the icon to font-awesome, and not to material design icon : https://vuetifyjs.com/en/features/icon-fonts/#font-awesome-svg-icons

[drowsy plinth]

yes, ofc we can use vue-fontawesome with vuetify

let me explain.

to use vue-fontawesome with vuetify, you need to install @fortawesome/vue-fontawesome module

did you do this?

[balmy night]

yes

[drowsy plinth]

ok, once imported, you can use FontAwesomeIcon component provided by vue-fontawesome to display icons

let me share a example code..

i hope this will help you.

[balmy night]

The FontAwesomeIcon component is already working 🙂

My problem is different

[drowsy plinth]

<font-awesome-icon icon="heart" />
is this work?

[balmy night]

Yes

It's not my problem

[drowsy plinth]

then you want to use like this?
<v-icon="heart" />

[balmy night]

Yes

<v-icon icon="fa-solid fa-user-secret" /> this is not working

[drowsy plinth]

i think this cannot work since v-icon is a vuetify component

btw where are you from?

[balmy night]

yes this can work

It's documented here : https://vuetifyjs.com/en/features/icon-fonts/#font-awesome-svg-icons

You see ? it's possible 😉

[drowsy plinth]

yeah, let me think

did you use mdi prefix?

[balmy night]

no

[drowsy plinth]

for example, you can use mdi-heart to use fa-heart icon

[balmy night]

i've tried any prefix, no prefix, fa and fas

[drowsy plinth]

<template>
  <v-icon>mdi-heart</v-icon>
</template>

import { library } from '@fortawesome/fontawesome-svg-core'
import { faHeart } from '@fortawesome/free-solid-svg-icons'

library.add(faHeart)

[balmy night]

I don't want mdi. mdi is Material Design Icon

[drowsy plinth]

you can use fontawesome icon in this way

[balmy night]

well, not. it's not working tho 🤷

[drowsy plinth]

i am from china

where are you from?

[balmy night]

how it's related to my question ?

i'm just from internet

[drowsy plinth]

😠

[balmy night]

not working