While working with Vue 3 and Vite, I came across an issue that seems quite strange. The Oh Vue Icons library is loading a massive 108 MB of bundle size, which significantly slows down the loading time even in ViteJS. Here's how my setup looks like:
import { addIcons, OhVueIcon } from 'oh-vue-icons'
import {
FaFacebookSquare,
FaInstagram,
FaLinkedin,
FaQuora,
FaTwitter,
FaYoutube,
} from 'oh-vue-icons/icons'
// register the icons
addIcons(
FaFacebookSquare,
FaInstagram,
FaLinkedin,
FaQuora,
FaTwitter,
FaYoutube
)
const app = createApp(App)
app.component('VIcon', OhVueIcon)
app.mount('#app')
And this is how I'm using these icons in my component:
<VIcon name="fa-facebook-square" />
<VIcon name="fa-youtube" />
<VIcon name="fa-instagram" />
<VIcon name="fa-quora" />
<VIcon name="fa-linkedin" />
<VIcon name="fa-twitter" />
The issue becomes apparent when I try to conditionally display these six icons, resulting in only one or two icons per card.
I am puzzled as to why it's loading such a huge amount of javascript (108 MB). This doesn't seem right at all. Could there be any additional configurations needed for Vite with Vue 3?
Looking forward to your help. Thank you.