How to make dynamic import of fontawesome icon in nuxt project

I have just created a new project using the Nuxt framework v3.6.2, and I want to use Font Awesome icons.
For the sake of maintainability and to be able to use them in other contexts, I would like to keep the list of my icons (name and pack) in an array and use it to import them.

Unfortunately, the code I'm using (see below) doesn't seem to work because it can't find the module and returns the following error:

> 500
>
> [vite-node] [ERR_LOAD_URL] import { faHouse as fasHouse } from
> '@fortawesome/free-solid-svg-icons'
>
> at import { faHouse as fasHouse } from
> '@fortawesome/free-solid-svg-icons'

I think it's due to a configuration error that is preventing me from performing dynamic imports. Does anyone have any ideas for a solution?

nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      title: 'front_social',
      meta: [
        {
          name: 'viewport',
          content: 'width=device-width, initial-scale=1'
        },
        {
          charset: 'utf-8'
        }
      ],
      link: [],
      style: [],
      script: [],
      noscript: [
        {
          children: 'JavaScript est obligatoire pour afficher cette page.'
        }
      ]
    },
    keepalive: false,
    layoutTransition: false,
    pageTransition: false
  },
  appConfig: {},
  buildDir: 'build',
  builder: 'vite',
  components: [
    {
      path: '~/components/global-social',
      prefix: 'S',
      pathPrefix: false
    }
  ],
  css: ['~/assets/css/main.scss', '@fortawesome/fontawesome-svg-core/styles.css'],
  debug: Boolean(process.env.NODE_ENV === 'development'),
  dev: Boolean(process.env.NODE_ENV === 'development'),
  devServer: {
    host: 'localhost',
    https: false,
    port: 8081,
    url: 'http://localhost:8081'
  },
  extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
  imports: {
    dirs: ['composables', 'utils', 'stores'],
    global: false
  },
  modules: ['@nuxtjs/eslint-module', '@nuxtjs/tailwindcss', '@nuxtjs/color-mode', '@pinia/nuxt'],
  eslint: {
    cache: true,
    include: ['~/**/*.{js,ts,vue}'],
    eslintPath: 'eslint',
    formatter: 'stylish',
    lintOnStart: true,
    emitWarning: true,
    emitError: true,
    failOnWarning: false,
    failOnError: false
  },
  tailwindcss: {
    cssPath: '~/assets/css/tailwind.css',
    configPath: 'tailwind.config.ts',
    exposeConfig: false,
    exposeLevel: 2,
    injectPosition: 'first',
    viewer: false
  },
  colorMode: {
    preference: 'system',
    fallback: 'light',
    hid: 'nuxt-color-mode-script',
    globalName: '__NUXT_COLOR_MODE__',
    componentName: 'ColorScheme',
    classPrefix: '',
    classSuffix: '',
    storageKey: 'nuxt-color-mode'
  },
  pinia: {
    autoImports: ['defineStore', 'acceptHMRUpdate']
  },
  modulesDir: ['node_modules'],
  pages: true,
  plugins: [],
  router: {},
  serverDir: 'server',
  sourcemap: {
    server: true,
    client: Boolean(process.env.NODE_ENV === 'development')
  },
  srcDir: 'src/',
  typescript: {
    includeWorkspace: false,
    shim: false,
    strict: true,
    tsConfig: {
      compilerOptions: {
        strict: true
      }
    },
    typeCheck: true
  },
  vite: {
    logLevel: 'info',
    define: {
      'process.dev': Boolean(process.env.NODE_ENV === 'development')
    },
    mode: process.env.NODE_ENV,
    resolve: {
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    server: {
      fs: {
        allow: ['build', 'node_modules']
      }
    },
    vue: {
      isProduction: Boolean(process.env.NODE_ENV === 'production')
    }
  }
})

utils.ts

import { IconStyle } from '@fortawesome/fontawesome-svg-core'

export const iconMap: Record<string, IconStyle[]> = {
  house: ['solid'],
  user: ['solid', 'regular']
}
export const iconVariants: string[] = Object.keys(iconMap)
export type IconVariants = keyof typeof iconMap
export const iconVariantsValidator = (variant: string) => iconVariants.includes(variant)

fontawesome.ts

import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { iconMap, iconVariants } from '~/components/global-social/basic/Icon/utils'

function generateIconImports() {
  const importMap: Record<string, Record<string, string>> = {
    solid: {
      prefix: 'fas',
      path: '@fortawesome/free-solid-svg-icons'
    },
    regular: {
      prefix: 'far',
      path: '@fortawesome/free-regular-svg-icons'
    },
    brands: {
      prefix: 'fab',
      path: '@fortawesome/free-brands-svg-icons'
    }
  }

  const imports = []
  for (const iconName of iconVariants) {
    const iconStyles = iconMap[iconName]

    imports.push(
      ...iconStyles.map(async iconStyle => {
        const name = `${iconName.charAt(0).toUpperCase()}${iconName.slice(1)}`
        return import(
          /* @vite-ignore */
          `import { fa${name} as ${importMap[iconStyle].prefix}${name} } from '${importMap[iconStyle].path}'`
        )
      })
    )
  }
  return imports
}

await Promise.all(generateIconImports()).then(icons => {
  for (const icon of icons) library.add(icon)
})

config.autoAddCss = false

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

I tried adding the plugin to the Nuxt configuration, but it didn't make much of a difference. As for the Vite configuration, I couldn't find much either.

I'm not sure if it's the best way to solve the problem, but I found a fairly clean and functional solution.

Instead of importing only the icons I need, I import everything and only add to the library the ones that are actually used.

So, I have the following codes:

utils.ts

import { IconStyle, IconDefinition } from '@fortawesome/fontawesome-svg-core'
import { camelCaseToKebabCase, kebabCaseToPascalCase } from '~/utils/formats'

export const iconMap: Record<string, IconStyle[]> = {
  plus: ['solid'],
  trash: ['solid'],
  user: ['solid', 'regular'],
  'circle-notch': ['solid'],
  github: ['brands']
}

export const iconImports: string[] = Object.keys(iconMap).map(key => `fa${kebabCaseToPascalCase(key)}`)

export const getIconLibrary = (icons: any, prefix: string, pack: IconStyle) =>
  Object.keys(icons)
    .filter(
      key =>
        key !== prefix &&
        key !== 'prefix' &&
        iconImports.includes(key) &&
        iconMap[camelCaseToKebabCase(key).replace('fa-', '')].includes(pack)
    )
    .map(icon => icons[icon as keyof typeof icons]) as IconDefinition[]

fontawesome.ts

import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import * as fasIcons from '@fortawesome/free-solid-svg-icons'
import * as farIcons from '@fortawesome/free-regular-svg-icons'
import * as fabIcons from '@fortawesome/free-brands-svg-icons'
import { getIconLibrary } from '~/components/global-social/forms/Icon/utils'

const fasIconList = getIconLibrary(fasIcons, 'fas', 'solid')
const farIconList = getIconLibrary(farIcons, 'far', 'regular')
const fabIconList = getIconLibrary(fabIcons, 'fab', 'brands')

library.add(...fasIconList, ...farIconList, ...fabIconList)

config.autoAddCss = false

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