How to set icon pack for Individual components (tree shaking) ? about oruga

[cyberfly]

Solved

import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
Vue.component('vue-fontawesome', FontAwesomeIcon);

// oruga

import { Config } from '@oruga-ui/oruga';

Vue.use(Config, {
  iconPack: 'fas',
  iconComponent: 'vue-fontawesome',
});

[jtommy]

Yes, it's right

[agm1984]

I solved it simply by setting iconPack: 'fas' in the options.

Here is my main.js:

import { createApp } from 'vue'
import Oruga from '@oruga-ui/oruga-next'
import '@oruga-ui/oruga-next/dist/oruga-full.css'
import App from './App.vue'
import router from './router'
import './index.css'

const app = createApp(App)

app.use(router)
app.use(Oruga, {
  iconPack: 'fas',
})

app.mount('#app')

index.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

It sets the correct classes: