How to use it with vue-fontawesome?

[GreyXor]

Contact Details

No response

What happened?

Hello, I have followed this part https://vuetifyjs.com/en/features/icon-fonts/#font-awesome-svg-icons but I can't get it to work. Can you tell me how to use it with Font Awesome vue-fontawesome ?

Version

v0.2.18

What browsers are you seeing the problem on?

Firefox

Relevant log output

No response

Additional context

nuxt.config.ts

import { aliases, fa } from "vuetify/iconsets/fa-svg";

export default defineNuxtConfig({
  devtools: true,
  css: ["@fortawesome/fontawesome-svg-core/styles.css"],
  modules: [
    "@invictus.codes/nuxt-vuetify",
  ],
  vuetify: {
    vuetifyOptions: {
      icons: {
        defaultSet: "fa",
        aliases,
        sets: {
          fa,
        },
      },
    },
  },
});

plugins/fontawesome.ts

import { library, config } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { fas } from "@fortawesome/free-solid-svg-icons";

config.autoAddCss = false;

library.add(fas);

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("font-awesome-icon", FontAwesomeIcon);
});

[jvhellemondt]

Hi, thanks for reporting this. Are you getting any kind of error?

[GreyXor]

Hi, thanks for reporting this. Are you getting any kind of error?

Hello thanks, I do not receive any errors. Just no icons,

This code does not work:

 <v-icon icon="fas fa-home" /> < ! -- I've tried `fa`, `fas` and some other -- >

This code works:

<font-awesome-icon :icon="['fa', 'home']" />

I would like to find a solution to register the icons in vuetify so that I can use them as in the first code

[jvhellemondt]

I'm working on a CodeSandbox for this in my spare time. Will get back to you asap

[jvhellemondt]

I think I have found the issue. I'm using json stringify for the module options to them to the runtime (src/runtime/templates/plugin.mts#5). You pass (as you should) a function as IconSet. That doesn't work with json. Will fix and test asap

[jvhellemondt]

That wasn't it. I have created a ticket at Nuxt.

[GreyXor]

Thank you @jvhellemondt, so it's not related to nuxt-vuetify module but nuxt itself ?

[jvhellemondt]

No it's not with Nuxt. Nuxt is great.

It's within the module -- I'm trying to pass the iconset through some hoops, however it is lost during the build step (thus not working). I am unable to figure out how to do this, while keeping the awesome developer experience, so I asked the nuxt team how they would do it.

[GreyXor]

@jvhellemondt hello, gentle ping. https://github.com/nuxt/nuxt/issues/20933 is now closed. Can we find a workaround or something to make vue-fontawesome work with nuxt-vuetify ?

[GreyXor]

@jvhellemondt Hello, second gentle ping, did you manage to find a workaround or a fix ? thank you

[jvhellemondt]

Nope. I followed instructions of nuxt team however couldn't dive in entirely. For now, out of scope on this module

[GreyXor]

OK, if anyone needs a vuetify nuxt module that handle vue-fontawesome, I recommand: https://github.com/userquin/vuetify-nuxt-module. I've switched to it one month ago and working very nice