(RESOLVED) Include FontAwesome in a Vue 3 library built with Vite 5

Question

I'm creating my own components library with Vue 3, built with Vite 5. I succeeded in building it then using it in other projects, but I have troubles with FontAwesome. I want my components to use FontAwesome icons, and it does work if I launch the project using vite command. BUT when I build my library then import it in another project, I have the following error in my browser:

[Vue warn]: Failed to resolve component: font-awesome-icon
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

Here is how I use FontAwesome in the library:

• main.ts

import { createApp } from 'vue';
import App from './App.vue';
import './assets/styles/main.css';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';

library.add(faChevronDown);

const app = createApp(App);
app.component('font-awesome-icon', FontAwesomeIcon);
app.mount('#app');

• Dropdown.vue

<-- some code here !-->
        <span>
          <font-awesome-icon icon='fa-solid fa-chevron-down' />
        </span>
<-- some code here !-->

And here's my vite.config.ts for the library:

import { resolve } from 'node:path';
import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [Vue({ style: { filename: 'style.css' } })],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
        @use "./src/assets/styles/styles.scss";
        @import './src/assets/styles/vars';
        `,
      },
    },
  },
  build: {
    outDir: './dist',
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'my-lib-name',
      formats: ['es'],
      fileName: (format) => `${'my-lib-name'}.${format}.js`,
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: { vue: 'Vue' },
      },
    },
  },
  resolve: {
    alias: [{
      find: 'public',
      replacement: resolve(__dirname, './public'),
    }],
  },
});

I tried to find a solution, like using optimizeDeps Vite option to include FontAwesome dependencies or installing these packages manually in the host project, but nothing seems to be ok.

Does anyone know how to fix this? Thanks!

EDIT (23 feb. 2024): I tried something based on the solution given in comments below -> I let FontAwesome packages as dependencies then it's automatically installed when someone include my library in a project, and I moved the library.add(...) part in my library components so that each component is responsible for importing the icons it needs. This way, users of my library will only have to add app.component('font-awesome-icon', FontAwesomeIcon); in the main.ts of their project. Thanks to José Ramirez for helping me!