DEV Community

Discussion on: Font Awesome with VueJS 3

View post
Collapse
 
adamkdean profile image
Adam K Dean •

It seems to me that adding all these to the library is massively inflating the chunk size and actually worse than using the CDN CSS direct

dist/assets/index.5c3617d6.js                      1878.35 KiB / gzip: 678.00 KiB
Enter fullscreen mode Exit fullscreen mode

vs

dist/assets/index.ee0d013d.js                      82.16 KiB / gzip: 32.53 KiB
Enter fullscreen mode Exit fullscreen mode
Collapse
 
sabbirsobhani profile image
Sabbir Sobhani •

Actually, when I wrote this article I did not find any good way to implement font awesome with vue. I don't use vue now, but if you have better idea/docs you can share. Thank you.

Collapse
 
adamkdean profile image
Adam K Dean • • Edited

The way I've used it is very similar to you, except I extract the icons I use and only add them. Your article was still helpful so thank you for that, just required a little tweak as below and now the chunks are much smaller.

import { library } from '@fortawesome/fontawesome-svg-core'
import { faBell, faLock, faWarning } from '@fortawesome/free-solid-svg-icons'
library.add(faBell, faLock, faWarning)
Enter fullscreen mode Exit fullscreen mode

Some comments have been hidden by the post's author - find out more