CODEWITHSUNDEEP
javascriptvue.jsfont-awesome
nowox
nowox

Reputation: 29096

How to properly use FontAwesome in a Vue project in 2020?

I would like to use some FontAwesome fonts in a Vue 2.5 project (running with Laravel). According to the manual the best way if I don't want to use CDN and make my app run offline is to add this to my app.js:

import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faUserSecret)

Vue.component('font-awesome-icon', FontAwesomeIcon)

Then in my Vue component (.vue) I have to use this:

<font-awesome-icon icon="user-secret" />

So each time I want to use a new icon I have to:

  1. Go to https://fontawesome.com/icons

  2. Check the free button

  3. Search for an icon

  4. Go to the detail

  5. Copy the link i.e. <i class="far fa-eye"></i>

  6. Go to my app.js (or in my case my fontawesome.js) and add:

    import { faUserSecret, faEye } from '@fortawesome/free-solid-svg-icons'

library.add(faUserSecret)
library.add(faEye)

  7. Go to my Vue component and add <font-awesome-icon icon="eye" /> wherever I want to

Is this process optimum and minimal?

Upvotes: 5

Views: 7676

Answers (1)

Kapcash
Kapcash

Reputation: 6909

Yes. It's a heavy process I admit, but it has benefits for performance.

Everything's explained on the library's readme:

Why use the concept of a library?
Explicitly selecting icons offer the advantage of only bundling the icons that you use in your final bundled file. This allows us to subset Font Awesome's thousands of icons to just the small number that are normally used.

If you don't mind having a bundle including unused icons, you can import everything as so:

import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fab)

Take the time to read the entire readme, I know it's long but it's worth it!

Upvotes: 6

Related Questions