how do i add a custom kit using imports?

[ezur1]

i have created a custom kit in font awesome but i cant add the icon to my project.
using package.json:
"nuxt-fontawesome": "^0.4.0",
"nuxt": "^2.15.8",
"@fortawesome/fontawesome-pro": "^6.1.1",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-brands-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/pro-duotone-svg-icons": "^6.1.1",
"@fortawesome/pro-light-svg-icons": "^6.1.1",
"@fortawesome/pro-regular-svg-icons": "^6.1.1",
"@fortawesome/pro-solid-svg-icons": "^6.1.1",

in nuxt.config.js
modules: [
[
"nuxt-fontawesome",
{
imports: [...]
]

what set should i use?

thanks!

[raduAmiqus]

1. Install your Pro kit with your package manager
2. Create a Nuxt plugin under (plugin/fontawesome.client.ts/js)
3. Add fontawesome css to nuxt.config.ts

Plugin

import { defineNuxtPlugin } from 'nuxt/app'
import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@awesome.me/your-kit/icons'
import { far } from '@awesome.me/your-kit/icons'
import { fal } from '@awesome.me/your-kit/icons'
import { fak } from '@awesome.me/your-kit/icons'

// This is important, we are going to let Nuxt worry about the CSS
config.autoAddCss = false

// You can add your icons directly in this plugin. See other examples for how you
// can add other styles or just individual icons.
library.add(fas,far,fal,fak)

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.component('icon', FontAwesomeIcon)
})

Nuxt.config.ts

export default defineNuxtConfig({
    compatibilityDate: '2024-11-01',
    devtools: {
        enabled: true,

        timeline: {
            enabled: true
        }
    },
    css: [
        '/assets/css/main.css',
        '@fortawesome/fontawesome-svg-core/styles.css'
    ]
})

How to use

<icon :icon="['fas', 'house']" />
<icon :icon="['far', 'house']" />
<icon :icon="['fal', 'house']" />
<icon :icon="['fak', 'custom-icon-name']" />